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

flex layout

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

55
components/GalleryPage.vue
View File

@ -1,13 +1,16 @@
<template>
<div class="gallery-page">
<div class="gallery-container">
<ul class="featured-images">
<li v-for="(gallery, index) in galleries"
class="featured-image image-container"
:key="index">
<span>{{ gallery.title }}</span>
</li>
</ul>
<div class="featured-images">
<div class="featured-images__spacer"></div>
<ul class="featured-images__list">
<li v-for="(gallery, index) in galleries"
class="featured-image image-container"
:key="index">
<span>{{ gallery.title }}</span>
</li>
</ul>
</div>
<ul class="gallery-thumbs">
<li v-for="(gallery, index) in galleries"
:key="index">
@ -79,6 +82,10 @@ export default {
width: 100vw;
}
.featured-images__spacer {
display: none;
}
.gallery-thumbs {
position: absolute;
top: 0;
@ -110,7 +117,9 @@ export default {
}
.gallery-container {
// display: flex;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
height: 100%;
width: 100%;
@ -118,20 +127,32 @@ export default {
}
.featured-images {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow-y: auto;
}
.featured-images__list {
}
.featured-images__spacer {
pointer-events: none;
}
.featured-image {
width: 10rem;
height: 10rem;
}
.image-viewer {
position: absolute;
width: 33%;
max-width: 20rem;
height: 100%;
top: 0;
right: 0;
left: 0;
}
.gallery-thumbs {
position: absolute;
width: 100%;
height: $thumbs-height;
bottom: 0;
left: 0;
flex: 0 0 $thumbs-height;
overflow: hidden;
overflow: auto; // TEMP