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

add episode hash autoscroll

Browse Source
This commit is contained in:
Xevion
2020-09-05 10:46:45 -05:00
parent 84715066ac
commit 39fe2dcb5c
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,10 +11,10 @@
<b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`" :id="scene_index" <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`" :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"--> <!-- <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"-->
<!-- :footer="`Deleted Scene ${scene.deleted}`">--> <!-- :footer="`Deleted Scene ${scene.deleted}`">-->
<!-- Deleted Scene {{ scene.deleted }}--> <!-- Deleted Scene {{ scene.deleted }}-->
<!-- </span>--> <!-- </span>-->
<QuoteList :quotes="scene.quotes"></QuoteList> <QuoteList :quotes="scene.quotes"></QuoteList>
</b-card-text> </b-card-text>
</b-card> </b-card>
@@ -23,8 +23,9 @@
</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>
@@ -50,6 +51,13 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
axios.get(path) axios.get(path)
.then((res) => { .then((res) => {
this.episode = res.data; this.episode = res.data;
// Scroll
if (this.$route.hash) {
this.$nextTick(() => {
const section = document.getElementById(this.$route.hash.substring(1));
this.$scrollTo(section, 750, { easing: 'ease-in' });
});
}
}) })
.catch((error) => { .catch((error) => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
@@ -63,8 +71,6 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
watch: { watch: {
$route() { $route() {
this.getEpisode(); this.getEpisode();
console.log(this.$route.params.hash);
this.$scrollTo(`${this.$route.hash}`, 500, { easing: 'ease-in-out' });
}, },
}, },
}; };