thumbnails centered on large screens

This commit is contained in:
ManjaroOne666 2019-01-12 20:08:07 +00:00
parent eacd23f7c7
commit 97996d0b71
4 changed files with 88 additions and 32 deletions

View File

@ -42,6 +42,7 @@ export default {
width: 100%; width: 100%;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
overflow: hidden;
} }
@media (max-width: $bp__layout) { @media (max-width: $bp__layout) {
@ -73,11 +74,12 @@ export default {
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
.gallery-featured { .gallery-featured {
transition: opacity .3s; // TEMP transition: opacity .3s; // TEMP
opacity: .3; padding: 8px;
/* opacity: .3; */
&:hover { /* */
opacity: 1; /* &:hover { */
} /* opacity: 1; */
/* } */
} }
} }

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="image-viewer" <div class="image-viewer"
:class="{ 'is-visible': isVisible }" :class="{ 'is-visible': isVisible }">
:style="imageViewerStyle"> <div class="image-container"
:style="backgroundStyle">
</div>
<div class="close-viewer mobile-only" <div class="close-viewer mobile-only"
@click="$emit('close')"> @click="$emit('close')">
X X
@ -52,7 +54,7 @@ export default {
}, },
computed: { computed: {
imageViewerStyle () { backgroundStyle () {
return { return {
backgroundImage: 'url(' + this.imageUrl + ')' backgroundImage: 'url(' + this.imageUrl + ')'
} }
@ -66,20 +68,27 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.image-viewer { .image-viewer {
background-color: blue;
}
.image-container {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-color: transparent;
background-color: #333;
} }
@media (max-width: $bp__layout) { @media (max-width: $bp__layout) {
.close-viewer { .close-viewer {
position: absolute;
top: 0;
right: 0;
font-size: 10em; font-size: 10em;
cursor: pointer; cursor: pointer;
} }
.image-viewer { .image-viewer {
z-index: 50; z-index: 50;
position: relative;
transition: opacity 1s; //TEMP transition: opacity 1s; //TEMP
opacity: 0; opacity: 0;
@ -90,6 +99,30 @@ export default {
pointer-events: auto; pointer-events: auto;
} }
} }
.image-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center center;
}
.thumb-nav {
position: absolute;
width: 50%;
height: 100%;
top: 0;
&--left {
left: 0;
}
&--right {
right: 0;
}
}
} }
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
@ -98,7 +131,16 @@ export default {
} }
.image-viewer { .image-viewer {
background-size: cover; padding: 1rem 1rem 1rem 4rem;
}
.image-container {
position: absolute;
top: 8px;
left: calc(3rem + 8px);
right: 20rem;
bottom: 8px;
background-position: top center;
} }
} }
</style> </style>

View File

@ -154,6 +154,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding-left: 8px;
overflow: hidden; overflow: hidden;
} }

View File

@ -7,7 +7,7 @@
:key="galleryIndex" :key="galleryIndex"
:class="{ 'is-active': activeRow === galleryIndex }" :class="{ 'is-active': activeRow === galleryIndex }"
class="gallery-thumbs__row-container"> class="gallery-thumbs__row-container">
<ul ref="galleryThumbsRowContainers" <ul ref="galleryThumbsRows"
class="gallery-thumbs__row" class="gallery-thumbs__row"
:style="{ 'transform': 'translate3d(' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }"> :style="{ 'transform': 'translate3d(' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
<li class="featured-image-spacer mobile-only" <li class="featured-image-spacer mobile-only"
@ -29,8 +29,6 @@
class="thumb-nav mobile-only" class="thumb-nav mobile-only"
direction="right" direction="right"
@navClick="handleNavClick(galleryIndex, 'right')" /> @navClick="handleNavClick(galleryIndex, 'right')" />
<span>{{ image.thumbUrl }}</span>
<span>{{ galleryIndex }}: {{ imageIndex }}</span>
</li> </li>
</ul> </ul>
</li> </li>
@ -39,7 +37,7 @@
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"
:class="{ 'is-active': thumbRowOffsets[activeRow] != 0 }" :class="{ 'is-active': thumbRowOffsets[activeRow] > 0 }"
direction="right" direction="right"
@navClick="handleNavClickDesktop(activeRow, 'right')"/> @navClick="handleNavClickDesktop(activeRow, 'right')"/>
</ul> </ul>
@ -87,35 +85,45 @@ export default {
watch: { watch: {
activeRow: function(val) { activeRow: function(val) {
this.$nextTick(() => { this.$nextTick(() => {
this.initLeftNav() this.updateElements(false)
}) })
} }
}, },
mounted () { mounted () {
this.$nextTick(function () { this.$nextTick(function () {
this.resetOffsets() this.updateElements()
this.initLeftNav()
}) })
window.addEventListener('resize', this.handleResize) window.addEventListener('resize', this.handleResize)
}, },
methods: { methods: {
initLeftNav () { updateElements (resetOffsets=true) {
if (this.$refs.galleryThumbsRowContainers[this.activeRow] && this.$refs.galleryThumbsList) { if (resetOffsets) {this.resetOffsets()}
let offset = this.thumbRowOffsets[this.activeRow] if (this.$refs.galleryThumbsRows[this.activeRow] && this.$refs.galleryThumbsList) {
let totalRowWidth = this.$refs.galleryThumbsRowContainers[this.activeRow].clientWidth let totalRowWidth = this.$refs.galleryThumbsRows[this.activeRow].clientWidth
let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
let maxOffset = totalRowWidth - visibleRowWidth this.initLeftNav(totalRowWidth, visibleRowWidth)
this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) if (visibleRowWidth > totalRowWidth) {
&& (offset < maxOffset) this.centerThumbs(totalRowWidth, visibleRowWidth)
}
} }
}, },
initLeftNav (totalRowWidth, visibleRowWidth) {
let offset = this.thumbRowOffsets[this.activeRow]
let maxOffset = totalRowWidth - visibleRowWidth
this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth)
&& (offset < maxOffset)
},
resetOffsets() { resetOffsets() {
for (let index = 0; index < this.thumbRowOffsets.length; index++) { for (let index = 0; index < this.thumbRowOffsets.length; index++) {
this.$set(this.thumbRowOffsets, index, 0) this.$set(this.thumbRowOffsets, index, 0)
} }
}, },
centerThumbs(rowWidth, visibleWidth) {
let offset = (visibleWidth - rowWidth) / -2
this.$set(this.thumbRowOffsets, [this.activeRow], offset)
},
handleNavClick(source, direction) { handleNavClick(source, direction) {
let offset = this.thumbRowOffsets[source] let offset = this.thumbRowOffsets[source]
let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
@ -131,7 +139,7 @@ export default {
let offset = this.thumbRowOffsets[source] let offset = this.thumbRowOffsets[source]
let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
let totalRowWidth = this.$refs.galleryThumbsRowContainers[source].clientWidth let totalRowWidth = this.$refs.galleryThumbsRows[source].clientWidth
let maxOffset = totalRowWidth - visibleRowWidth let maxOffset = totalRowWidth - visibleRowWidth
if (direction === 'left') { if (direction === 'left') {
offset += thumbContainerWidth offset += thumbContainerWidth
@ -154,8 +162,7 @@ export default {
if (!this.resizeIsThrottling) { if (!this.resizeIsThrottling) {
this.resizeIsThrottling = true this.resizeIsThrottling = true
this.$nextTick(() => { this.$nextTick(() => {
this.resetOffsets() this.updateElements()
this.initLeftNav()
this.resizeIsThrottling = false this.resizeIsThrottling = false
}) })
} }
@ -177,6 +184,7 @@ export default {
.thumb-container { .thumb-container {
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
overflow: hidden;
} }
@media (max-width: $bp__layout) { @media (max-width: $bp__layout) {
@ -245,6 +253,8 @@ export default {
.thumb-container { .thumb-container {
height: $thumbs-height; height: $thumbs-height;
width: $thumbs-height * 1.6;
flex: 0 0 $thumbs-height * 1.6;
} }
.gallery__thumbs { .gallery__thumbs {
@ -255,15 +265,16 @@ export default {
position: relative; position: relative;
height: $thumbs-height; height: $thumbs-height;
flex: 0 0 $thumbs-height; flex: 0 0 $thumbs-height;
bottom: 8px;
overflow: hidden; overflow: hidden;
transition: opacity .3s; // TEMP transition: opacity .3s; // TEMP
opacity: .3; /* opacity: .3; */
&:hover { /* &:hover { */
opacity: 1; /* opacity: 1; */
} /* } */
} }
.gallery-thumbs__row-container { .gallery-thumbs__row-container {