From 04320d15b579a759a6c40afe63bf4767338b0d05 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Tue, 15 Sep 2020 07:17:33 -0500
Subject: [PATCH] move breakpoint badge, add color styling from
 history-of-robotics, add computed breakpoint bool, change Character
 breadcrumb to CharacterList component, attempt at Season content column
 alignment

---
 client/src/App.vue                  | 39 +++++++++++++++++++++++------
 client/src/components/Character.vue |  2 +-
 client/src/components/Season.vue    |  2 +-
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index fdef635..41b5e9e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -3,6 +3,13 @@
         <b-navbar>
             <b-navbar-brand>
                 <router-link :to="{ name: 'Home' }" class="no-link">The Office Quotes</router-link>
+                <b-badge style="font-size: 0.80rem;" class="mx-2" v-if="showBreakpointMarker" variant="dark">
+                        <span id="marker-xs" class="d-sm-none">XS</span>
+                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
+                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
+                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
+                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
+                    </b-badge>
             </b-navbar-brand>
             <b-collapse id="nav-collapse" is-nav>
                 <b-navbar-nav>
@@ -16,13 +23,6 @@
                             About
                         </router-link>
                     </b-nav-item>
-                    <b-badge variant="dark">
-                        <span id="marker-xs" class="d-sm-none">XS</span>
-                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
-                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
-                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
-                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
-                    </b-badge>
                 </b-navbar-nav>
             </b-collapse>
         </b-navbar>
@@ -76,6 +76,26 @@
 .ais-SearchBox-input::placeholder {
     color: white;
 }
+
+#marker-xs {
+    color: #ff0000;
+}
+
+#marker-sm {
+    color: #f37506;
+}
+
+#marker-md {
+    color: #0090ff;
+}
+
+#marker-lg {
+    color: #05ff80;
+}
+
+#marker-xl {
+    color: #82f500;
+}
 </style>
 
 <script>
@@ -105,5 +125,10 @@ export default {
                 this.$router.push({name: "SearchResults"});
         },
     },
+    computed: {
+        showBreakpointMarker() {
+            return process.env.NODE_ENV === 'development';
+        }
+    }
 };
 </script>
diff --git a/client/src/components/Character.vue b/client/src/components/Character.vue
index 12dc3c4..dee2fd3 100644
--- a/client/src/components/Character.vue
+++ b/client/src/components/Character.vue
@@ -45,7 +45,7 @@ export default {
                 },
                 {
                     text: 'Characters',
-                    to: {name: 'Home'},
+                    to: {name: 'CharacterList'},
                 },
                 {
                     text:
diff --git a/client/src/components/Season.vue b/client/src/components/Season.vue
index e675104..d34a2d9 100644
--- a/client/src/components/Season.vue
+++ b/client/src/components/Season.vue
@@ -4,7 +4,7 @@
         <b-card>
             <b-list-group>
                 <b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id">
-                    <b-row align-v="start">
+                    <b-row align-v="start" align-content="start">
                         <b-col cols="5" md="4" lg="4" xl="3">
                             <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
                         </b-col>