navigation icons implemented

TODO.md

@@ -1,6 +1,3 @@
-## Galleries
-* scroll to correct thumbnail when query parameter changes on galleries page
-
 ## Menu
 * Proper background images for hover effect
 
@@ -10,14 +7,17 @@
 ## General
 * loading transitions
   - also transitioning elements in when page loads (especially gallery thumbs in gallery)
-* nav buttons
 * social nav items -> put in store or whatever
 * facebook/twitter social card thingies
 * page titles
 
+## Image viewer
+* close icon
+
 ## Maybes
 * gallery page - featured images in same style as on services page with the
                  diagonal divide
 
 ## Fixes
 * refreshing page on gallery and then quickly usingh history buttons breaks it
+* broken layout at exactly 40em (640px) breakpoint

assets/scss/style.scss

@@ -120,19 +120,21 @@
 }
 
 .selected-indicator {
-  &::before {
+  @media (min-width: $bp__layout) {
-    content: '';
+    &::before {
-    display: block;
+      content: '';
-    position: absolute;
+      display: block;
-    width: 100%;
+      position: absolute;
-    height: 100%;
+      width: 100%;
-    top: 0;
+      height: 100%;
-    left: 0;
+      top: 0;
+      left: 0;
 
-    transition: opacity 1s;
+      transition: opacity 1s;
-    opacity: 0;
+      opacity: 0;
 
-    border: 1px solid $color__neutral-700;;
+      border: 1px solid $color__neutral-700;;
+    }
   }
 
   &.is-active::before {

assets/svg/chevron-left.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1"
+     id="Capa_1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0px" y="0px"
+     viewBox="0 0 256 256"
+     xml:space="preserve"
+>
+  <g>
+    <polygon points="207.093,30.187 176.907,0 48.907,128 176.907,256 207.093,225.813 109.28,128"
+               fill-opacity="0.1"
+               fill="#ffffff"
+               stroke-width="6px"
+               stroke="#ffffff"
+    />
+  </g>
+</svg>

assets/svg/chevron.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" width="512px" height="512px">
+  <g>
+    <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#ff7c00"/>
+  </g>
+</svg>

assets/svg/loader.svg

@@ -0,0 +1 @@
+<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#ff7c00" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(173.999 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>

components/GalleryImageViewer.vue

@@ -208,7 +208,7 @@ export default {
     display: flex;
     align-items: flex-end;
 
-    opacity: .4;
+    opacity: .2;
 
     &--left {
       left: 0;

components/GalleryThumbs.vue

@@ -12,7 +12,7 @@
             :style="{ 'transform': 'translate3d(' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
           <li class="featured-image-spacer mobile-only"
               :style="{ 'height': featuredHeight }">
-            <ThumbNav class="thumb-nav thumb-nav--large mobile-only"
+            <ThumbNav class="featured-nav mobile-only"
                       direction="right"
                       @navClick="handleNavClick(galleryIndex, 'right')" />
           </li>
@@ -278,10 +278,6 @@ export default {
 }
 
 @media (max-width: $bp__layout) {
-  .mobile-hide {
-    display: none;
-  }
-  
   .gallery-thumbs__spacer {
     display:none;
   }
@@ -307,24 +303,48 @@ export default {
     background-position: center center;
   }
 
+  .featured-nav {
+    z-index: 20;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    top: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding-left: 80%;
+    padding-right: 16px;
+    padding-bottom: 16px;
+
+    opacity: .3;
+  }
+
   .thumb-nav {
     z-index: 20;
     position: absolute;
     width: 8rem;
     height: 8rem;
     bottom: 1rem;
-    right: 1rem;
+    right: 8px;
+    padding: 0 1rem 0 3rem;
+
+    display: flex;
+    align-items: flex-end;
+
+    opacity: .4;
 
     &--left {
-      left: 1rem;
+      left: 8px;
       right: auto;
-    }
+      padding: 0 3rem 0 1rem;
-
-    &--large {
-      width: 12rem;
-      height: 12rem;
     }
   }
+
+  .mobile-hide {
+    display: none;
+  }
+  
 }
 
 @media (min-width: $bp__layout) {
@@ -404,14 +424,12 @@ export default {
     }
 
     &--left {
-      left: 1rem,;
+      left: -.5rem;
     }
 
     &--right {
-      right: 1rem,;
+      right: -.5rem;
     }
-
-    background-color: rgba(red, .3);
   }
 }
 

components/NavArrow.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="nav-arrow"
-       @click="$emit('clicked')">
-    ->
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-  },
-
-  data () {
-    return {
-    }
-  },
-
-  methods: {
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .nav-arrow {
-    cursor: pointer;
-
-    font-size: 3em;
-    text-align: center;
-    background-color: rgba(blue, .3);
-  }
-</style>

components/ThumbNav.vue

@@ -1,9 +1,24 @@
 <template>
-  <div @click.stop="$emit('navClick')">ThumbNav--{{ direction }}</div>
+  <div class="wrapper"
+       @click.stop="$emit('navClick')"
+  >
+    <div class="svg-container"
+         :class="{ 'is-reversed': direction === 'right' }"
+    >
+      <SVGIcon class="svg-icon"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
+import SVGIcon from '@/assets/svg/chevron-left.svg'
+
 export default {
+  components: {
+    SVGIcon,
+  },
+
   props: {
     direction: {
       type: String,
@@ -24,4 +39,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.wrapper {
+  cursor: pointer;
+}
+
+.svg-container {
+  transition: opacity .3s, transform .5s;
+  opacity: .4;
+  transform: none;
+
+  @at-root .wrapper:hover & {
+    opacity: .6;
+    transform: translate3d(-3px, 0, 0);
+  }
+
+  @at-root .wrapper:hover &.is-reversed {
+    transform: translate3d(3px, 0, 0);
+  }
+}
+
+.svg-icon {
+  width: 100%;
+  min-width: 4rem;
+  height: 100%;
+  min-height: 4rem;
+  overflow: visible;
+}
+
+  .is-reversed .svg-icon {
+    transform: scaleX(-1);
+  }
 </style>

nuxt.config.js

@@ -78,6 +78,14 @@ module.exports = {
     ** You can extend webpack config here
     */
     extend(config, ctx) {
+      // vue-svg-loader
+      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
+      svgRule.test = /\.(png|jpe?g|gif|webp)$/
+      config.module.rules.push({
+        test: /\.svg$/,
+        loader: 'vue-svg-loader',
+      })
+
       // Run ESLint on save
       if (ctx.isDev && ctx.isClient) {
         config.module.rules.push({

package.json

@@ -27,6 +27,7 @@
     "eslint-plugin-vue": "^4.0.0",
     "node-sass": "^4.11.0",
     "nodemon": "^1.11.0",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "vue-svg-loader": "^0.11.0"
   }
 }

yarn.lock

@@ -7464,7 +7464,16 @@ supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-co
   dependencies:
     has-flag "^3.0.0"
 
-svgo@^1.0.0:
+svg-to-vue@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/svg-to-vue/-/svg-to-vue-0.3.0.tgz#03f69bac4824bf5e32069ceca15779cd74100b24"
+  integrity sha512-eb53eev1yBVIlhJzs9NoLtZUkLLlWPd9oieCq8i949ZWSajfONNgUk6giWJd+oEf+WBIMW7Oql5vKbF0DhIdEw==
+  dependencies:
+    svgo "^1.1.1"
+    vue-template-compiler "^2.5.17"
+    vue-template-es2015-compiler "^1.6.0"
+
+svgo@^1.0.0, svgo@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985"
   integrity sha512-GBkJbnTuFpM4jFbiERHDWhZc/S/kpHToqmZag3aEBjPYK44JAN2QBjvrGIxLOoCyMZjuFQIfTO2eJd8uwLY/9g==
@@ -8059,6 +8068,14 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-loader@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.11.0.tgz#1c1b6cbd6ef852ae1b26a2de7f63faa95a6b80c1"
+  integrity sha512-ZW8eHPgOPJLS7pkTfdnO7SO5FrqYchVPK1y5WENANDrSCDUfAamoBzAKAPNqBicrINFsFelMQfHU0BNxjC64Ew==
+  dependencies:
+    loader-utils "^1.1.0"
+    svg-to-vue "^0.3.0"
+
 vue-template-compiler@^2.5.17:
   version "2.5.21"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz#a57ceb903177e8f643560a8d639a0f8db647054a"