From ca381fbe671930fbf1fc1f19e759ac17400c3952 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Fri, 4 Jan 2019 16:18:45 +0000
Subject: [PATCH] update

---
 components/GalleryPage.vue   |  4 ++++
 components/GalleryThumbs.vue | 16 ++++++++++++++++
 components/ThumbNav.vue      | 27 +++++++++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 components/ThumbNav.vue

diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 30a067c..24a7143 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -79,6 +79,10 @@ export default {
       left: 0;
     }
 
+    .gallery__featured {
+      width: 100vw;
+    }
+
   .close-viewer {
     font-size: 10em;
     cursor: pointer;
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index ab93900..7cfe678 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -7,10 +7,13 @@
         <ul class="gallery-thumbs__row">
           <li class="featured-image mobile-only"
               :style="{ 'height': featuredHeight }">
+            <ThumbNav direction="right" />
           </li>
           <li v-for="image in gallery.images"
               class="thumb-container"
               :key="image.url">
+            <ThumbNav direction="left" />
+            <ThumbNav direction="right" />
             <span>{{ image.thumbUrl }}</span>
           </li>
         </ul>
@@ -20,8 +23,11 @@
 </template>
 
 <script>
+import ThumbNav from '@/components/ThumbNav'
+
 export default {
   components: {
+    ThumbNav
   },
   
   props: {
@@ -37,9 +43,14 @@ export default {
 
   data () {
     return {
+      activeThumbIndices: []
     }
   },
 
+  mounted () {
+    console.log('mounted')
+  },
+
   methods: {
     slideRight(index) {
       console.log('slideRight: ', index)
@@ -83,6 +94,7 @@ export default {
 
   .thumb-container {
     height: 50vh;
+    width: 100vw;
   }
 }
 
@@ -110,6 +122,10 @@ export default {
   .gallery-thumbs__row {
     flex: 0 0 $thumbs-height;
   }
+
+  .thumb-nav {
+    display: none;
+  }
 }
 
 </style>
diff --git a/components/ThumbNav.vue b/components/ThumbNav.vue
new file mode 100644
index 0000000..fd3a014
--- /dev/null
+++ b/components/ThumbNav.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>ThumbNav--{{ direction }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    direction: {
+      type: String,
+      default: function () {
+        return 'right'
+      }
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>