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

client/src/components/Episode.vue

@@ -8,14 +8,14 @@
             <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"
+            <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">
-          <!--                    <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>
+                    <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>
@@ -23,9 +23,15 @@
 </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 });
             });
           }
         })

client/src/components/QuoteList.vue

@@ -1,29 +1,37 @@
 <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";
-
-    .quote-list > tr {
+@import "../assets/scss/_variables";
+.quote-list > tr {
     white-space: nowrap;
-        &:hover { background-color: $grey-4; }
-    }
 
-    .quote-text {
+    &:hover, &.highlight {
+        background-color: $grey-4;
+    }
+}
+
+.quote-text {
     white-space: normal;
-    }
+}
 
-    .quote-speaker {
+.quote-speaker {
     color: darken($grey-10, 1.75%);
     min-width: 100px;
     padding-right: 1em;
@@ -31,11 +39,38 @@
     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>

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>