From 0d5c80ce448fcaab344e31d928111c2cefb816c0 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 5 Sep 2020 16:49:32 -0500
Subject: [PATCH] quote link highlighting, quote clickable permalink icon,
 SearchResults link to exact quote, undo offset option

---
 client/src/components/Episode.vue      | 44 +++++++++-------
 client/src/components/QuoteList.vue    | 69 +++++++++++++++++++-------
 client/src/components/SearchResult.vue |  2 +-
 3 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index da1c99c..a9fbc50 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -1,31 +1,37 @@
 <template>
-  <div>
-    <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
+    <div>
+        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
         - ${episode != null ? episode.title : ''}`" class="mb-4">
             <span v-if="episode">
                 {{ episode.description }}
             </span>
-      <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
-    </b-card>
-    <div v-if="episode != null">
-      <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`" :id="scene_index"
-              class="mb-1" body-class="p-0">
-        <b-card-text class="my-2">
-          <!--                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"-->
-          <!--                          :footer="`Deleted Scene ${scene.deleted}`">-->
-          <!--                        Deleted Scene {{ scene.deleted }}-->
-          <!--                    </span>-->
-          <QuoteList :quotes="scene.quotes"></QuoteList>
-        </b-card-text>
-      </b-card>
+            <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
+        </b-card>
+        <div v-if="episode != null">
+            <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`" :id="scene_index"
+                    class="mb-1" body-class="p-0">
+                <b-card-text class="my-2">
+                    <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
+                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
+                          :footer="`Deleted Scene ${scene.deleted}`">
+                                  Deleted Scene {{ scene.deleted }}
+                              </span>
+                </b-card-text>
+            </b-card>
+        </div>
     </div>
-  </div>
 </template>
 
 <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>
 
 <script>
@@ -55,7 +61,7 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
           if (this.$route.hash) {
             this.$nextTick(() => {
               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 });
             });
           }
         })
diff --git a/client/src/components/QuoteList.vue b/client/src/components/QuoteList.vue
index d61cfd7..0ab70f7 100644
--- a/client/src/components/QuoteList.vue
+++ b/client/src/components/QuoteList.vue
@@ -1,41 +1,76 @@
 <template>
     <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">
                 <span class="my-3">
                     {{ quote.speaker }}
                 </span>
             </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>
     </table>
 </template>
 
 <style lang="scss">
-    @import "../assets/scss/_variables";
+@import "../assets/scss/_variables";
+.quote-list > tr {
+    white-space: nowrap;
 
-    .quote-list > tr {
-        white-space: nowrap;
-        &:hover { background-color: $grey-4; }
+    &:hover, &.highlight {
+        background-color: $grey-4;
     }
+}
 
-    .quote-text {
-        white-space: normal;
-    }
+.quote-text {
+    white-space: normal;
+}
 
-    .quote-speaker {
-        color: darken($grey-10, 1.75%);
-        min-width: 100px;
-        padding-right: 1em;
-        font-weight: 600;
-        vertical-align: text-top;
-        text-align: right;
-        font-family: 'Montserrat', sans-serif;
+.quote-speaker {
+    color: darken($grey-10, 1.75%);
+    min-width: 100px;
+    padding-right: 1em;
+    font-weight: 600;
+    vertical-align: text-top;
+    text-align: right;
+    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>
 
 <script>
 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>
diff --git a/client/src/components/SearchResult.vue b/client/src/components/SearchResult.vue
index 19c300f..f4c9f6b 100644
--- a/client/src/components/SearchResult.vue
+++ b/client/src/components/SearchResult.vue
@@ -31,7 +31,7 @@
                 </tr>
             </table>
             <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 }}
             </router-link>
         </b-card-text>