From 42fdc06be8cc0cf633c309bba26ddccaa080cdb3 Mon Sep 17 00:00:00 2001 From: ManjaroOne666 Date: Wed, 30 Jan 2019 13:12:36 +0000 Subject: [PATCH] navigation icons implemented --- TODO.md | 8 ++--- assets/scss/style.scss | 24 ++++++++------- assets/svg/chevron-left.svg | 18 +++++++++++ assets/svg/chevron.svg | 6 ++++ assets/svg/loader.svg | 1 + components/GalleryImageViewer.vue | 2 +- components/GalleryThumbs.vue | 50 +++++++++++++++++++++---------- components/NavArrow.vue | 31 ------------------- components/ThumbNav.vue | 48 ++++++++++++++++++++++++++++- nuxt.config.js | 8 +++++ package.json | 3 +- yarn.lock | 19 +++++++++++- 12 files changed, 152 insertions(+), 66 deletions(-) create mode 100644 assets/svg/chevron-left.svg create mode 100644 assets/svg/chevron.svg create mode 100644 assets/svg/loader.svg delete mode 100644 components/NavArrow.vue diff --git a/TODO.md b/TODO.md index 5424b24..3c0ab8a 100644 --- a/TODO.md +++ b/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 diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 1c6b3b3..f1a3996 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -120,19 +120,21 @@ } .selected-indicator { - &::before { - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; + @media (min-width: $bp__layout) { + &::before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; - transition: opacity 1s; - opacity: 0; + transition: opacity 1s; + opacity: 0; - border: 1px solid $color__neutral-700;; + border: 1px solid $color__neutral-700;; + } } &.is-active::before { diff --git a/assets/svg/chevron-left.svg b/assets/svg/chevron-left.svg new file mode 100644 index 0000000..fd1124a --- /dev/null +++ b/assets/svg/chevron-left.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/assets/svg/chevron.svg b/assets/svg/chevron.svg new file mode 100644 index 0000000..bf371c1 --- /dev/null +++ b/assets/svg/chevron.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/loader.svg b/assets/svg/loader.svg new file mode 100644 index 0000000..8fb6950 --- /dev/null +++ b/assets/svg/loader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue index 30a5e86..6af8f8b 100644 --- a/components/GalleryImageViewer.vue +++ b/components/GalleryImageViewer.vue @@ -208,7 +208,7 @@ export default { display: flex; align-items: flex-end; - opacity: .4; + opacity: .2; &--left { left: 0; diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue index 4fc2a03..6eaf221 100644 --- a/components/GalleryThumbs.vue +++ b/components/GalleryThumbs.vue @@ -12,7 +12,7 @@ :style="{ 'transform': 'translate3d(' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
  • -
    • @@ -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; - } - - &--large { - width: 12rem; - height: 12rem; + padding: 0 3rem 0 1rem; } } + + .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); } } diff --git a/components/NavArrow.vue b/components/NavArrow.vue deleted file mode 100644 index ec7aa2b..0000000 --- a/components/NavArrow.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - diff --git a/components/ThumbNav.vue b/components/ThumbNav.vue index 9315d1e..57aaf98 100644 --- a/components/ThumbNav.vue +++ b/components/ThumbNav.vue @@ -1,9 +1,24 @@ diff --git a/nuxt.config.js b/nuxt.config.js index f504904..76272f6 100644 --- a/nuxt.config.js +++ b/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({ diff --git a/package.json b/package.json index 72110af..61dd0af 100644 --- a/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 2af0976..699b001 100644 --- a/yarn.lock +++ b/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"