change all router link to= props into object based references, fix unfinished sceneIndex var refactor, separate quoteList href/hover highlights

client/src/components/CharacterList.vue

@@ -3,7 +3,7 @@
         <b-button squared class="mx-2 my-1 character-button" size="sm"
                   v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
                   :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
-                  :to="`/character/${character.id}`"
+                  :to="{ name: 'Character', params: { character: character.id } }"
         >
             {{ character.name }}
             <b-badge class="ml-1">{{ character.appearances}}</b-badge>

client/src/components/Episode.vue

@@ -8,7 +8,7 @@
             <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"
+            <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
                     class="mb-1" body-class="p-0">
                 <b-card-text class="my-2">
                     <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
@@ -61,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, 500, { easing: 'ease-in', offset: 0 });
+              this.$scrollTo(section, 500, { easing: 'ease-in' });
             });
           }
         })

client/src/components/QuoteList.vue

@@ -22,9 +22,12 @@
 .quote-list > tr {
     white-space: nowrap;
 
-    &:hover, &.highlight {
+    &:hover {
         background-color: $grey-4;
     }
+    &.highlight {
+        background-color: $grey-5 !important;
+    }
 }
 
 .quote-text {
@@ -64,7 +67,7 @@ export default {
     },
     quotes: {
       required: true,
-      type: Object,
+      type: Array,
     },
   },
   methods: {

client/src/components/SearchResult.vue

@@ -31,7 +31,8 @@
                 </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 - 1}-${item.quote_rel - 1}`">
+                         :to="{ name: 'Episode', params: { season: item.season, episode: item.episode_rel },
+                         hash: `#${item.section_rel - 1}-${item.quote_rel - 1}` }">
                 Season {{ item.season }} Episode {{ item.episode_rel }} Scene {{ item.section_rel }}
             </router-link>
         </b-card-text>

client/src/components/SeasonList.vue

@@ -16,7 +16,8 @@
                             <b-list-group-item class="no-link episode-item"
                                                :id="`s-${season.season_id}-ep-${episode.episode_id}`"
                                                :key="`rl-${episode.episode_id}`"
-                                               :to="`/${season.season_id}/${episode.episode_id}`">
+                                               :to="{ name: 'Episode', params: { season: season.season_id,
+                                               episode: episode.episode_id} }">
                                 Episode {{ episode.episode_id }} - "{{ episode.title }}"
                             </b-list-group-item>
                             <b-popover show :key="`bpop-${episode.episode_id}`" variant="secondary" delay="25"
@@ -71,12 +72,15 @@
 .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
     border-top-color: darken($grey-3, 2%);
 }
+
 .bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
     border-bottom-color: darken($grey-3, 2%);
 }
+
 .bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
     border-left-color: darken($grey-3, 2%);
 }
+
 .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
     border-right-color: darken($grey-3, 2%);
 }
@@ -91,13 +95,17 @@
     background-color: darken($grey-3, 2%);
 }
 
-    .season-title { color: $grey-8; cursor: pointer; }
+.season-title {
+    color: $grey-8;
+    cursor: pointer;
+}
 
 // Season Card Background Color
 .season-item {
     .card-body {
         padding: 0;
     }
+
     .card-header {
         background-color: darken($grey-2, 1.5%);
         color: $grey-9;
@@ -113,7 +121,9 @@
     border-left-width: 0;
     border-right-width: 0;
 
-        &:hover, &:active, &:focus { background-color: darken($grey-1, 0.75%); }
+    &:hover, &:active, &:focus {
+        background-color: darken($grey-1, 0.75%);
+    }
 }
 
 .no-link {