thumbnails centered on large screens

components/GalleryFeatured.vue

@@ -42,6 +42,7 @@ export default {
   width: 100%;
   background-size: cover;
   background-position: center center;
+  overflow: hidden;
 }
 
 @media (max-width: $bp__layout) {
@@ -73,11 +74,12 @@ export default {
 @media (min-width: $bp__layout) {
   .gallery-featured {
     transition: opacity .3s; // TEMP
-    opacity: .3;
-
-    &:hover {
-      opacity: 1;
-    }
+    padding: 8px;
+    /* opacity: .3; */
+    /*  */
+    /* &:hover { */
+    /*   opacity: 1; */
+    /* } */
   }
 }
 

components/GalleryImageViewer.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="image-viewer"
-       :class="{ 'is-visible': isVisible }"
-       :style="imageViewerStyle">
+       :class="{ 'is-visible': isVisible }">
+    <div class="image-container"
+         :style="backgroundStyle">
+    </div>
     <div class="close-viewer mobile-only"
          @click="$emit('close')">
       X
@@ -52,7 +54,7 @@ export default {
   },
 
   computed: {
-    imageViewerStyle () {
+    backgroundStyle () {
       return {
         backgroundImage: 'url(' + this.imageUrl + ')'
       }
@@ -66,20 +68,27 @@ export default {
 
 <style lang="scss" scoped>
 .image-viewer {
+  background-color: blue;
+}
+
+.image-container {
   background-size: contain;
   background-repeat: no-repeat;
-  background-position: center center;
-  background-color: #333;
+  background-color: transparent;
 }
 
 @media (max-width: $bp__layout) {
   .close-viewer {
+    position: absolute;
+    top: 0;
+    right: 0;
     font-size: 10em;
     cursor: pointer;
   }
 
   .image-viewer {
     z-index: 50;
+    position: relative;
 
     transition: opacity 1s; //TEMP
     opacity: 0;
@@ -90,6 +99,30 @@ export default {
       pointer-events: auto;
     }
   }
+
+  .image-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-position: center center;
+  }
+
+  .thumb-nav {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    top: 0;
+
+    &--left {
+      left: 0;
+    }
+
+    &--right {
+      right: 0;
+    }
+  }
 }
 
 @media (min-width: $bp__layout) {
@@ -98,7 +131,16 @@ export default {
   }
 
   .image-viewer {
-    background-size: cover;
+    padding: 1rem 1rem 1rem 4rem;
+  }
+
+  .image-container {
+    position: absolute;
+    top: 8px;
+    left: calc(3rem + 8px);
+    right: 20rem;
+    bottom: 8px;
+    background-position: top center;
   }
 }
 </style>

components/GalleryPage.vue

@@ -154,6 +154,7 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+      padding-left: 8px;
       overflow: hidden;
     }
 

components/GalleryThumbs.vue

@@ -7,7 +7,7 @@
           :key="galleryIndex"
           :class="{ 'is-active': activeRow === galleryIndex }"
           class="gallery-thumbs__row-container">
-        <ul ref="galleryThumbsRowContainers"
+        <ul ref="galleryThumbsRows"
             class="gallery-thumbs__row"
             :style="{ 'transform': 'translate3d(' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
           <li class="featured-image-spacer mobile-only"
@@ -29,8 +29,6 @@
                       class="thumb-nav mobile-only"
                       direction="right"
                       @navClick="handleNavClick(galleryIndex, 'right')" />
-            <span>{{ image.thumbUrl }}</span>
-            <span>{{ galleryIndex }}: {{ imageIndex }}</span>
           </li>
         </ul>
       </li>
@@ -39,7 +37,7 @@
                 direction="left"
                 @navClick="handleNavClickDesktop(activeRow, 'left')"/>
       <ThumbNav class="thumb-nav thumb-nav--right mobile-hide"
-                :class="{ 'is-active': thumbRowOffsets[activeRow] != 0 }"
+                :class="{ 'is-active': thumbRowOffsets[activeRow] > 0 }"
                 direction="right"
                 @navClick="handleNavClickDesktop(activeRow, 'right')"/>
     </ul>
@@ -87,35 +85,45 @@ export default {
   watch: {
     activeRow: function(val) {
       this.$nextTick(() => {
-        this.initLeftNav()
+        this.updateElements(false)
       })
     }
   },
 
   mounted () {
     this.$nextTick(function () {
-      this.resetOffsets()
-      this.initLeftNav()
+      this.updateElements()
     })
     window.addEventListener('resize', this.handleResize)
   },
 
   methods: {
-    initLeftNav () {
-      if (this.$refs.galleryThumbsRowContainers[this.activeRow] && this.$refs.galleryThumbsList) {
-        let offset = this.thumbRowOffsets[this.activeRow]
-        let totalRowWidth = this.$refs.galleryThumbsRowContainers[this.activeRow].clientWidth
+    updateElements (resetOffsets=true) {
+      if (resetOffsets) {this.resetOffsets()}
+      if (this.$refs.galleryThumbsRows[this.activeRow] && this.$refs.galleryThumbsList) {
+        let totalRowWidth = this.$refs.galleryThumbsRows[this.activeRow].clientWidth
         let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
-        let maxOffset = totalRowWidth - visibleRowWidth
-        this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) 
-          && (offset < maxOffset)
+        this.initLeftNav(totalRowWidth, visibleRowWidth)
+        if (visibleRowWidth > totalRowWidth) {
+          this.centerThumbs(totalRowWidth, visibleRowWidth)
+        }
       }
     },
+    initLeftNav (totalRowWidth, visibleRowWidth) {
+      let offset = this.thumbRowOffsets[this.activeRow]
+      let maxOffset = totalRowWidth - visibleRowWidth
+      this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) 
+        && (offset < maxOffset)
+    },
     resetOffsets() {
       for (let index = 0; index < this.thumbRowOffsets.length; index++) {
         this.$set(this.thumbRowOffsets, index, 0)
       }
     },
+    centerThumbs(rowWidth, visibleWidth) {
+      let offset = (visibleWidth - rowWidth) / -2
+      this.$set(this.thumbRowOffsets, [this.activeRow], offset)
+    },
     handleNavClick(source, direction) {
       let offset = this.thumbRowOffsets[source]
       let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
@@ -131,7 +139,7 @@ export default {
       let offset = this.thumbRowOffsets[source]
       let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
       let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
-      let totalRowWidth = this.$refs.galleryThumbsRowContainers[source].clientWidth
+      let totalRowWidth = this.$refs.galleryThumbsRows[source].clientWidth
       let maxOffset = totalRowWidth - visibleRowWidth
       if (direction === 'left') {
         offset += thumbContainerWidth
@@ -154,8 +162,7 @@ export default {
       if (!this.resizeIsThrottling) {
         this.resizeIsThrottling = true
         this.$nextTick(() => {
-          this.resetOffsets()
-          this.initLeftNav()
+          this.updateElements()
           this.resizeIsThrottling = false
         })
       }
@@ -177,6 +184,7 @@ export default {
 .thumb-container {
   background-size: cover;
   background-position: center center;
+  overflow: hidden;
 }
 
 @media (max-width: $bp__layout) {
@@ -245,6 +253,8 @@ export default {
 
   .thumb-container {
     height: $thumbs-height;
+    width: $thumbs-height * 1.6;
+    flex: 0 0 $thumbs-height * 1.6;
   }
 
   .gallery__thumbs {
@@ -255,15 +265,16 @@ export default {
     position: relative;
     height: $thumbs-height;
     flex: 0 0 $thumbs-height;
+    bottom: 8px;
 
     overflow: hidden;
 
     transition: opacity .3s; // TEMP
-    opacity: .3;
+    /* opacity: .3; */
 
-    &:hover {
-      opacity: 1;
-    }
+    /* &:hover { */
+    /*   opacity: 1; */
+    /* } */
   }
 
   .gallery-thumbs__row-container {