skeleton layout, including .image-viewer

components/GalleryPage.vue

@@ -1,30 +1,36 @@
 <template>
   <div class="gallery-page">
+    <div class="image-viewer"
+         :class="{ 'is-visible': imageViewerIsVisible }">
+      <div class="close-viewer"
+           @click="toggleImageViewer">
+        X
+      </div>
+    </div>
     <div class="gallery-container">
-      <div class="featured-images">
+      <ul class="featured-images">
-        <div class="featured-images__spacer"></div>
-        <ul class="featured-images__list">
         <li v-for="(gallery, index) in galleries"
-              class="featured-image image-container"
+            class="featured-image"
             :key="index">
           <span>{{ gallery.title }}</span>
         </li>
       </ul>
-      </div>
+      <div class="gallery-thumbs">
-      <ul class="gallery-thumbs">
+        <div class="gallery-thumbs__spacer"></div>
+        <ul class="gallery-thumbs__list">
           <li v-for="(gallery, index) in galleries"
               :key="index">
             <ul class="gallery-thumbs__row">
               <li class="featured-image featured-image--mobile-only"></li>
               <li v-for="image in gallery.images"
-                class="image-container"
+                  class="thumb-container"
                   :key="image.url">
                 <span>{{ image.thumbUrl }}</span>
               </li>
             </ul>
           </li>
         </ul>
-      <div class="image-viewer"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -40,10 +46,14 @@ export default {
 
   data () {
     return {
+      imageViewerIsVisible: false
     }
   },
 
   methods: {
+    toggleImageViewer () {
+      this.imageViewerIsVisible = !this.imageViewerIsVisible;
+    }
   }
 }
 </script>
@@ -63,7 +73,18 @@ export default {
   margin: 0;
 }
 
-
+.image-viewer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+  to bottom left,
+  magenta,
+  cyan
+  );
+}
 
 @media (max-width: $bp__layout) {
   .gallery-page {
@@ -78,12 +99,13 @@ export default {
     overflow-y: auto;
   }
 
-  .featured-images {
+  .close-viewer {
-    width: 100vw;
+    font-size: 10em;
+    cursor: pointer;
   }
 
-    .featured-images__spacer {
+  .featured-images {
-      display: none;
+    width: 100vw;
   }
 
   .gallery-thumbs {
@@ -92,6 +114,10 @@ export default {
     left: 0;
   }
 
+  .gallery-thumbs__spacer {
+    display:none;
+  }
+
   .gallery-thumbs__row {
   }
 
@@ -101,16 +127,29 @@ export default {
     flex: 0 0 100vw;
   }
 
-  .image-container {
+  .thumb-container {
     height: 50vh;
   }
 
+  .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) {
   $thumbs-height: 8rem;
+  $featured-width: 20rem;
+  $featured-height: 16rem;
 
   .gallery-page {
     padding-left: $site-menu__header-width;
@@ -118,7 +157,7 @@ export default {
 
   .gallery-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: space-between;
     position: relative;
     height: 100%;
@@ -126,46 +165,47 @@ export default {
     overflow: hidden;
   }
 
+  .close-viewer {
+    display: none;
+  }
+
   .featured-images {
-    display: flex;
+    order: 2;
-    flex-direction: row;
+    flex: 0 0 $featured-width;
-    justify-content: space-between;
     overflow-y: auto;
   }
 
-    .featured-images__list {
-    }
-
-    .featured-images__spacer {
-      pointer-events: none;
-    }
-
   .featured-image {
-    width: 10rem;
+    width: 100%;
-    height: 10rem;
+    height: $featured-height;;
-  }
 
-  .image-viewer {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .gallery-thumbs {
-    flex: 0 0 $thumbs-height;
-
-    overflow: hidden;
-    overflow: auto; // TEMP
-  }
-
-  .gallery-thumbs__row {
-    height: $thumbs-height;
-  }
-
-  .featured-image {
     &--mobile-only {
       display: none;
     }
   }
+
+  .thumb-container {
+    height: $thumbs-height;
+  }
+
+  .gallery-thumbs {
+    order: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+  }
+
+    .gallery-thumbs__list {
+      height: $thumbs-height;
+
+      overflow: hidden;
+      // overflow: auto; // TEMP
+    }
+
+    .gallery-thumbs__row {
+      flex: 0 0 $thumbs-height;
+    }
 }
+
 </style>