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>
+        <li v-for="(gallery, index) in galleries"
-        <ul class="featured-images__list">
+            class="featured-image"
+            :key="index">
+          <span>{{ gallery.title }}</span>
+        </li>
+      </ul>
+      <div class="gallery-thumbs">
+        <div class="gallery-thumbs__spacer"></div>
+        <ul class="gallery-thumbs__list">
           <li v-for="(gallery, index) in galleries"
-              class="featured-image image-container"
               :key="index">
-            <span>{{ gallery.title }}</span>
+            <ul class="gallery-thumbs__row">
+              <li class="featured-image featured-image--mobile-only"></li>
+              <li v-for="image in gallery.images"
+                  class="thumb-container"
+                  :key="image.url">
+                <span>{{ image.thumbUrl }}</span>
+              </li>
+            </ul>
           </li>
         </ul>
       </div>
-      <ul class="gallery-thumbs">
-        <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"
-                :key="image.url">
-              <span>{{ image.thumbUrl }}</span>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <div class="image-viewer"></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,20 +99,25 @@ export default {
     overflow-y: auto;
   }
 
+  .close-viewer {
+    font-size: 10em;
+    cursor: pointer;
+  }
+
   .featured-images {
     width: 100vw;
   }
 
-    .featured-images__spacer {
-      display: none;
-    }
-
   .gallery-thumbs {
     position: absolute;
     top: 0;
     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>