From 5d3b06e219330be9f9fe862957bf6bb27a043cf7 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Fri, 4 Jan 2019 09:24:38 +0000
Subject: [PATCH] layout absolute

---
 components/GalleryPage.vue | 51 ++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 898b877..cf4f816 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="gallery-page">
-    <div class="container">
+    <div class="gallery-container">
       <ul class="featured-images">
         <li v-for="(gallery, index) in galleries"
-            class="gallery-thumb-blank image-container"
+            class="featured-image image-container"
             :key="index">
           <span>{{ gallery.title }}</span>
         </li>
@@ -12,7 +12,7 @@
         <li v-for="(gallery, index) in galleries"
             :key="index">
           <ul class="gallery-thumbs__row">
-            <li class="gallery-thumb-blank"></li>
+            <li class="featured-image featured-image--mobile-only"></li>
             <li v-for="image in gallery.images"
                 class="image-container"
                 :key="image.url">
@@ -21,6 +21,7 @@
           </ul>
         </li>
       </ul>
+      <div class="image-viewer"></div>
     </div>
   </div>
 </template>
@@ -66,9 +67,10 @@ export default {
     padding-top: $site-menu__header-height;
   }
 
-  .container {
+  .gallery-container {
     position: relative;
     height: 100%;
+    width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -86,7 +88,7 @@ export default {
   .gallery-thumbs__row {
   }
 
-  .gallery-thumb-blank {
+  .featured-image {
     height: 50vh;
     width: 100vw;
     flex: 0 0 100vw;
@@ -95,15 +97,54 @@ export default {
   .image-container {
     height: 50vh;
   }
+
 }
 
 
 
 @media (min-width: $bp__layout) {
+  $thumbs-height: 8rem;
+
   .gallery-page {
     padding-left: $site-menu__header-width;
   }
 
+  .gallery-container {
+    // display: flex;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
 
+  .featured-images {
+    position: absolute;
+    width: 33%;
+    max-width: 20rem;
+    height: 100%;
+    top: 0;
+    right: 0;
+  }
+
+  .gallery-thumbs {
+    position: absolute;
+    width: 100%;
+    height: $thumbs-height;
+    bottom: 0;
+    left: 0;
+
+    overflow: hidden;
+    overflow: auto; // TEMP
+  }
+
+  .gallery-thumbs__row {
+    height: $thumbs-height;
+  }
+
+  .featured-image {
+    &--mobile-only {
+      display: none;
+    }
+  }
 }
 </style>