thumbnail rows (large devices) shown when active

TODO.md

@@ -1,2 +1,3 @@
 ## Services Page
 * Have background change as scrolling down the services?
+* menu items (large devices) = nice big images with text coming out

components/GalleryFeatured.vue

@@ -3,7 +3,8 @@
     <li v-for="(gallery, index) in galleries"
         class="featured-image"
         :style="{ 'height': featuredHeight }"
-        :key="index">
+        :key="index"
+        @click="$emit('clicked', index)">
       <span>{{ gallery.title }}</span>
     </li>
   </ul>

components/GalleryPage.vue

@@ -6,10 +6,12 @@
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
                        :featured-height="featuredImageHeight"
-                       :galleries="galleries" />
+                       :galleries="galleries"
+                       @clicked="handleFeaturedClick" />
       <GalleryThumbs class="gallery__thumbs"
                      :featured-height="featuredImageHeight"
-                     :galleries="galleries" />
+                     :galleries="galleries"
+                     :active-row="activeRow" />
     </div>
   </div>
 </template>
@@ -36,11 +38,15 @@ export default {
   data () {
     return {
       featuredImageHeight: '16rem',
-      imageViewerIsVisible: false
+      imageViewerIsVisible: false,
+      activeRow: 0
     }
   },
 
   methods: {
+    handleFeaturedClick (index) {
+      this.activeRow = index
+    }
   }
 }
 </script>

components/GalleryThumbs.vue

@@ -3,7 +3,9 @@
     <div class="gallery-thumbs__spacer"></div>
     <ul class="gallery-thumbs__list">
       <li v-for="(gallery, galleryIndex) in galleries"
-          :key="galleryIndex">
+          :key="galleryIndex"
+          :class="{ 'is-active': activeRow === galleryIndex }"
+          class="gallery-thumbs__row-container">
         <ul :ref="'thumbs-row-' + galleryIndex"
             class="gallery-thumbs__row"
             :style="{ 'transform': 'translate3d(-' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
@@ -11,7 +13,7 @@
               :style="{ 'height': featuredHeight }">
             <ThumbNav class="thumb-nav thumb-nav--large"
                       direction="right"
-                      @clicked="handleNavClick(galleryIndex, 'right')" />
+                      @navClick="handleNavClick(galleryIndex, 'right')" />
           </li>
           <li v-for="(image, imageIndex) in gallery.images"
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
@@ -19,12 +21,13 @@
               :key="galleryIndex + '.' + imageIndex + '.' + image.url">
             <ThumbNav class="thumb-nav thumb-nav--left"
                       direction="left"
-                      @clicked="handleNavClick(galleryIndex, 'left')" />
+                      @navClick="handleNavClick(galleryIndex, 'left')" />
             <ThumbNav v-if="imageIndex < gallery.images.length - 1"
                       class="thumb-nav"
                       direction="right"
-                      @clicked="handleNavClick(galleryIndex, 'right')" />
+                      @navClick="handleNavClick(galleryIndex, 'right')" />
             <span>{{ image.thumbUrl }}</span>
+            <span>{{ galleryIndex }}: {{ imageIndex }}</span>
           </li>
         </ul>
       </li>
@@ -48,13 +51,23 @@ export default {
     featuredHeight: {
       type: String,
       required: true
+    },
+    activeRow: {
+      type: Number,
+      required: true
     }
   },
 
   data () {
     return {
       thumbRowOffsets: new Array(this.galleries.length),
-      // thumbContainerWidth: 0
+    }
+  },
+
+  computed: {
+    thumbsVerticalOffset () {
+      let rowHeight = this.$refs.thumbContainer ? this.$refs.thumbContainer[0].clientHeight : 0;
+      return  rowHeight * this.activeRow
     }
   },
 
@@ -80,7 +93,6 @@ export default {
         offset += thumbContainerWidth
       }
       offset = offset < 0 ? 0 : offset
-      console.log('offset: ', offset)
       this.$set(this.thumbRowOffsets, source, offset)
     }
   }
@@ -153,14 +165,36 @@ export default {
     height: $thumbs-height;
   }
 
+  .gallery__thumbs {
+    width: 100%;
+  }
+
   .gallery-thumbs__list {
     height: $thumbs-height;
+    flex: 0 0 $thumbs-height;
 
     overflow: hidden;
   }
 
+  .gallery-thumbs__row-container {
+    position: relative;
+
+    transition: opacity .5s;
+    opacity: 0;
+
+    &.is-active {
+      transition: opacity .5s .3s;
+      opacity: 1;
+    }
+  }
+
   .gallery-thumbs__row {
-    flex: 0 0 $thumbs-height;
+    /* flex: 0 0 $thumbs-height; */
+    position: absolute;
+    height: 100%;
+    width: 10rem;
+    top: 0;
+    left: 0;
   }
 
   .thumb-nav {

components/ThumbNav.vue

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