From 2340a6ac79ae282648233a3273955c17f24ba543 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Thu, 17 Jan 2019 11:42:41 +0000
Subject: [PATCH] update: responsive featured images

---
 assets/scss/_globals.scss         |  5 ++++-
 components/GalleryFeatured.vue    | 27 ++++-----------------------
 components/GalleryImageViewer.vue |  6 +++++-
 components/GalleryPage.vue        |  7 +++++--
 4 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
index 834bf36..d3b2b0a 100644
--- a/assets/scss/_globals.scss
+++ b/assets/scss/_globals.scss
@@ -7,7 +7,7 @@ $bp__m: 40em;
 $bp__layout: 40em;
 
 // gallery ui becomes more compact
-$bp__gallery-compact: 60em;
+$bp__gallery-compact: 75em;
 
 $z-index__page: 50;
 $z-index__page-overlay: 75;
@@ -16,3 +16,6 @@ $z-index__menu: 100;
 $site-menu__width: 25rem;
 $site-menu__header-width: 3rem;
 $site-menu__header-height: 3rem;
+
+$gallery-featured-width: 20rem;
+$gallery-featured-width--compact: 12rem;
diff --git a/components/GalleryFeatured.vue b/components/GalleryFeatured.vue
index 0f9b7f9..3b75e2f 100644
--- a/components/GalleryFeatured.vue
+++ b/components/GalleryFeatured.vue
@@ -2,8 +2,7 @@
   <ul class="gallery-featured">
     <li v-for="(gallery, index) in galleries"
         class="featured-image"
-        :style="{ 'height': featuredHeight,
-                  'background-image': 'url(' + gallery.featuredImage + ')' }"
+        :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
         :key="index"
         @click="$emit('clicked', index)">
       <span class="gallery-title">{{ gallery.title }}</span>
@@ -18,28 +17,15 @@ export default {
       type: Array,
       required: true
     },
-    featuredHeight: {
-      type: String,
-      required: true
-    }
   },
-
-  data () {
-    return {
-    }
-  },
-
-  computed: {
-  },
-
-  methods: {
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .featured-image {
+  height: 0;
   width: 100%;
+  padding-top: 100%;
   background-size: cover;
   background-position: center center;
   overflow: hidden;
@@ -47,7 +33,7 @@ export default {
 
 @media (max-width: $bp__layout) {
   .featured-image {
-    height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop
+    height: calc(50vh - #{$site-menu__header-height / 2});
     width: 100vw;
     flex: 0 0 100vw;
   }
@@ -75,11 +61,6 @@ export default {
   .gallery-featured {
     transition: opacity .3s; // TEMP
     padding: 8px;
-    /* opacity: .3; */
-    /*  */
-    /* &:hover { */
-    /*   opacity: 1; */
-    /* } */
   }
 }
 
diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index 757834b..2eebc66 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -195,9 +195,13 @@ export default {
     position: absolute;
     top: 8px;
     left: calc(3rem + 8px);
-    right: 20rem;
+    right: $gallery-featured-width--compact;
     bottom: 8px;
     background-position: top center;
+
+    @media (min-width: $bp__gallery-compact) {
+      right: $gallery-featured-width;
+    }
   }
 
   .viewer-background {
diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 8066d83..67b513f 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -10,7 +10,6 @@
                         @close="imageViewerIsVisible = false" />
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
-                       :featured-height="featuredImageHeight"
                        :galleries="galleries"
                        @clicked="handleFeaturedClick" />
       <GalleryThumbs class="gallery__thumbs"
@@ -145,8 +144,12 @@ export default {
 
     .gallery__featured {
       order: 2;
-      flex: 0 0 20rem;
+      flex: 0 0 $gallery-featured-width--compact;
       overflow-y: auto;
+
+      @media (min-width: $bp__gallery-compact) {
+        flex-basis: $gallery-featured-width;
+      }
     }
 
     .gallery__thumbs {