thumbnails centered on large screens
This commit is contained in:
parent
eacd23f7c7
commit
97996d0b71
|
@ -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; */
|
||||||
|
/* } */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue