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