From 8af91aa6e76b7f65f89c4f33f173286680d0d22e Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Thu, 3 Jan 2019 21:11:23 +0000
Subject: [PATCH] update: mobile layout

---
 components/GalleryPage.vue | 109 +++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 components/GalleryPage.vue

diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
new file mode 100644
index 0000000..898b877
--- /dev/null
+++ b/components/GalleryPage.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="gallery-page">
+    <div class="container">
+      <ul class="featured-images">
+        <li v-for="(gallery, index) in galleries"
+            class="gallery-thumb-blank image-container"
+            :key="index">
+          <span>{{ gallery.title }}</span>
+        </li>
+      </ul>
+      <ul class="gallery-thumbs">
+        <li v-for="(gallery, index) in galleries"
+            :key="index">
+          <ul class="gallery-thumbs__row">
+            <li class="gallery-thumb-blank"></li>
+            <li v-for="image in gallery.images"
+                class="image-container"
+                :key="image.url">
+              <span>{{ image.thumbUrl }}</span>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    galleries: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gallery-page {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.gallery-thumbs__row {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+
+
+@media (max-width: $bp__layout) {
+  .gallery-page {
+    padding-top: $site-menu__header-height;
+  }
+
+  .container {
+    position: relative;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .featured-images {
+    width: 100vw;
+  }
+
+  .gallery-thumbs {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .gallery-thumbs__row {
+  }
+
+  .gallery-thumb-blank {
+    height: 50vh;
+    width: 100vw;
+    flex: 0 0 100vw;
+  }
+
+  .image-container {
+    height: 50vh;
+  }
+}
+
+
+
+@media (min-width: $bp__layout) {
+  .gallery-page {
+    padding-left: $site-menu__header-width;
+  }
+
+
+}
+</style>