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

ThumbNav more prominent

This commit is contained in:
ManjaroOne666 2019-02-13 12:47:21 +00:00
parent 737ab1668d
commit aa8eec20cb
5 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO.md
View File

@ -1,7 +1,7 @@
## TODO ## TODO
* Galleries - title not distinguishable on light images
* Galleries - navigation icons not obvious enough with light background thumbs
* Galleries - thumbs on desktop - way to make them stand out aginst the image * Galleries - thumbs on desktop - way to make them stand out aginst the image
* Home - text needs to stand out more on light background areas
- shadow-deco maybe?
* General - sort things by sort_order * General - sort things by sort_order
* mailer * mailer
* remove testing/dev mode or whatever its called from axios in nuxt.config.js * remove testing/dev mode or whatever its called from axios in nuxt.config.js
@ -14,7 +14,6 @@
## Fixes ## Fixes
* refreshing page on gallery and then quickly usingh history buttons breaks it * refreshing page on gallery and then quickly usingh history buttons breaks it
* broken layout at exactly 40em (640px) breakpoint * broken layout at exactly 40em (640px) breakpoint
* galleries page - 'Added non-passive event listener to a scroll-blocking ... event'
* galleries - click on thumb, click on different gallery, click on original gallery * galleries - click on thumb, click on different gallery, click on original gallery
and the thumb list doesn't scroll to correct position to show thumb 0, and the thumb list doesn't scroll to correct position to show thumb 0,
it is still showing the thumb that was clicked on first it is still showing the thumb that was clicked on first

7
assets/scss/style.scss
View File

@ -119,6 +119,13 @@
background-color: rgba($color__primary-100, .7); background-color: rgba($color__primary-100, .7);
} }
.shadow-deco {
$color: rgba($color__neutral-100, .3);
background-color: $color;
box-shadow: 0 0 64px 64px $color;
}
.selected-indicator { .selected-indicator {
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
&::before { &::before {

2
components/GalleryPage.vue
View File

@ -12,7 +12,7 @@
@clickNext="handleClickNext" @clickNext="handleClickNext"
@close="imageViewerIsVisible = false" /> @close="imageViewerIsVisible = false" />
<article class="gallery"> <article class="gallery">
<h1 class="page-heading page-title">My Galleries</h1> <h1 class="page-heading page-title"><span class="shadow-deco">My Galleries</span></h1>
<GalleryFeatured class="gallery__featured load-transition load-transition--1" <GalleryFeatured class="gallery__featured load-transition load-transition--1"
:galleries="galleries" :galleries="galleries"
:gallery-active="activeGalleryIndex" :gallery-active="activeGalleryIndex"

4
components/GalleryThumbs.vue
View File

@ -33,11 +33,11 @@
</li> </li>
</ul> </ul>
</li> </li>
<ThumbNav class="thumb-nav thumb-nav--left mobile-hide" <ThumbNav class="thumb-nav thumb-nav--left mobile-hide shadow-deco"
:class="{ 'is-active': isLeftDesktopNavActive }" :class="{ 'is-active': isLeftDesktopNavActive }"
direction="left" direction="left"
@navClick="handleNavClickDesktop(activeRow, 'left')"/> @navClick="handleNavClickDesktop(activeRow, 'left')"/>
<ThumbNav class="thumb-nav thumb-nav--right mobile-hide" <ThumbNav class="thumb-nav thumb-nav--right mobile-hide shadow-deco"
:class="{ 'is-active': isRightDesktopNavActive }" :class="{ 'is-active': isRightDesktopNavActive }"
direction="right" direction="right"
@navClick="handleNavClickDesktop(activeRow, 'right')"/> @navClick="handleNavClickDesktop(activeRow, 'right')"/>

2
components/ThumbNav.vue
View File

@ -46,7 +46,7 @@ export default {
.svg-container { .svg-container {
transition: opacity .3s, transform .5s; transition: opacity .3s, transform .5s;
opacity: .4; opacity: .6;
transform: none; transform: none;
@at-root .wrapper:hover & { @at-root .wrapper:hover & {