marc-leopold/components/GalleryThumbs.vue

<template>
  <div>
    <div class="gallery-thumbs__spacer"></div>
    <ul class="gallery-thumbs__list">
      <li v-for="(gallery, index) in galleries"
          :key="index">
        <ul class="gallery-thumbs__row">
          <NavArrow class="gallery-thumbs__slider mobile-only" />
          <li class="featured-image mobile-only"
              :style="{ 'height': featuredHeight }">
          </li>
          <li v-for="image in gallery.images"
              class="thumb-container"
              :key="image.url">
            <span>{{ image.thumbUrl }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import NavArrow from '@/components/NavArrow'

export default {
  components: {
    NavArrow
  },
  
  props: {
    galleries: {
      type: Array,
      required: true
    },
    featuredHeight: {
      type: String,
      required: true
    }
  },

  data () {
    return {
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>
.gallery-thumbs__row {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: $bp__layout) {
  .gallery-thumbs__spacer {
    display:none;
  }

  .gallery-thumbs__row {
    position: relative;
  }

  .gallery-thumbs__slider {
    position: absolute;
    width: 10rem;
    height: 10rem;
    bottom: 1rem;
    left: 100vw;
    transform: translateX( calc(-2rem - 100%));
  }

  .featured-image {
    height: 50vh !important; // must override inline style set with prop
    width: 100vw;
    flex: 0 0 100vw;
  }

  .thumb-container {
    height: 50vh;
  }
}

@media (min-width: $bp__layout) {
  $thumbs-height: 8rem;

  .mobile-only {
    display: none;
  }

  .featured-image {
    width: 100%;
  }

  .thumb-container {
    height: $thumbs-height;
  }

  .gallery-thumbs__list {
    height: $thumbs-height;

    overflow: hidden;
  }

  .gallery-thumbs__row {
    flex: 0 0 $thumbs-height;
  }
}

</style>