refactor GalleryPage into separate components
This commit is contained in:
ManjaroOne666
parent
9e0487c6a3
commit
519a47d846
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<ul class="featured-images">
|
||||
<li v-for="(gallery, index) in galleries"
|
||||
class="featured-image"
|
||||
:key="index">
|
||||
<span>{{ gallery.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
galleries: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@media (max-width: $bp__layout) {
|
||||
.featured-image {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
flex: 0 0 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
$featured-width: 20rem;
|
||||
$featured-height: 16rem;
|
||||
|
||||
.featured-images {
|
||||
order: 2;
|
||||
flex: 0 0 $featured-width;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
width: 100%;
|
||||
height: $featured-height;;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -8,35 +8,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="gallery-container">
|
||||
<ul class="featured-images">
|
||||
<li v-for="(gallery, index) in galleries"
|
||||
class="featured-image"
|
||||
:key="index">
|
||||
<span>{{ gallery.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="gallery-thumbs">
|
||||
<div class="gallery-thumbs__spacer"></div>
|
||||
<ul class="gallery-thumbs__list">
|
||||
<li v-for="(gallery, index) in galleries"
|
||||
:key="index">
|
||||
<ul class="gallery-thumbs__row">
|
||||
<li class="featured-image featured-image--mobile-only"></li>
|
||||
<li v-for="image in gallery.images"
|
||||
class="thumb-container"
|
||||
:key="image.url">
|
||||
<span>{{ image.thumbUrl }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<GalleryFeatured :galleries="galleries" />
|
||||
<GalleryThumbs :galleries="galleries" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleryFeatured from '@/components/GalleryFeatured'
|
||||
import GalleryThumbs from '@/components/GalleryThumbs'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GalleryFeatured,
|
||||
GalleryThumbs
|
||||
},
|
||||
|
||||
props: {
|
||||
galleries: {
|
||||
type: Array,
|
||||
|
|
@ -65,14 +52,6 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -87,6 +66,8 @@ export default {
|
|||
}
|
||||
|
||||
@media (max-width: $bp__layout) {
|
||||
$gallery-thumb-slider-width: 10rem;
|
||||
|
||||
.gallery-page {
|
||||
padding-top: $site-menu__header-height;
|
||||
}
|
||||
|
|
@ -104,33 +85,6 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.featured-images {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.gallery-thumbs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gallery-thumbs__spacer {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
flex: 0 0 100vw;
|
||||
}
|
||||
|
||||
.thumb-container {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
z-index: 50;
|
||||
|
||||
|
|
@ -143,13 +97,12 @@ export default {
|
|||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
$thumbs-height: 8rem;
|
||||
$featured-width: 20rem;
|
||||
$featured-height: 16rem;
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-page {
|
||||
padding-left: $site-menu__header-width;
|
||||
|
|
@ -169,43 +122,6 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.featured-images {
|
||||
order: 2;
|
||||
flex: 0 0 $featured-width;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
width: 100%;
|
||||
height: $featured-height;;
|
||||
|
||||
&--mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-container {
|
||||
height: $thumbs-height;
|
||||
}
|
||||
|
||||
.gallery-thumbs {
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-thumbs__list {
|
||||
height: $thumbs-height;
|
||||
|
||||
overflow: hidden;
|
||||
// overflow: auto; // TEMP
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
flex: 0 0 $thumbs-height;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="gallery-thumbs">
|
||||
<div class="gallery-thumbs__spacer"></div>
|
||||
<ul class="gallery-thumbs__list">
|
||||
<li v-for="(gallery, index) in galleries"
|
||||
:key="index">
|
||||
<ul class="gallery-thumbs__row">
|
||||
<NavArrow class="gallery-thumbs__slider mobile-only" />
|
||||
<li class="featured-image mobile-only"></li>
|
||||
<li v-for="image in gallery.images"
|
||||
class="thumb-container"
|
||||
:key="image.url">
|
||||
<span>{{ image.thumbUrl }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavArrow from '@/components/NavArrow'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavArrow
|
||||
},
|
||||
|
||||
props: {
|
||||
galleries: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gallery-thumbs__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $bp__layout) {
|
||||
$gallery-thumb-slider-width: 10rem;
|
||||
|
||||
.gallery-thumbs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gallery-thumbs__spacer {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery-thumbs__slider {
|
||||
position: absolute;
|
||||
width: $gallery-thumb-slider-width;
|
||||
height: $gallery-thumb-slider-width;
|
||||
bottom: 1rem;
|
||||
left: 100vw;
|
||||
transform: translateX( calc(-2rem - 100%));
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
flex: 0 0 100vw;
|
||||
}
|
||||
|
||||
.thumb-container {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
$thumbs-height: 8rem;
|
||||
$featured-height: 16rem;
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
width: 100%;
|
||||
height: $featured-height;
|
||||
}
|
||||
|
||||
.thumb-container {
|
||||
height: $thumbs-height;
|
||||
}
|
||||
|
||||
.gallery-thumbs {
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-thumbs__list {
|
||||
height: $thumbs-height;
|
||||
|
||||
overflow: hidden;
|
||||
// overflow: auto; // TEMP
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
flex: 0 0 $thumbs-height;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div class="nav-arrow"
|
||||
@click="$emit('clicked')">
|
||||
->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-arrow {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
background-color: rgba(blue, .3);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue