image viewer functionality implemented

components/GalleryImageViewer.vue

@@ -2,15 +2,28 @@
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }"
        :style="imageViewerStyle">
-    <div class="close-viewer"
+    <div class="close-viewer mobile-only"
          @click="$emit('close')">
       X
     </div>
+    <ThumbNav v-if="hasPrev"
+              class="thumb-nav thumb-nav--left mobile-only"
+              direction="left"
+              @navClick="$emit('clickPrev')"/>
+    <ThumbNav v-if="hasNext"
+              class="thumb-nav thumb-nav--right mobile-only"
+              direction="right"
+              @navClick="$emit('clickNext')"/>
   </div>
 </template>
 
 <script>
+import ThumbNav from '@/components/ThumbNav'
+
 export default {
+  components: {
+    ThumbNav
+  },
   props: {
     isVisible: {
       type: Boolean,
@@ -22,6 +35,14 @@ export default {
       default () {
         return ''
       }
+    },
+    hasNext: {
+      type: Boolean,
+      required: true
+    },
+    hasPrev: {
+      type: Boolean,
+      required: true
     }
   },
 
@@ -45,13 +66,10 @@ export default {
 
 <style lang="scss" scoped>
 .image-viewer {
-  background: linear-gradient(
+  background-size: contain;
-    to bottom left,
+  background-repeat: no-repeat;
-    magenta,
-    cyan
-  ); // TEMP
-  background-size: cover;
   background-position: center center;
+  background-color: #333;
 }
 
 @media (max-width: $bp__layout) {
@@ -75,8 +93,12 @@ export default {
 }
 
 @media (min-width: $bp__layout) {
-  .close-viewer {
+  .mobile-only {
     display: none;
   }
+
+  .image-viewer {
+    background-size: cover;
+  }
 }
 </style>

components/GalleryPage.vue

@@ -3,6 +3,10 @@
     <GalleryImageViewer class="image-viewer"
                         :is-visible="imageViewerIsVisible"
                         :image-url="viewingImageUrl"
+                        :has-next="activeImageIndex < galleries[activeGalleryIndex].images.length - 1"
+                        :has-prev="activeImageIndex > 0"
+                        @clickPrev="handleClickPrev"
+                        @clickNext="handleClickNext"
                         @close="imageViewerIsVisible = false" />
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
@@ -60,6 +64,13 @@ export default {
     handleThumbClick(gallery, image) {
       this.activeGalleryIndex = gallery
       this.activeImageIndex = image
+      this.imageViewerIsVisible = true
+    },
+    handleClickNext () {
+      this.activeImageIndex++;
+    },
+    handleClickPrev () {
+      this.activeImageIndex--;
     }
   }
 }