<template> <ul class="gallery-featured" ref="galleryList"> <li v-for="(gallery, index) in galleries" ref="galleries" class="featured-image thumb-overlay selected-indicator" :class="{ 'is-active': index === galleryActive }" :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }" :key="index" @click="$emit('clicked', index)"> <span class="gallery-title">{{ gallery.title }}</span> </li> </ul> </template> <script> export default { props: { galleries: { type: Array, required: true }, galleryActive: { type: Number, required: false, default () { return 0 }, } }, mounted () { if (this.galleryActive > 0) { const el = this.$refs.galleries[this.galleryActive] el.parentNode.scrollTop = el.offsetTop } }, } </script> <style lang="scss" scoped> .featured-image { position: relative; width: 100%; background-size: cover; background-position: center center; overflow: hidden; } @media (max-width: $bp__layout) { .featured-image { height: calc(50vh - #{$site-menu__header-height / 2}); width: 100vw; flex: 0 0 100vw; } .gallery-title { position: absolute; display: block; max-width: 66%; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5em; color: #fff; } .thumb-overlay { $color: $color__neutral-100; // color of overlay &::before { background: linear-gradient( to bottom, rgba($color, .9), rgba($color, .5), rgba($color, .5) ); } &::after { background: linear-gradient( to left, rgba($color, .4), rgba($color, 0), rgba($color, .4) ); } } } @media (min-width: $bp__layout) { .gallery-featured { transition: opacity .3s; // TEMP padding: 8px; cursor: pointer; } .featured-image { z-index: 10; position: relative; height: 0; padding-top: 100%; margin-bottom: 4px; } .gallery-title { z-index: 15; position: absolute; top: 8px; right: 8px; text-align: right; font-size: 1em; @include font-title(); color: $color__neutral-900; @media (min-width: $bp__gallery-compact) { font-size: 1.3em; } } } </style>