refactor GalleryPage into separate components

components/GalleryFeatured.vue

@@ -0,0 +1,56 @@
+<template>
+  <ul class="featured-images">
+    <li v-for="(gallery, index) in galleries"
+        class="featured-image"
+        :key="index">
+      <span>{{ gallery.title }}</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    galleries: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+@media (max-width: $bp__layout) {
+  .featured-image {
+    height: 50vh;
+    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;;
+  }
+}
+
+</style>

components/GalleryPage.vue

@@ -8,35 +8,22 @@
       </div>
     </div>
     <div class="gallery-container">
-      <ul class="featured-images">
+      <GalleryFeatured :galleries="galleries" />
-        <li v-for="(gallery, index) in galleries"
+      <GalleryThumbs :galleries="galleries" />
-            class="featured-image"
-            :key="index">
-          <span>{{ gallery.title }}</span>
-        </li>
-      </ul>
-      <div class="gallery-thumbs">
-        <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">
-              <li class="featured-image featured-image--mobile-only"></li>
-              <li v-for="image in gallery.images"
-                  class="thumb-container"
-                  :key="image.url">
-                <span>{{ image.thumbUrl }}</span>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
+import GalleryFeatured from '@/components/GalleryFeatured'
+import GalleryThumbs from '@/components/GalleryThumbs'
+
 export default {
+  components: {
+    GalleryFeatured,
+    GalleryThumbs
+  },
+
   props: {
     galleries: {
       type: Array,
@@ -65,14 +52,6 @@ export default {
   width: 100%;
 }
 
-.gallery-thumbs__row {
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
 .image-viewer {
   position: absolute;
   width: 100%;
@@ -87,6 +66,8 @@ export default {
 }
 
 @media (max-width: $bp__layout) {
+  $gallery-thumb-slider-width: 10rem;
+
   .gallery-page {
     padding-top: $site-menu__header-height;
   }
@@ -104,33 +85,6 @@ export default {
     cursor: pointer;
   }
 
-  .featured-images {
-    width: 100vw;
-  }
-
-  .gallery-thumbs {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .gallery-thumbs__spacer {
-    display:none;
-  }
-
-  .gallery-thumbs__row {
-  }
-
-  .featured-image {
-    height: 50vh;
-    width: 100vw;
-    flex: 0 0 100vw;
-  }
-
-  .thumb-container {
-    height: 50vh;
-  }
-
   .image-viewer {
     z-index: 50;
 
@@ -143,13 +97,12 @@ export default {
       pointer-events: auto;
     }
   }
-
 }
 
 @media (min-width: $bp__layout) {
-  $thumbs-height: 8rem;
+  .mobile-only {
-  $featured-width: 20rem;
+    display: none;
-  $featured-height: 16rem;
+  }
 
   .gallery-page {
     padding-left: $site-menu__header-width;
@@ -169,43 +122,6 @@ export default {
     display: none;
   }
 
-  .featured-images {
-    order: 2;
-    flex: 0 0 $featured-width;
-    overflow-y: auto;
-  }
-
-  .featured-image {
-    width: 100%;
-    height: $featured-height;;
-
-    &--mobile-only {
-      display: none;
-    }
-  }
-
-  .thumb-container {
-    height: $thumbs-height;
-  }
-
-  .gallery-thumbs {
-    order: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-  }
-
-    .gallery-thumbs__list {
-      height: $thumbs-height;
-
-      overflow: hidden;
-      // overflow: auto; // TEMP
-    }
-
-    .gallery-thumbs__row {
-      flex: 0 0 $thumbs-height;
-    }
 }
 
 </style>

components/GalleryThumbs.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="gallery-thumbs">
+    <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 v-for="image in gallery.images"
+              class="thumb-container"
+              :key="image.url">
+            <span>{{ image.thumbUrl }}</span>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import NavArrow from '@/components/NavArrow'
+
+export default {
+  components: {
+    NavArrow
+  },
+  
+  props: {
+    galleries: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gallery-thumbs__row {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+@media (max-width: $bp__layout) {
+  $gallery-thumb-slider-width: 10rem;
+
+  .gallery-thumbs {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .gallery-thumbs__spacer {
+    display:none;
+  }
+
+  .gallery-thumbs__row {
+    position: relative;
+  }
+
+  .gallery-thumbs__slider {
+    position: absolute;
+    width: $gallery-thumb-slider-width;
+    height: $gallery-thumb-slider-width;
+    bottom: 1rem;
+    left: 100vw;
+    transform: translateX( calc(-2rem - 100%));
+  }
+
+  .featured-image {
+    height: 50vh;
+    width: 100vw;
+    flex: 0 0 100vw;
+  }
+
+  .thumb-container {
+    height: 50vh;
+  }
+}
+
+@media (min-width: $bp__layout) {
+  $thumbs-height: 8rem;
+  $featured-height: 16rem;
+
+  .mobile-only {
+    display: none;
+  }
+
+  .featured-image {
+    width: 100%;
+    height: $featured-height;
+  }
+
+  .thumb-container {
+    height: $thumbs-height;
+  }
+
+  .gallery-thumbs {
+    order: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+  }
+
+    .gallery-thumbs__list {
+      height: $thumbs-height;
+
+      overflow: hidden;
+      // overflow: auto; // TEMP
+    }
+
+    .gallery-thumbs__row {
+      flex: 0 0 $thumbs-height;
+    }
+}
+
+</style>

components/NavArrow.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="nav-arrow"
+       @click="$emit('clicked')">
+    ->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .nav-arrow {
+    font-size: 3em;
+    text-align: center;
+    background-color: rgba(blue, .3);
+  }
+</style>