mirror of
https://github.com/Findus23/cr-search.git
synced 2024-09-19 15:23:44 +02:00
improve design
This commit is contained in:
parent
166b8fbe11
commit
d5e7e162a6
GPG key ID:
54DE4D798D244853
13 changed files with 100 additions and 41 deletions
|
|
@ -4,12 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
|
||||
<title>web</title>
|
||||
<title>CR Search</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but CR Search doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="container">
|
||||
<div id="contentwrapper">
|
||||
<transition name="fade">
|
||||
<div id="page-mask" v-if="showIntro"></div>
|
||||
<div id="page-mask" v-if="showIntro" @click="showIntro=false"></div>
|
||||
</transition>
|
||||
|
||||
<Intro v-if="showIntro"></Intro>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
|
||||
.autocomplete-result-list {
|
||||
background: url("assets/Old_papertest.jpg");
|
||||
background: $background-image;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
border: solid 2px $border-color;
|
||||
|
|
|
|||
|
|
@ -6,3 +6,5 @@ $noteGreen: #e0e5c1;
|
|||
$headings-color: #58180D;
|
||||
|
||||
$primary: $headings-color;
|
||||
|
||||
$background-image: url("assets/background.webp")
|
||||
|
|
|
|||
|
|
@ -4,31 +4,53 @@
|
|||
z-index: 100;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: url("assets/Old_papertest.jpg");
|
||||
border: 2px solid $border-color;
|
||||
background: $background-image;
|
||||
//border: 2px solid $border-color;
|
||||
|
||||
button {
|
||||
iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.small {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&.ytalignment {
|
||||
left: 0;
|
||||
right: unset;
|
||||
.small {
|
||||
transform: rotate(180deg);
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup {
|
||||
font-family: "ScalySans", sans-serif;
|
||||
background: url("assets/Old_papertest.jpg");
|
||||
background: $background-image;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
//border: 2px solid $border-color;
|
||||
z-index: 100;
|
||||
|
||||
.to-website-button {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 80%;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.to-website-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -44,6 +66,7 @@
|
|||
> div {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
> form {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -52,22 +75,26 @@
|
|||
font-family: inherit;
|
||||
}
|
||||
|
||||
box-shadow: 10px 10px transparentize(black, .5);
|
||||
box-shadow: 10px 10px transparentize(black, .7);
|
||||
|
||||
.buttonrow {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border-top: 2px solid $border-color;
|
||||
@include media-breakpoint-down(xs) {
|
||||
border-bottom: 2px solid $border-color;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.buttonrow {
|
||||
display: flex;
|
||||
padding: 0!important;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.small {
|
||||
flex-basis: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ytoptin {
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +122,7 @@
|
|||
max-height: 95vh;
|
||||
overflow: auto;
|
||||
|
||||
h1{
|
||||
h1 {
|
||||
font-family: "Nodesto Caps Condensed", cursive;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
|
|
@ -124,6 +151,7 @@
|
|||
text-decoration: none;
|
||||
background-color: $noteGreen;
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: "Mr Eaves Small Caps", serif;
|
||||
font-size: 1.2rem;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 275 KiB |
4
web/src/assets/README.md
Normal file
4
web/src/assets/README.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
#### background.webp
|
||||
|
||||
based on https://github.com/naturalcrit/homebrewery/blob/master/themes/assets/parchmentBackground.jpg (MIT License) and
|
||||
made brighter/desaturated
|
||||
BIN
web/src/assets/background.webp
Normal file
BIN
web/src/assets/background.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
|
|
@ -3,9 +3,23 @@
|
|||
<div class="title"><h1>Critical Role Search</h1></div>
|
||||
<div>
|
||||
<p>
|
||||
This website uses subtitles to allow a full text search through all
|
||||
<a href="https://critrole.com/">Critical Role</a> episodes.
|
||||
This Website uses subtitles to allow you to search through the text of all<sup>1</sup> episodes of
|
||||
<a href="https://critrole.com/">Critical Role</a>.
|
||||
</p>
|
||||
<p>In addition to a plain search there is a text completion from common phrases, a upper episode limit
|
||||
selector to avoid getting spoilered by something that occurs in a later episode<sup>2</sup></p>
|
||||
<p>If you have any feedback, ideas for improvements or bugs, feel free to contact me at
|
||||
<a href="mailto:cr@lw1.at">cr@lw1.at</a> or <a href="https://twitter.com/lw1_at">on Twitter</a>.</p>
|
||||
|
||||
<div class="footnote-list">
|
||||
<ol>
|
||||
<li>all episodes with manually subtitles (including Shows and One-Shots)</li>
|
||||
<li>this also affects search suggestions</li>
|
||||
</ol>
|
||||
</div>
|
||||
<button class="btn btn-primary to-website-button" @click="closeIntro">Go to the Website</button>
|
||||
|
||||
<hr>
|
||||
<p>Subtitles for Campaign 1 and Campaign 2 up to Episode 54 by the
|
||||
<a href="https://crtranscript.tumblr.com/" target="_blank" rel="noopener">CR Transcript
|
||||
Team</a>,
|
||||
|
|
@ -14,7 +28,8 @@
|
|||
<p>
|
||||
This website is licensed under the
|
||||
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPL-3.0</a>.
|
||||
You can find the source <a href="#">here</a>.
|
||||
You can find the source code for both the backend doing the search and the frontend visualising the
|
||||
results <a href="https://github.com/Findus23/cr-search">here</a>.
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Fonts</dt>
|
||||
|
|
@ -34,7 +49,7 @@
|
|||
</dl>
|
||||
</div>
|
||||
<div class="buttonrow">
|
||||
<button class="btn" @click="closeIntro">Close</button>
|
||||
<button class="btn btn-primary" @click="closeIntro">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
body {
|
||||
background: $background-color;
|
||||
background: url("assets/Old_papertest.jpg");
|
||||
background: $background-image;
|
||||
font-family: "Scaly Sans", $font-family-sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ body {
|
|||
.entry {
|
||||
|
||||
.title {
|
||||
font-size: .529cm;
|
||||
font-size: 1.3rem;
|
||||
border-bottom: 2px solid $border-color;
|
||||
margin-top: .2em;
|
||||
margin-bottom: .2em;
|
||||
|
|
@ -198,3 +198,11 @@ footer {
|
|||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-list {
|
||||
margin-top: 1rem;
|
||||
font-size: .75rem;
|
||||
ol {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ export default Vue.extend({
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Episode Overview | CR Search";
|
||||
fetch(baseURL + "episodes")
|
||||
.then((response) => response.json())
|
||||
.then((data: SeriesData[]) => {
|
||||
|
|
@ -79,7 +80,6 @@ export default Vue.extend({
|
|||
return (withHash ? "#" : "") + `series-${series.id}`;
|
||||
},
|
||||
transcriptLink(episode: EpisodeDetailed, series: Series): Location {
|
||||
console.log(series.slug)
|
||||
return {
|
||||
name: "transcript",
|
||||
params: {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,16 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="buttonrow">
|
||||
<button class="btn" @click="showYtOptIn=false">abort</button>
|
||||
<a class="btn" :href="ytLink" target="youtube" rel="noopener" @click="showYtOptIn=false">YouTube</a>
|
||||
<button class="btn" @click="doYtOptIn">continue</button>
|
||||
<button class="btn btn-primary" @click="showYtOptIn=false">abort</button>
|
||||
<a class="btn btn-primary" :href="ytLink" target="youtube" rel="noopener" @click="showYtOptIn=false">YouTube</a>
|
||||
<button class="btn btn-primary" @click="doYtOptIn">continue</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showYT" class="ytwrapper">
|
||||
<button class="btn" @click="closeVideo">Hide</button>
|
||||
<div v-if="showYT" :class="{ytwrapper:true, ytalignment:YTright}">
|
||||
<div class="buttonrow">
|
||||
<button class="btn-primary small" @click="YTright=!YTright">←</button>
|
||||
<button class="btn btn-primary" @click="closeVideo">Hide</button>
|
||||
</div>
|
||||
<youtube :nocookie="true" ref="youtube" @ready="playVideo(false)" :width="ytWidth"></youtube>
|
||||
</div>
|
||||
<div class="inputlist">
|
||||
|
|
@ -126,6 +129,7 @@ export default Vue.extend({
|
|||
showYtOptIn: false,
|
||||
ytVideoID: undefined as string | undefined,
|
||||
showYT: false,
|
||||
YTright: true,
|
||||
ytResult: undefined as Result | undefined,
|
||||
ytWidth: 640,
|
||||
showSeriesSelector: false,
|
||||
|
|
@ -153,9 +157,7 @@ export default Vue.extend({
|
|||
if (this.episode == null) {
|
||||
this.episode = "10";
|
||||
}
|
||||
if (this) {
|
||||
document.title = "CR Search";
|
||||
}
|
||||
document.title = "CR Search";
|
||||
if (this.$route.params.keyword) {
|
||||
this.search();
|
||||
}
|
||||
|
|
@ -200,6 +202,7 @@ export default Vue.extend({
|
|||
+ "search?query=" + this.$route.params.keyword
|
||||
+ "&until=" + this.episode
|
||||
+ "&series=" + this.$route.params.series;
|
||||
document.title = this.$route.params.keyword + " | CR Search";
|
||||
|
||||
fetch(url)
|
||||
.then((response) => response.json())
|
||||
|
|
@ -408,7 +411,7 @@ export default Vue.extend({
|
|||
this.search();
|
||||
},
|
||||
ytOptIn(value: boolean): void {
|
||||
localStorage.setItem("ytOption", value.toString());
|
||||
localStorage.setItem("ytOptIn", value.toString());
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -42,16 +42,16 @@ export default Vue.extend({
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.episodeNr);
|
||||
fetch(baseURL + "transcript?episode=" + this.episodeNr + "&series=" + this.series)
|
||||
.then((response) => response.json())
|
||||
.then((data: TranscriptData) => {
|
||||
this.episode = data.episode;
|
||||
this.lines = data.lines;
|
||||
this.loaded = true;
|
||||
document.title = this.episode.pretty_title + " | Transcript | CR Search";
|
||||
const hash = this.$route.hash;
|
||||
if (hash) {
|
||||
Vue.nextTick(function() {
|
||||
Vue.nextTick(() => {
|
||||
document.getElementById(hash.slice(1))?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue