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
13 changed files with 100 additions and 41 deletions
|
@ -4,12 +4,11 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
|
<title>CR Search</title>
|
||||||
<title>web</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<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>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id="contentwrapper">
|
<div id="contentwrapper">
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<div id="page-mask" v-if="showIntro"></div>
|
<div id="page-mask" v-if="showIntro" @click="showIntro=false"></div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
<Intro v-if="showIntro"></Intro>
|
<Intro v-if="showIntro"></Intro>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.autocomplete-result-list {
|
.autocomplete-result-list {
|
||||||
background: url("assets/Old_papertest.jpg");
|
background: $background-image;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: solid 2px $border-color;
|
border: solid 2px $border-color;
|
||||||
|
|
|
@ -6,3 +6,5 @@ $noteGreen: #e0e5c1;
|
||||||
$headings-color: #58180D;
|
$headings-color: #58180D;
|
||||||
|
|
||||||
$primary: $headings-color;
|
$primary: $headings-color;
|
||||||
|
|
||||||
|
$background-image: url("assets/background.webp")
|
||||||
|
|
|
@ -4,31 +4,53 @@
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: url("assets/Old_papertest.jpg");
|
background: $background-image;
|
||||||
border: 2px solid $border-color;
|
//border: 2px solid $border-color;
|
||||||
|
|
||||||
button {
|
iframe {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
}
|
||||||
|
.small {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ytalignment {
|
||||||
|
left: 0;
|
||||||
|
right: unset;
|
||||||
|
.small {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup {
|
.popup {
|
||||||
font-family: "ScalySans", sans-serif;
|
font-family: "ScalySans", sans-serif;
|
||||||
background: url("assets/Old_papertest.jpg");
|
background: $background-image;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
//border: 2px solid $border-color;
|
//border: 2px solid $border-color;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
|
.to-website-button {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
@include media-breakpoint-down(xs) {
|
@include media-breakpoint-down(xs) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
.to-website-button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -44,6 +66,7 @@
|
||||||
> div {
|
> div {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
> form {
|
> form {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
@ -52,22 +75,26 @@
|
||||||
font-family: inherit;
|
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 {
|
.ytoptin {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -95,7 +122,7 @@
|
||||||
max-height: 95vh;
|
max-height: 95vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
h1{
|
h1 {
|
||||||
font-family: "Nodesto Caps Condensed", cursive;
|
font-family: "Nodesto Caps Condensed", cursive;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -124,6 +151,7 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $noteGreen;
|
background-color: $noteGreen;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
font-family: "Mr Eaves Small Caps", serif;
|
font-family: "Mr Eaves Small Caps", serif;
|
||||||
font-size: 1.2rem;
|
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 class="title"><h1>Critical Role Search</h1></div>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
This website uses subtitles to allow a full text search through all
|
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> episodes.
|
<a href="https://critrole.com/">Critical Role</a>.
|
||||||
</p>
|
</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
|
<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
|
<a href="https://crtranscript.tumblr.com/" target="_blank" rel="noopener">CR Transcript
|
||||||
Team</a>,
|
Team</a>,
|
||||||
|
@ -14,7 +28,8 @@
|
||||||
<p>
|
<p>
|
||||||
This website is licensed under the
|
This website is licensed under the
|
||||||
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPL-3.0</a>.
|
<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>
|
</p>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Fonts</dt>
|
<dt>Fonts</dt>
|
||||||
|
@ -34,7 +49,7 @@
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonrow">
|
<div class="buttonrow">
|
||||||
<button class="btn" @click="closeIntro">Close</button>
|
<button class="btn btn-primary" @click="closeIntro">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: $background-color;
|
background: $background-color;
|
||||||
background: url("assets/Old_papertest.jpg");
|
background: $background-image;
|
||||||
font-family: "Scaly Sans", $font-family-sans-serif;
|
font-family: "Scaly Sans", $font-family-sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,7 +74,7 @@ body {
|
||||||
.entry {
|
.entry {
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: .529cm;
|
font-size: 1.3rem;
|
||||||
border-bottom: 2px solid $border-color;
|
border-bottom: 2px solid $border-color;
|
||||||
margin-top: .2em;
|
margin-top: .2em;
|
||||||
margin-bottom: .2em;
|
margin-bottom: .2em;
|
||||||
|
@ -198,3 +198,11 @@ footer {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footnote-list {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: .75rem;
|
||||||
|
ol {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -62,6 +62,7 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
document.title = "Episode Overview | CR Search";
|
||||||
fetch(baseURL + "episodes")
|
fetch(baseURL + "episodes")
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data: SeriesData[]) => {
|
.then((data: SeriesData[]) => {
|
||||||
|
@ -79,7 +80,6 @@ export default Vue.extend({
|
||||||
return (withHash ? "#" : "") + `series-${series.id}`;
|
return (withHash ? "#" : "") + `series-${series.id}`;
|
||||||
},
|
},
|
||||||
transcriptLink(episode: EpisodeDetailed, series: Series): Location {
|
transcriptLink(episode: EpisodeDetailed, series: Series): Location {
|
||||||
console.log(series.slug)
|
|
||||||
return {
|
return {
|
||||||
name: "transcript",
|
name: "transcript",
|
||||||
params: {
|
params: {
|
||||||
|
|
|
@ -21,13 +21,16 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonrow">
|
<div class="buttonrow">
|
||||||
<button class="btn" @click="showYtOptIn=false">abort</button>
|
<button class="btn btn-primary" @click="showYtOptIn=false">abort</button>
|
||||||
<a class="btn" :href="ytLink" target="youtube" rel="noopener" @click="showYtOptIn=false">YouTube</a>
|
<a class="btn btn-primary" :href="ytLink" target="youtube" rel="noopener" @click="showYtOptIn=false">YouTube</a>
|
||||||
<button class="btn" @click="doYtOptIn">continue</button>
|
<button class="btn btn-primary" @click="doYtOptIn">continue</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showYT" class="ytwrapper">
|
<div v-if="showYT" :class="{ytwrapper:true, ytalignment:YTright}">
|
||||||
<button class="btn" @click="closeVideo">Hide</button>
|
<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>
|
<youtube :nocookie="true" ref="youtube" @ready="playVideo(false)" :width="ytWidth"></youtube>
|
||||||
</div>
|
</div>
|
||||||
<div class="inputlist">
|
<div class="inputlist">
|
||||||
|
@ -126,6 +129,7 @@ export default Vue.extend({
|
||||||
showYtOptIn: false,
|
showYtOptIn: false,
|
||||||
ytVideoID: undefined as string | undefined,
|
ytVideoID: undefined as string | undefined,
|
||||||
showYT: false,
|
showYT: false,
|
||||||
|
YTright: true,
|
||||||
ytResult: undefined as Result | undefined,
|
ytResult: undefined as Result | undefined,
|
||||||
ytWidth: 640,
|
ytWidth: 640,
|
||||||
showSeriesSelector: false,
|
showSeriesSelector: false,
|
||||||
|
@ -153,9 +157,7 @@ export default Vue.extend({
|
||||||
if (this.episode == null) {
|
if (this.episode == null) {
|
||||||
this.episode = "10";
|
this.episode = "10";
|
||||||
}
|
}
|
||||||
if (this) {
|
document.title = "CR Search";
|
||||||
document.title = "CR Search";
|
|
||||||
}
|
|
||||||
if (this.$route.params.keyword) {
|
if (this.$route.params.keyword) {
|
||||||
this.search();
|
this.search();
|
||||||
}
|
}
|
||||||
|
@ -200,6 +202,7 @@ export default Vue.extend({
|
||||||
+ "search?query=" + this.$route.params.keyword
|
+ "search?query=" + this.$route.params.keyword
|
||||||
+ "&until=" + this.episode
|
+ "&until=" + this.episode
|
||||||
+ "&series=" + this.$route.params.series;
|
+ "&series=" + this.$route.params.series;
|
||||||
|
document.title = this.$route.params.keyword + " | CR Search";
|
||||||
|
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
|
@ -408,7 +411,7 @@ export default Vue.extend({
|
||||||
this.search();
|
this.search();
|
||||||
},
|
},
|
||||||
ytOptIn(value: boolean): void {
|
ytOptIn(value: boolean): void {
|
||||||
localStorage.setItem("ytOption", value.toString());
|
localStorage.setItem("ytOptIn", value.toString());
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -42,16 +42,16 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log(this.episodeNr);
|
|
||||||
fetch(baseURL + "transcript?episode=" + this.episodeNr + "&series=" + this.series)
|
fetch(baseURL + "transcript?episode=" + this.episodeNr + "&series=" + this.series)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data: TranscriptData) => {
|
.then((data: TranscriptData) => {
|
||||||
this.episode = data.episode;
|
this.episode = data.episode;
|
||||||
this.lines = data.lines;
|
this.lines = data.lines;
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
|
document.title = this.episode.pretty_title + " | Transcript | CR Search";
|
||||||
const hash = this.$route.hash;
|
const hash = this.$route.hash;
|
||||||
if (hash) {
|
if (hash) {
|
||||||
Vue.nextTick(function() {
|
Vue.nextTick(() => {
|
||||||
document.getElementById(hash.slice(1))?.scrollIntoView({
|
document.getElementById(hash.slice(1))?.scrollIntoView({
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue