skeleton layout, including .image-viewer
This commit is contained in:
ManjaroOne666
parent
83f8a83605
commit
c196292536
|
|
@ -1,30 +1,36 @@
|
|||
<template>
|
||||
<div class="gallery-page">
|
||||
<div class="image-viewer"
|
||||
:class="{ 'is-visible': imageViewerIsVisible }">
|
||||
<div class="close-viewer"
|
||||
@click="toggleImageViewer">
|
||||
X
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-container">
|
||||
<div class="featured-images">
|
||||
<div class="featured-images__spacer"></div>
|
||||
<ul class="featured-images__list">
|
||||
<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"
|
||||
class="featured-image image-container"
|
||||
:key="index">
|
||||
<span>{{ gallery.title }}</span>
|
||||
<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>
|
||||
<ul class="gallery-thumbs">
|
||||
<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="image-container"
|
||||
:key="image.url">
|
||||
<span>{{ image.thumbUrl }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="image-viewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -40,10 +46,14 @@ export default {
|
|||
|
||||
data () {
|
||||
return {
|
||||
imageViewerIsVisible: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleImageViewer () {
|
||||
this.imageViewerIsVisible = !this.imageViewerIsVisible;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -63,7 +73,18 @@ export default {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.image-viewer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(
|
||||
to bottom left,
|
||||
magenta,
|
||||
cyan
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: $bp__layout) {
|
||||
.gallery-page {
|
||||
|
|
@ -78,20 +99,25 @@ export default {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.close-viewer {
|
||||
font-size: 10em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.featured-images {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.featured-images__spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-thumbs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gallery-thumbs__spacer {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
}
|
||||
|
||||
|
|
@ -101,16 +127,29 @@ export default {
|
|||
flex: 0 0 100vw;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
.thumb-container {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
z-index: 50;
|
||||
|
||||
transition: opacity 1s; //TEMP
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
$thumbs-height: 8rem;
|
||||
$featured-width: 20rem;
|
||||
$featured-height: 16rem;
|
||||
|
||||
.gallery-page {
|
||||
padding-left: $site-menu__header-width;
|
||||
|
|
@ -118,7 +157,7 @@ export default {
|
|||
|
||||
.gallery-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -126,46 +165,47 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close-viewer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.featured-images {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
order: 2;
|
||||
flex: 0 0 $featured-width;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.featured-images__list {
|
||||
}
|
||||
|
||||
.featured-images__spacer {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
width: 100%;
|
||||
height: $featured-height;;
|
||||
|
||||
.image-viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gallery-thumbs {
|
||||
flex: 0 0 $thumbs-height;
|
||||
|
||||
overflow: hidden;
|
||||
overflow: auto; // TEMP
|
||||
}
|
||||
|
||||
.gallery-thumbs__row {
|
||||
height: $thumbs-height;
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
&--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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue