router.beforeEach clarifying comment, reduce XL viewport SeasonList/AIS-Search columns, add Skeleton outer skeleton with padding + animation speed adjustments, begin reformatting files to preferred format

client/src/App.vue

@@ -35,7 +35,7 @@
         >
             <b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
                 <b-row class="my-3 pl-1" cols="12">
-                    <b-col lg="3" xl="3" md="12">
+                    <b-col lg="3" xl="2" md="12">
                         <ais-search-box
                             @keydown.native="showResults"
                             ref="searchbox"
@@ -44,7 +44,7 @@
                     </b-col>
                 </b-row>
                 <b-row align-h="start" cols="12">
-                    <b-col lg="3" xl="3" md="12">
+                    <b-col lg="3" xl="2" md="12">
                         <SeasonList></SeasonList>
                     </b-col>
                     <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">

client/src/components/CharacterList.vue

@@ -1,15 +1,8 @@
 <template>
     <div class="pt-2" v-if="characters" :fluid="true">
-        <b-button
+        <b-button squared class="mx-2 my-1 character-button" size="sm" v-for="character in characters"
-            squared
+            :key="character.name" :id="`character-${character.id}`"
-            class="mx-2 my-1 character-button"
+            :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
-            size="sm"
-            v-for="character in characters"
-            :key="character.name"
-            :id="`character-${character.id}`"
-            :title="`${character.appearances} Quote${
-        character.appearances > 1 ? 's' : ''
-      }`"
             :to="{ name: 'Character', params: { character: character.id } }"
         >
             {{ character.name }}

client/src/components/SeasonList.vue

@@ -1,15 +1,7 @@
 <template>
     <div class="accordion" role="tablist">
-        <b-card
+        <b-card class="season-item" v-for="season in seasons" :key="season.season_id">
-            class="season-item"
+            <b-card-header header-tag="header" role="tab" v-b-toggle="'accordion-' + season.season_id">
-            v-for="season in seasons"
-            :key="season.season_id"
-        >
-            <b-card-header
-                header-tag="header"
-                role="tab"
-                v-b-toggle="'accordion-' + season.season_id"
-            >
                 <a class="no-link align-items-center justify-content-between d-flex" v-if="isPreloaded">
                     <h5 class="mb-0 pu-0 mu-0 season-title">
                         Season {{ season.season_id }}
@@ -18,30 +10,18 @@
                 </a>
                 <Skeleton v-else></Skeleton>
             </b-card-header>
-            <b-collapse
+            <b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
-                :id="'accordion-' + season.season_id"
-                accordion="accordion-season-list"
-            >
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
                             <template v-if="isPreloaded">
-                                <b-list-group-item
+                                <b-list-group-item class="no-link episode-item" :key="`rl-${episode.episode_id}`"
-                                    class="no-link episode-item"
-                                    :id="`s-${season.season_id}-ep-${episode.episode_id}`"
-                                    :key="`rl-${episode.episode_id}`"
                                                    :to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
-                                >
+                                                   :id="`s-${season.season_id}-ep-${episode.episode_id}`">
                                     Episode {{ episode.episode_id }} - "{{ episode.title }}"
                                 </b-list-group-item>
-                                <b-popover
+                                <b-popover  show="true" :key="`bpop-${episode.episode_id}`" triggers="hover"
-                                    show="true"
+                                            placement="right" delay="25" :target="`s-${season.season_id}-ep-${episode.episode_id}`">
-                                    :key="`bpop-${episode.episode_id}`"
-                                    delay="25"
-                                    :target="`s-${season.season_id}-ep-${episode.episode_id}`"
-                                    triggers="hover"
-                                    placement="right"
-                                >
                                     <template v-slot:title>
                                         {{ episode.title }}
                                     </template>

client/src/components/Skeleton.vue

@@ -1,11 +1,13 @@
 <template>
+    <div class="outer-skeleton">
         <div class="skeleton"></div>
+    </div>
 </template>
 <style lang="scss" scoped>
 .skeleton {
     background-color: $grey-4;
     background-image: linear-gradient(90deg, $grey-4, $grey-6, $grey-4);
-    animation: 1.5s ease-in-out 0s infinite normal none running SkeletonLoading;
+    animation: 1.25s ease-in-out 0s infinite normal none running SkeletonLoading;
     width: 100%;
     display: block;
     line-height: 1;
@@ -14,9 +16,12 @@
     border-radius: 3px;
 }
 
+.outer-skeleton {
+    padding: 0.2em 0;
+}
 @-webkit-keyframes SkeletonLoading {
     0% {
-        background-position: -200px 0;
+        background-position: 0px 0;
     }
     100% {
         background-position: calc(200px + 100%) 0;

client/src/main.js

@@ -16,6 +16,7 @@ Vue.use(VueClipboard)
 
 Vue.config.productionTip = false;
 
+// Prevent invalid episodes, seasons and characters from being accessed
 router.beforeEach((to, from, next) => {
     // eslint-disable-next-line no-constant-condition
     if (from.name !== null && to.name === "Character" && false) next(false);