rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

navigation icons implemented

This commit is contained in:
ManjaroOne666 2019-01-30 13:12:36 +00:00
parent b5e4690a23
commit 42fdc06be8
12 changed files with 152 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
TODO.md
View File

@ -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

2
assets/scss/style.scss
View File

@ -120,6 +120,7 @@
}
.selected-indicator {
@media (min-width: $bp__layout) {
&::before {
content: '';
display: block;
@ -134,6 +135,7 @@
border: 1px solid $color__neutral-700;;
}
}
&.is-active::before {
transition: opacity 2s .2s;

18
assets/svg/chevron-left.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

6
assets/svg/chevron.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 404 B

1
assets/svg/loader.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 687 B

2
components/GalleryImageViewer.vue
View File

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

48
components/GalleryThumbs.vue
View File

@ -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);
}
}

31
components/NavArrow.vue
View File

@ -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>

48
components/ThumbNav.vue
View File

@ -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>

8
nuxt.config.js
View File

@ -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({

3
package.json
View File

@ -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"
}
}

19
yarn.lock
View File

@ -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"