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

update: gallery fully responsive

This commit is contained in:
ManjaroOne666 2019-01-17 12:05:25 +00:00
parent 2340a6ac79
commit a40fa389d3
3 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/scss/_globals.scss
View File

@ -19,3 +19,6 @@ $site-menu__header-height: 3rem;
$gallery-featured-width: 20rem; $gallery-featured-width: 20rem;
$gallery-featured-width--compact: 12rem; $gallery-featured-width--compact: 12rem;
$gallery-thumbs-height: 8rem;
$gallery-thumbs-height--compact: 6rem;

8
components/GalleryFeatured.vue
View File

@ -23,9 +23,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.featured-image { .featured-image {
height: 0;
width: 100%; width: 100%;
padding-top: 100%;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
overflow: hidden; overflow: hidden;
@ -62,6 +60,12 @@ export default {
transition: opacity .3s; // TEMP transition: opacity .3s; // TEMP
padding: 8px; padding: 8px;
} }
.featured-image {
height: 0;
padding-top: 100%;
}
} }
</style> </style>

43
components/GalleryThumbs.vue
View File

@ -283,8 +283,6 @@ export default {
} }
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
$thumbs-height: 8rem;
.mobile-only { .mobile-only {
display: none; display: none;
} }
@ -298,9 +296,9 @@ export default {
} }
.thumb-container { .thumb-container {
height: $thumbs-height; height: $gallery-thumbs-height--compact;
width: $thumbs-height * 1.6; width: $gallery-thumbs-height--compact * 1.6;
flex: 0 0 $thumbs-height * 1.6; flex: 0 0 $gallery-thumbs-height--compact * 1.6;
} }
.gallery__thumbs { .gallery__thumbs {
@ -309,18 +307,13 @@ export default {
.gallery-thumbs__list { .gallery-thumbs__list {
position: relative; position: relative;
height: $thumbs-height; height: $gallery-thumbs-height--compact;
flex: 0 0 $thumbs-height; flex: 0 0 $gallery-thumbs-height--compact;
bottom: 8px; bottom: 8px;
overflow: hidden; overflow: hidden;
transition: opacity .3s; // TEMP transition: opacity .3s; // TEMP
/* opacity: .3; */
/* &:hover { */
/* opacity: 1; */
/* } */
} }
.gallery-thumbs__row-container { .gallery-thumbs__row-container {
@ -351,8 +344,8 @@ export default {
.thumb-nav { .thumb-nav {
position: absolute; position: absolute;
top: 1rem; top: 1rem;
width: $thumbs-height - 2rem; width: $gallery-thumbs-height--compact - 2rem;
height: $thumbs-height - 2rem; height: $gallery-thumbs-height--compact - 2rem;
transition: opacity .5s; transition: opacity .5s;
opacity: 0; opacity: 0;
@ -375,4 +368,26 @@ export default {
} }
} }
@media (min-width: $bp__gallery-compact) {
.gallery-thumbs__list {
height: $gallery-thumbs-height;
flex: 0 0 $gallery-thumbs-height;
}
.thumb-container {
height: $gallery-thumbs-height;
width: $gallery-thumbs-height * 1.6;
flex: 0 0 $gallery-thumbs-height * 1.6;
}
.gallery-thumbs__list {
height: $gallery-thumbs-height;
flex: 0 0 $gallery-thumbs-height;
}
.thumb-nav {
width: $gallery-thumbs-height - 2rem;
height: $gallery-thumbs-height - 2rem;
}
}
</style> </style>