tidy up after refactor

components/GalleryFeatured.vue

@@ -1,7 +1,8 @@
 <template>
-  <ul class="featured-images">
+  <ul>
     <li v-for="(gallery, index) in galleries"
         class="featured-image"
+        :style="{ 'height': featuredHeight }"
         :key="index">
       <span>{{ gallery.title }}</span>
     </li>
@@ -14,6 +15,10 @@ export default {
     galleries: {
       type: Array,
       required: true
+    },
+    featuredHeight: {
+      type: String,
+      required: true
     }
   },
 
@@ -28,28 +33,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 @media (max-width: $bp__layout) {
   .featured-image {
-    height: 50vh;
+    height: 50vh !important; // must override inline style set with prop
     width: 100vw;
     flex: 0 0 100vw;
   }
 }
 
 @media (min-width: $bp__layout) {
-  $featured-width: 20rem;
-  $featured-height: 16rem;
-
-  .featured-images {
-    order: 2;
-    flex: 0 0 $featured-width;
-    overflow-y: auto;
-  }
-
   .featured-image {
     width: 100%;
-    height: $featured-height;;
   }
 }
 

components/GalleryPage.vue

@@ -7,9 +7,13 @@
         X
       </div>
     </div>
-    <div class="gallery-container">
+    <div class="gallery">
-      <GalleryFeatured :galleries="galleries" />
+      <GalleryFeatured class="gallery__featured"
-      <GalleryThumbs :galleries="galleries" />
+                       :featured-height="featuredImageHeight"
+                       :galleries="galleries" />
+      <GalleryThumbs class="gallery__thumbs"
+                     :featured-height="featuredImageHeight"
+                     :galleries="galleries" />
     </div>
   </div>
 </template>
@@ -33,6 +37,7 @@ export default {
 
   data () {
     return {
+      featuredImageHeight: '16rem',
       imageViewerIsVisible: false
     }
   },
@@ -59,20 +64,18 @@ export default {
   top: 0;
   left: 0;
   background: linear-gradient(
-  to bottom left,
+    to bottom left,
-  magenta,
+    magenta,
-  cyan
+    cyan
-  );
+  ); // TEMP
 }
 
 @media (max-width: $bp__layout) {
-  $gallery-thumb-slider-width: 10rem;
-
   .gallery-page {
     padding-top: $site-menu__header-height;
   }
 
-  .gallery-container {
+  .gallery {
     position: relative;
     height: 100%;
     width: 100%;
@@ -80,6 +83,12 @@ export default {
     overflow-y: auto;
   }
 
+    .gallery__thumbs {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
   .close-viewer {
     font-size: 10em;
     cursor: pointer;
@@ -108,7 +117,7 @@ export default {
     padding-left: $site-menu__header-width;
   }
 
-  .gallery-container {
+  .gallery {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -118,6 +127,20 @@ export default {
     overflow: hidden;
   }
 
+    .gallery__featured {
+      order: 2;
+      flex: 0 0 20rem;
+      overflow-y: auto;
+    }
+
+    .gallery__thumbs {
+      order: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      overflow: hidden;
+    }
+
   .close-viewer {
     display: none;
   }

components/GalleryThumbs.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="gallery-thumbs">
+  <div>
     <div class="gallery-thumbs__spacer"></div>
     <ul class="gallery-thumbs__list">
       <li v-for="(gallery, index) in galleries"
           :key="index">
         <ul class="gallery-thumbs__row">
           <NavArrow class="gallery-thumbs__slider mobile-only" />
-          <li class="featured-image mobile-only"></li>
+          <li class="featured-image mobile-only"
+              :style="{ 'height': featuredHeight }">
+          </li>
           <li v-for="image in gallery.images"
               class="thumb-container"
               :key="image.url">
@@ -30,6 +32,10 @@ export default {
     galleries: {
       type: Array,
       required: true
+    },
+    featuredHeight: {
+      type: String,
+      required: true
     }
   },
 
@@ -53,14 +59,6 @@ export default {
 }
 
 @media (max-width: $bp__layout) {
-  $gallery-thumb-slider-width: 10rem;
-
-  .gallery-thumbs {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
   .gallery-thumbs__spacer {
     display:none;
   }
@@ -71,15 +69,15 @@ export default {
 
   .gallery-thumbs__slider {
     position: absolute;
-    width: $gallery-thumb-slider-width;
+    width: 10rem;
-    height: $gallery-thumb-slider-width;
+    height: 10rem;
     bottom: 1rem;
     left: 100vw;
     transform: translateX( calc(-2rem - 100%));
   }
 
   .featured-image {
-    height: 50vh;
+    height: 50vh !important; // must override inline style set with prop
     width: 100vw;
     flex: 0 0 100vw;
   }
@@ -91,7 +89,6 @@ export default {
 
 @media (min-width: $bp__layout) {
   $thumbs-height: 8rem;
-  $featured-height: 16rem;
 
   .mobile-only {
     display: none;
@@ -99,31 +96,21 @@ export default {
 
   .featured-image {
     width: 100%;
-    height: $featured-height;
   }
 
   .thumb-container {
     height: $thumbs-height;
   }
 
-  .gallery-thumbs {
+  .gallery-thumbs__list {
-    order: 1;
+    height: $thumbs-height;
-    display: flex;
+
-    flex-direction: column;
-    justify-content: space-between;
     overflow: hidden;
   }
 
-    .gallery-thumbs__list {
+  .gallery-thumbs__row {
-      height: $thumbs-height;
+    flex: 0 0 $thumbs-height;
-
+  }
-      overflow: hidden;
-      // overflow: auto; // TEMP
-    }
-
-    .gallery-thumbs__row {
-      flex: 0 0 $thumbs-height;
-    }
 }
 
 </style>