marc-leopold/components/GalleryPage.vue

<template>
  <div class="gallery-page">
    <div class="gallery-container">
      <div class="featured-images">
        <div class="featured-images__spacer"></div>
        <ul class="featured-images__list">
          <li v-for="(gallery, index) in galleries"
              class="featured-image image-container"
              :key="index">
            <span>{{ gallery.title }}</span>
          </li>
        </ul>
      </div>
      <ul class="gallery-thumbs">
        <li v-for="(gallery, index) in galleries"
            :key="index">
          <ul class="gallery-thumbs__row">
            <li class="featured-image featured-image--mobile-only"></li>
            <li v-for="image in gallery.images"
                class="image-container"
                :key="image.url">
              <span>{{ image.thumbUrl }}</span>
            </li>
          </ul>
        </li>
      </ul>
      <div class="image-viewer"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    galleries: {
      type: Array,
      required: true
    }
  },

  data () {
    return {
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>
.gallery-page {
  position: relative;
  height: 100%;
  width: 100%;
}

.gallery-thumbs__row {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}



@media (max-width: $bp__layout) {
  .gallery-page {
    padding-top: $site-menu__header-height;
  }

  .gallery-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .featured-images {
    width: 100vw;
  }

    .featured-images__spacer {
      display: none;
    }

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

  .gallery-thumbs__row {
  }

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

  .image-container {
    height: 50vh;
  }

}



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

  .gallery-page {
    padding-left: $site-menu__header-width;
  }

  .gallery-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .featured-images {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow-y: auto;
  }

    .featured-images__list {
    }

    .featured-images__spacer {
      pointer-events: none;
    }

  .featured-image {
    width: 10rem;
    height: 10rem;
  }

  .image-viewer {
    position: absolute;
    top: 0;
    left: 0;
  }

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

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

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

  .featured-image {
    &--mobile-only {
      display: none;
    }
  }
}
</style>