refactored image viewer out GalleryPage

components/GalleryImageViewer.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="image-viewer"
+       :class="{ 'is-visible': isVisible }">
+    <div class="close-viewer"
+         @click="$emit('close')">
+      X
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image-viewer {
+  background: linear-gradient(
+    to bottom left,
+    magenta,
+    cyan
+  ); // TEMP
+}
+
+@media (max-width: $bp__layout) {
+  .close-viewer {
+    font-size: 10em;
+    cursor: pointer;
+  }
+
+  .image-viewer {
+    z-index: 50;
+
+    transition: opacity 1s; //TEMP
+    opacity: 0;
+    pointer-events: none;
+
+    &.is-visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+</style>

components/GalleryPage.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="gallery-page">
-    <div class="image-viewer"
+    <GalleryImageViewer class="image-viewer"
-         :class="{ 'is-visible': imageViewerIsVisible }">
+                        :is-visible="imageViewerIsVisible"
-      <div class="close-viewer"
+                        @close="imageViewerIsVisible = false" />
-           @click="toggleImageViewer">
-        X
-      </div>
-    </div>
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
                        :featured-height="featuredImageHeight"
@@ -21,11 +17,13 @@
 <script>
 import GalleryFeatured from '@/components/GalleryFeatured'
 import GalleryThumbs from '@/components/GalleryThumbs'
+import GalleryImageViewer from '@/components/GalleryImageViewer'
 
 export default {
   components: {
     GalleryFeatured,
-    GalleryThumbs
+    GalleryThumbs,
+    GalleryImageViewer
   },
 
   props: {
@@ -43,9 +41,6 @@ export default {
   },
 
   methods: {
-    toggleImageViewer () {
-      this.imageViewerIsVisible = !this.imageViewerIsVisible;
-    }
   }
 }
 </script>
@@ -63,11 +58,6 @@ export default {
   height: 100%;
   top: 0;
   left: 0;
-  background: linear-gradient(
-    to bottom left,
-    magenta,
-    cyan
-  ); // TEMP
 }
 
 @media (max-width: $bp__layout) {
@@ -93,19 +83,6 @@ export default {
     font-size: 10em;
     cursor: pointer;
   }
-
-  .image-viewer {
-    z-index: 50;
-
-    transition: opacity 1s; //TEMP
-    opacity: 0;
-    pointer-events: none;
-
-    &.is-visible {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
 }
 
 @media (min-width: $bp__layout) {