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

update: responsive featured images

This commit is contained in:
ManjaroOne666 2019-01-17 11:42:41 +00:00
parent 667aac02bc
commit 2340a6ac79
4 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/scss/_globals.scss
View File

@ -7,7 +7,7 @@ $bp__m: 40em;
$bp__layout: 40em; $bp__layout: 40em;
// gallery ui becomes more compact // gallery ui becomes more compact
$bp__gallery-compact: 60em; $bp__gallery-compact: 75em;
$z-index__page: 50; $z-index__page: 50;
$z-index__page-overlay: 75; $z-index__page-overlay: 75;
@ -16,3 +16,6 @@ $z-index__menu: 100;
$site-menu__width: 25rem; $site-menu__width: 25rem;
$site-menu__header-width: 3rem; $site-menu__header-width: 3rem;
$site-menu__header-height: 3rem; $site-menu__header-height: 3rem;
$gallery-featured-width: 20rem;
$gallery-featured-width--compact: 12rem;

27
components/GalleryFeatured.vue
View File

@ -2,8 +2,7 @@
<ul class="gallery-featured"> <ul class="gallery-featured">
<li v-for="(gallery, index) in galleries" <li v-for="(gallery, index) in galleries"
class="featured-image" class="featured-image"
:style="{ 'height': featuredHeight, :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
'background-image': 'url(' + gallery.featuredImage + ')' }"
:key="index" :key="index"
@click="$emit('clicked', index)"> @click="$emit('clicked', index)">
<span class="gallery-title">{{ gallery.title }}</span> <span class="gallery-title">{{ gallery.title }}</span>
@ -18,28 +17,15 @@ export default {
type: Array, type: Array,
required: true required: true
}, },
featuredHeight: {
type: String,
required: true
}
}, },
data () {
return {
}
},
computed: {
},
methods: {
}
} }
</script> </script>
<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;
@ -47,7 +33,7 @@ export default {
@media (max-width: $bp__layout) { @media (max-width: $bp__layout) {
.featured-image { .featured-image {
height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop height: calc(50vh - #{$site-menu__header-height / 2});
width: 100vw; width: 100vw;
flex: 0 0 100vw; flex: 0 0 100vw;
} }
@ -75,11 +61,6 @@ export default {
.gallery-featured { .gallery-featured {
transition: opacity .3s; // TEMP transition: opacity .3s; // TEMP
padding: 8px; padding: 8px;
/* opacity: .3; */
/* */
/* &:hover { */
/* opacity: 1; */
/* } */
} }
} }

6
components/GalleryImageViewer.vue
View File

@ -195,9 +195,13 @@ export default {
position: absolute; position: absolute;
top: 8px; top: 8px;
left: calc(3rem + 8px); left: calc(3rem + 8px);
right: 20rem; right: $gallery-featured-width--compact;
bottom: 8px; bottom: 8px;
background-position: top center; background-position: top center;
@media (min-width: $bp__gallery-compact) {
right: $gallery-featured-width;
}
} }
.viewer-background { .viewer-background {

7
components/GalleryPage.vue
View File

@ -10,7 +10,6 @@
@close="imageViewerIsVisible = false" /> @close="imageViewerIsVisible = false" />
<div class="gallery"> <div class="gallery">
<GalleryFeatured class="gallery__featured" <GalleryFeatured class="gallery__featured"
:featured-height="featuredImageHeight"
:galleries="galleries" :galleries="galleries"
@clicked="handleFeaturedClick" /> @clicked="handleFeaturedClick" />
<GalleryThumbs class="gallery__thumbs" <GalleryThumbs class="gallery__thumbs"
@ -145,8 +144,12 @@ export default {
.gallery__featured { .gallery__featured {
order: 2; order: 2;
flex: 0 0 20rem; flex: 0 0 $gallery-featured-width--compact;
overflow-y: auto; overflow-y: auto;
@media (min-width: $bp__gallery-compact) {
flex-basis: $gallery-featured-width;
}
} }
.gallery__thumbs { .gallery__thumbs {