marc-leopold/components/GalleryThumbs.vue

<template>
  <div class="gallery-thumbs">
    <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"></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
    }
  },

  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-thumb-slider-width: 10rem;

  .gallery-thumbs {
    position: absolute;
    top: 0;
    left: 0;
  }

  .gallery-thumbs__spacer {
    display:none;
  }

  .gallery-thumbs__row {
    position: relative;
  }

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

  .featured-image {
    height: 50vh;
    width: 100vw;
    flex: 0 0 100vw;
  }

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

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

  .mobile-only {
    display: none;
  }

  .featured-image {
    width: 100%;
    height: $featured-height;
  }

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

  .gallery-thumbs {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

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

      overflow: hidden;
      // overflow: auto; // TEMP
    }

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

</style>