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