From 62f4019666d4bbd77750ed5aafe963b1e14dcabd Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 5 Sep 2020 20:23:05 -0500
Subject: [PATCH] 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 |   2 +-
 client/src/components/Episode.vue       |   4 +-
 client/src/components/QuoteList.vue     |   7 +-
 client/src/components/SearchResult.vue  |   3 +-
 client/src/components/SeasonList.vue    | 172 +++++++++++++-----------
 5 files changed, 101 insertions(+), 87 deletions(-)

diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index a3e945f..b6ffae3 100644
--- a/client/src/components/CharacterList.vue
+++ b/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>
diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index a9fbc50..9f6c32f 100644
--- a/client/src/components/Episode.vue
+++ b/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' });
             });
           }
         })
diff --git a/client/src/components/QuoteList.vue b/client/src/components/QuoteList.vue
index 0ab70f7..f51ad54 100644
--- a/client/src/components/QuoteList.vue
+++ b/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: {
diff --git a/client/src/components/SearchResult.vue b/client/src/components/SearchResult.vue
index f4c9f6b..73d4d44 100644
--- a/client/src/components/SearchResult.vue
+++ b/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>
diff --git a/client/src/components/SeasonList.vue b/client/src/components/SeasonList.vue
index 92c4022..f6f39e9 100644
--- a/client/src/components/SeasonList.vue
+++ b/client/src/components/SeasonList.vue
@@ -16,8 +16,9 @@
                             <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}`">
-                                    Episode {{ episode.episode_id }} - "{{ episode.title }}"
+                                               :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"
                                        :target="`s-${season.season_id}-ep-${episode.episode_id}`"
@@ -34,97 +35,106 @@
 </template>
 
 <style lang="scss">
-    @import "../assets/scss/_variables";
+@import "../assets/scss/_variables";
 
-    // Make all season cards 'clickable'
-    .season-item > .card-body > .card-header {
-        cursor: pointer;
+// Make all season cards 'clickable'
+.season-item > .card-body > .card-header {
+    cursor: pointer;
+}
+
+// Make all chevron icons rotate 180 when clicked
+.bi-chevron-down {
+    -moz-transition: all 0.25s ease-in-out;
+    -webkit-transition: all 0.25s ease-in-out;
+    transition: all 0.25s ease-in-out;
+}
+
+.not-collapsed > .bi-chevron-down {
+    transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+}
+
+// White popovers use white background on top left/right corners, this disables it.
+.b-popover {
+    background: transparent;
+}
+
+// Dark theme popover
+.popover-header {
+    background-color: darken($grey-2, 2.1%);
+    border-color: $grey-1;
+    color: $grey-11;
+}
+
+// Dark theme popover, arrow-right fix
+.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%);
+}
+
+.season-item .list-group-item:first-child {
+    border-radius: 0;
+}
+
+// Dark theme popover body
+.popover-body {
+    color: $grey-10;
+    background-color: darken($grey-3, 2%);
+}
+
+.season-title {
+    color: $grey-8;
+    cursor: pointer;
+}
+
+// Season Card Background Color
+.season-item {
+    .card-body {
+        padding: 0;
     }
 
-    // Make all chevron icons rotate 180 when clicked
-    .bi-chevron-down {
-        -moz-transition: all 0.25s ease-in-out;
-        -webkit-transition: all 0.25s ease-in-out;
-        transition: all 0.25s ease-in-out;
+    .card-header {
+        background-color: darken($grey-2, 1.5%);
+        color: $grey-9;
+        border-bottom: 1px solid $grey-0;
+        font-family: 'Montserrat', sans-serif;
     }
+}
 
-    .not-collapsed > .bi-chevron-down {
-        transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        -moz-transform: rotate(180deg);
-        -webkit-transform: rotate(180deg);
-    }
+.episode-item {
+    border-color: $grey-2;
+    background-color: darken($grey-3, 2%);
+    color: $grey-8 !important;
+    border-left-width: 0;
+    border-right-width: 0;
 
-    // White popovers use white background on top left/right corners, this disables it.
-    .b-popover {
-        background: transparent;
+    &:hover, &:active, &:focus {
+        background-color: darken($grey-1, 0.75%);
     }
+}
 
-    // Dark theme popover
-    .popover-header {
-        background-color: darken($grey-2, 2.1%);
-        border-color: $grey-1;
-        color: $grey-11;
-    }
+.no-link {
+    color: inherit;
+    text-decoration: none;
 
-    // Dark theme popover, arrow-right fix
-    .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%);
-    }
-
-    .season-item .list-group-item:first-child {
-        border-radius: 0;
-    }
-
-    // Dark theme popover body
-    .popover-body {
-        color: $grey-10;
-        background-color: darken($grey-3, 2%);
-    }
-
-    .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;
-            border-bottom: 1px solid $grey-0;
-            font-family: 'Montserrat', sans-serif;
-        }
-    }
-
-    .episode-item {
-        border-color: $grey-2;
-        background-color: darken($grey-3, 2%);
-        color: $grey-8 !important;
-        border-left-width: 0;
-        border-right-width: 0;
-
-        &:hover, &:active, &:focus { background-color: darken($grey-1, 0.75%); }
-    }
-
-    .no-link {
+    &:hover {
         color: inherit;
         text-decoration: none;
-
-        &:hover {
-            color: inherit;
-            text-decoration: none;
-        }
     }
+}
 </style>
 
 <script>