xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-17 02:13:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

quote link highlighting, quote clickable permalink icon, SearchResults link to exact quote, undo offset option

Browse Source
This commit is contained in:
Xevion
2020-09-05 16:49:32 -05:00
parent 849f935245
commit 0d5c80ce44
3 changed files with 78 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/components/Episode.vue
View File

@@ -1,31 +1,37 @@
<template> <template>
<div> <div>
<b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \ <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
- ${episode != null ? episode.title : ''}`" class="mb-4"> - ${episode != null ? episode.title : ''}`" class="mb-4">
<span v-if="episode"> <span v-if="episode">
{{ episode.description }} {{ episode.description }}
</span> </span>
<CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList> <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
</b-card> </b-card>
<div v-if="episode != null"> <div v-if="episode != null">
<b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`" :id="scene_index" <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`" :id="scene_index"
class="mb-1" body-class="p-0"> class="mb-1" body-class="p-0">
<b-card-text class="my-2"> <b-card-text class="my-2">
<!-- <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"--> <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
<!-- :footer="`Deleted Scene ${scene.deleted}`">--> <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
<!-- Deleted Scene {{ scene.deleted }}--> :footer="`Deleted Scene ${scene.deleted}`">
<!-- </span>--> Deleted Scene {{ scene.deleted }}
<QuoteList :quotes="scene.quotes"></QuoteList> </span>
</b-card-text> </b-card-text>
</b-card> </b-card>
</div>
</div> </div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.card-title { font-family: 'Montserrat', sans-serif; font-weight: 600; } .card-title {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.deleted-scene { font-size: 0.75em; line-height: 12px; } .deleted-scene {
font-size: 0.75em;
line-height: 12px;
}
</style> </style>
<script> <script>
@@ -55,7 +61,7 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
if (this.$route.hash) { if (this.$route.hash) {
this.$nextTick(() => { this.$nextTick(() => {
const section = document.getElementById(this.$route.hash.substring(1)); const section = document.getElementById(this.$route.hash.substring(1));
this.$scrollTo(section, 750, { easing: 'ease-in' }); this.$scrollTo(section, 500, { easing: 'ease-in', offset: 0 });
}); });
} }
}) })

69
client/src/components/QuoteList.vue
View File

@@ -1,41 +1,76 @@
<template> <template>
<table class="quote-list px-3 w-100"> <table class="quote-list px-3 w-100">
<tr v-for="(quote, index) in quotes" :key="`quote-${index}`"> <tr v-for="(quote, index) in quotes" :key="`quote-${index}`" :id="`${sceneIndex}-${index}`"
:class="$route.hash !== null && $route.hash.substring(1) === `${sceneIndex}-${index}` ? 'highlight' : ''">
<td class="quote-speaker pl-3" v-if="quote.speaker"> <td class="quote-speaker pl-3" v-if="quote.speaker">
<span class="my-3"> <span class="my-3">
{{ quote.speaker }} {{ quote.speaker }}
</span> </span>
</td> </td>
<td class="quote-text w-100 pr-3">{{ quote.text }}</td> <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
<td class="px-1 pl-2">
<a :href="quote_link(index)" class="no-link">
<b-icon icon="link45deg"></b-icon>
</a>
</td>
</tr> </tr>
</table> </table>
</template> </template>
<style lang="scss"> <style lang="scss">
@import "../assets/scss/_variables"; @import "../assets/scss/_variables";
.quote-list > tr {
white-space: nowrap;
.quote-list > tr { &:hover, &.highlight {
white-space: nowrap; background-color: $grey-4;
&:hover { background-color: $grey-4; }
} }
}
.quote-text { .quote-text {
white-space: normal; white-space: normal;
} }
.quote-speaker { .quote-speaker {
color: darken($grey-10, 1.75%); color: darken($grey-10, 1.75%);
min-width: 100px; min-width: 100px;
padding-right: 1em; padding-right: 1em;
font-weight: 600; font-weight: 600;
vertical-align: text-top; vertical-align: text-top;
text-align: right; text-align: right;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
}
table.quote-list tr td:last-child {
height: 100%;
a { height: 100%; }
svg {
font-size: 1.35em;
opacity: 0;
transition: opacity 0.1s ease-in;
} }
}
table.quote-list tr:hover td:last-child svg {
opacity: 100%;
}
</style> </style>
<script> <script>
export default { export default {
props: ['quotes'], props: {
sceneIndex: {
required: true,
type: Number,
},
quotes: {
required: true,
type: Object,
},
},
methods: {
quote_link(quoteIndex) {
return `/${this.$route.params.season}/${this.$route.params.episode}#${this.sceneIndex}-${quoteIndex}`;
},
},
}; };
</script> </script>

2
client/src/components/SearchResult.vue
View File

@@ -31,7 +31,7 @@
</tr> </tr>
</table> </table>
<router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2" <router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
:to="`/${item.season}/${item.episode_rel}#${item.section_rel}`"> :to="`/${item.season}/${item.episode_rel}#${item.section_rel - 1}-${item.quote_rel - 1}`">
Season {{ item.season }} Episode {{ item.episode_rel }} Scene {{ item.section_rel }} Season {{ item.season }} Episode {{ item.episode_rel }} Scene {{ item.section_rel }}
</router-link> </router-link>
</b-card-text> </b-card-text>