From e804ffdecf1bc9bcab4acfdd42a09beef8377cf2 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Fri, 4 Jan 2019 09:56:46 +0000
Subject: [PATCH] flex layout

---
 components/GalleryPage.vue | 55 ++++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index cf4f816..8593b1c 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="gallery-page">
     <div class="gallery-container">
-      <ul class="featured-images">
-        <li v-for="(gallery, index) in galleries"
-            class="featured-image image-container"
-            :key="index">
-          <span>{{ gallery.title }}</span>
-        </li>
-      </ul>
+      <div 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"
+              :key="index">
+            <span>{{ gallery.title }}</span>
+          </li>
+        </ul>
+      </div>
       <ul class="gallery-thumbs">
         <li v-for="(gallery, index) in galleries"
             :key="index">
@@ -79,6 +82,10 @@ export default {
     width: 100vw;
   }
 
+    .featured-images__spacer {
+      display: none;
+    }
+
   .gallery-thumbs {
     position: absolute;
     top: 0;
@@ -110,7 +117,9 @@ export default {
   }
 
   .gallery-container {
-    // display: flex;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     position: relative;
     height: 100%;
     width: 100%;
@@ -118,20 +127,32 @@ export default {
   }
 
   .featured-images {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    overflow-y: auto;
+  }
+
+    .featured-images__list {
+    }
+
+    .featured-images__spacer {
+      pointer-events: none;
+    }
+
+  .featured-image {
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .image-viewer {
     position: absolute;
-    width: 33%;
-    max-width: 20rem;
-    height: 100%;
     top: 0;
-    right: 0;
+    left: 0;
   }
 
   .gallery-thumbs {
-    position: absolute;
-    width: 100%;
-    height: $thumbs-height;
-    bottom: 0;
-    left: 0;
+    flex: 0 0 $thumbs-height;
 
     overflow: hidden;
     overflow: auto; // TEMP