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

layout absolute

This commit is contained in:
ManjaroOne666 2019-01-04 09:24:38 +00:00
parent 8af91aa6e7
commit 5d3b06e219
1 changed files with 46 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/GalleryPage.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="gallery-page">
<div class="container">
<div class="gallery-container">
<ul class="featured-images">
<li v-for="(gallery, index) in galleries"
class="gallery-thumb-blank image-container"
class="featured-image image-container"
:key="index">
<span>{{ gallery.title }}</span>
</li>
@ -12,7 +12,7 @@
<li v-for="(gallery, index) in galleries"
:key="index">
<ul class="gallery-thumbs__row">
<li class="gallery-thumb-blank"></li>
<li class="featured-image featured-image--mobile-only"></li>
<li v-for="image in gallery.images"
class="image-container"
:key="image.url">
@ -21,6 +21,7 @@
</ul>
</li>
</ul>
<div class="image-viewer"></div>
</div>
</div>
</template>
@ -66,9 +67,10 @@ export default {
padding-top: $site-menu__header-height;
}
.container {
.gallery-container {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
@ -86,7 +88,7 @@ export default {
.gallery-thumbs__row {
}
.gallery-thumb-blank {
.featured-image {
height: 50vh;
width: 100vw;
flex: 0 0 100vw;
@ -95,15 +97,54 @@ export default {
.image-container {
height: 50vh;
}
}
@media (min-width: $bp__layout) {
$thumbs-height: 8rem;
.gallery-page {
padding-left: $site-menu__header-width;
}
.gallery-container {
// display: flex;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.featured-images {
position: absolute;
width: 33%;
max-width: 20rem;
height: 100%;
top: 0;
right: 0;
}
.gallery-thumbs {
position: absolute;
width: 100%;
height: $thumbs-height;
bottom: 0;
left: 0;
overflow: hidden;
overflow: auto; // TEMP
}
.gallery-thumbs__row {
height: $thumbs-height;
}
.featured-image {
&--mobile-only {
display: none;
}
}
}
</style>