mobile thumb navigation implemented

components/GalleryFeatured.vue

@@ -35,7 +35,7 @@ export default {
 <style lang="scss" scoped>
 @media (max-width: $bp__layout) {
   .featured-image {
-    height: 50vh !important; // must override inline style set with prop
+    height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop
     width: 100vw;
     flex: 0 0 100vw;
   }

components/GalleryThumbs.vue

@@ -2,18 +2,28 @@
   <div>
     <div class="gallery-thumbs__spacer"></div>
     <ul class="gallery-thumbs__list">
-      <li v-for="(gallery, index) in galleries"
+      <li v-for="(gallery, galleryIndex) in galleries"
-          :key="index">
+          :key="galleryIndex">
-        <ul class="gallery-thumbs__row">
+        <ul :ref="'thumbs-row-' + galleryIndex"
-          <li class="featured-image mobile-only"
+            class="gallery-thumbs__row"
+            :style="{ 'transform': 'translate3d(-' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
+          <li class="featured-image-spacer mobile-only"
               :style="{ 'height': featuredHeight }">
-            <ThumbNav direction="right" />
+            <ThumbNav class="thumb-nav thumb-nav--large"
+                      direction="right"
+                      @clicked="handleNavClick(galleryIndex, 'right')" />
           </li>
-          <li v-for="image in gallery.images"
+          <li v-for="(image, imageIndex) in gallery.images"
+              :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
               class="thumb-container"
-              :key="image.url">
+              :key="galleryIndex + '.' + imageIndex + '.' + image.url">
-            <ThumbNav direction="left" />
+            <ThumbNav class="thumb-nav thumb-nav--left"
-            <ThumbNav direction="right" />
+                      direction="left"
+                      @clicked="handleNavClick(galleryIndex, 'left')" />
+            <ThumbNav v-if="imageIndex < gallery.images.length - 1"
+                      class="thumb-nav"
+                      direction="right"
+                      @clicked="handleNavClick(galleryIndex, 'right')" />
             <span>{{ image.thumbUrl }}</span>
           </li>
         </ul>
@@ -43,17 +53,35 @@ export default {
 
   data () {
     return {
-      activeThumbIndices: []
+      thumbRowOffsets: new Array(this.galleries.length),
+      // thumbContainerWidth: 0
     }
   },
 
   mounted () {
-    console.log('mounted')
+    this.$nextTick(function () {
+      this.resetOffsets()
+      window.addEventListener('resize', this.resetOffsets)
+    })
   },
 
   methods: {
-    slideRight(index) {
+    resetOffsets() {
-      console.log('slideRight: ', index)
+      for (let index = 0; index < this.thumbRowOffsets.length; index++) {
+        this.$set(this.thumbRowOffsets, index, 0)
+      }
+    },
+    handleNavClick(source, direction) {
+      let offset = this.thumbRowOffsets[source]
+      let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
+      if (direction === 'left') {
+        offset -= thumbContainerWidth
+      } else if (direction === 'right') {
+        offset += thumbContainerWidth
+      }
+      offset = offset < 0 ? 0 : offset
+      console.log('offset: ', offset)
+      this.$set(this.thumbRowOffsets, source, offset)
     }
   }
 }
@@ -75,27 +103,39 @@ export default {
 
   .gallery-thumbs__row {
     position: relative;
+    transition : transform .5s;
   }
 
-  .gallery-thumbs__slider {
+  .featured-image-spacer {
-    position: absolute;
+    position: relative;
-    width: 10rem;
+    height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop
-    height: 10rem;
-    bottom: 1rem;
-    left: 100vw;
-    transform: translateX( calc(-2rem - 100%));
-  }
-
-  .featured-image {
-    height: 50vh !important; // must override inline style set with prop
     width: 100vw;
     flex: 0 0 100vw;
   }
 
   .thumb-container {
-    height: 50vh;
+    position: relative;
+    height: calc(50vh - #{$site-menu__header-height / 2});
     width: 100vw;
   }
+
+  .thumb-nav {
+    position: absolute;
+    width: 8rem;
+    height: 8rem;
+    bottom: 1rem;
+    right: 1rem;
+
+    &--left {
+      left: 1rem;
+      right: auto;
+    }
+
+    &--large {
+      width: 12rem;
+      height: 12rem;
+    }
+  }
 }
 
 @media (min-width: $bp__layout) {
@@ -105,7 +145,7 @@ export default {
     display: none;
   }
 
-  .featured-image {
+  .featured-image-spacer {
     width: 100%;
   }
 

components/ThumbNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>ThumbNav--{{ direction }}</div>
+  <div @click="$emit('clicked')">ThumbNav--{{ direction }}</div>
 </template>
 
 <script>