From ba9f806550d54cce6e43dc6701ecb16cae6344c5 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Tue, 11 Aug 2020 05:51:02 -0500
Subject: [PATCH] SeasonList, Card Color, CharacterList adjustments, class
 arrangements

---
 client/src/assets/scss/_variables.scss  |  8 ++-
 client/src/components/CharacterList.vue |  5 +-
 client/src/components/Home.vue          |  4 +-
 client/src/components/SeasonList.vue    | 78 +++++++++----------------
 4 files changed, 37 insertions(+), 58 deletions(-)

diff --git a/client/src/assets/scss/_variables.scss b/client/src/assets/scss/_variables.scss
index d42065c..9bda837 100644
--- a/client/src/assets/scss/_variables.scss
+++ b/client/src/assets/scss/_variables.scss
@@ -1,3 +1,5 @@
+$grey-11: #dddddd;
+$grey-10: #cfcfcf;
 $grey-9: #b3b3b3;
 $grey-8: #a0a0a0;
 $grey-7: #565656;
@@ -5,7 +7,7 @@ $grey-6: #3e3e3e;
 $grey-5: #292929;
 $grey-4: #242424;
 $grey-3: #1d1d1d;
-$grey-2: #181818;
-$grey-1: #151515;
-$grey-0: #000000;
+$grey-2: #131313;
+$grey-1: #0e0e0e;
+$grey-0: #070707;
 $highlight: #d2ca00;
diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index 192dcb3..76266ea 100644
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -20,8 +20,9 @@
     }
 
     .character-button {
-        background-color: $grey-6;
-        border-color: $grey-4;
+        color: $grey-10;
+        background-color: $grey-4;
+        border-color: $grey-3;
     }
 
     .character-button {
diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
index ed0ae34..948d470 100644
--- a/client/src/components/Home.vue
+++ b/client/src/components/Home.vue
@@ -14,8 +14,8 @@
 
     .card {
         color: $grey-9;
-        background-color: $grey-1;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.88);
+        background-color: $grey-2;
+        border-bottom: 1px solid $grey-1;
         border-radius: 0;
     }
 </style>
diff --git a/client/src/components/SeasonList.vue b/client/src/components/SeasonList.vue
index 1b30e1c..bb7e960 100644
--- a/client/src/components/SeasonList.vue
+++ b/client/src/components/SeasonList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="accordion" role="tablist">
-        <b-card class="season-card" v-for="season in seasons" :key="season.season_id">
+        <b-card class="season-item" v-for="season in seasons" :key="season.season_id">
             <b-card-header header-tag="header" role="tab">
                 <a class="no-link align-items-center justify-content-between d-flex"
                    v-b-toggle="'accordion-' + season.season_id">
@@ -14,7 +14,8 @@
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <template v-for="episode in season.episodes">
-                            <b-list-group-item :id="`s-${season.season_id}-ep-${episode.episode_id}`"
+                            <b-list-group-item class="episode-item"
+                                               :id="`s-${season.season_id}-ep-${episode.episode_id}`"
                                                :key="`rl-${episode.episode_id}`">
                                 <router-link class="no-link"
                                              :to="`/${season.season_id}/${episode.episode_id}`">
@@ -23,7 +24,7 @@
                             </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}`"
-                                        triggers="hover" placement="right">
+                                       triggers="hover" placement="right">
                                 <template v-slot:title>{{ episode.title }}</template>
                                 {{ episode.description }}
                             </b-popover>
@@ -38,20 +39,18 @@
 <style lang="scss">
     @import "../assets/scss/_variables";
 
-    .season-card > .card-body > .card-header {
+    // 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;
     }
 
-    .collapsed > .bi-chevron-down {
-        text-align: right;
-    }
-
     .not-collapsed > .bi-chevron-down {
         transform: rotate(180deg);
         -ms-transform: rotate(180deg);
@@ -59,70 +58,47 @@
         -webkit-transform: rotate(180deg);
     }
 
-    .b-popover  {
+    // White popovers use white background on top left/right corners, this disables it.
+    .b-popover {
         background: transparent;
     }
+
+    // Dark theme popover
     .popover-header {
         background-color: $grey-3;
         border-color: $grey-2;
-        color: white;
+        color: $grey-11;
     }
 
+    // Dark theme popover, arrow-right fix
     .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
-        /*left: 1px;*/
-        /*border-width: 0.5rem 0.5rem 0.5rem 0;*/
         border-right-color: $grey-2;
     }
 
+    // Dark theme popover body
     .popover-body {
-        color: white;
+        color: $grey-10;
         background-color: $grey-2;
     }
 
     .season-title { color: $grey-8; cursor: pointer; }
 
-    .accordion.list-group-item {
-        border-radius: 0;
-        border-width: 0 0 0 0;
-        border-bottom-width: 1px;
-        padding-left: 30px;
-        font-weight: 500;
-
-        &:first-child { border-top-width: 1px; }
-
-        &:last-child { border-bottom-width: 0; }
-    }
-
-    .accordion {
-        .list-group-item {
-            padding: 10px 20px;
-
-            a { display: block; }
-
-            .badge { float: right; min-width: 36px; }
+    // Season Card Background Color
+    .season-item {
+        .card-body {
+            padding: 0;
+        }
+        .card-header {
+            background-color: $grey-2;
+            color: $grey-9;
+            border-bottom: 1px solid $grey-0;
+            font-family: 'Montserrat', sans-serif;
         }
-
-        .card-body { padding: 0; }
     }
 
-    .card-header {
+    .episode-item {
+        border-color: $grey-2;
         background-color: $grey-2;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.88);
-        font-family: 'Montserrat', sans-serif;
-    }
-
-    .card {
-        background-color: inherit;
-        /*border: 3px solid #0a0a0a;*/
-        /*border-radius: 0;*/
-        padding-bottom: 0;
-        /*&:not(:first-child) { border-top-width: 0; }*/
-        /*&:not(:last-child) { border-bottom-width: 0; }*/
-    }
-
-    .list-group-item {
-        border-color: rgba(24, 24, 24, 0.82);
-        background-color: $grey-3;
         color: $grey-8;
         border-left-width: 0;
         border-right-width: 0;