marc-leopold/components/GalleryPage.vue

<template>
  <div class="gallery-page">
    <div class="image-viewer"
         :class="{ 'is-visible': imageViewerIsVisible }">
      <div class="close-viewer"
           @click="toggleImageViewer">
        X
      </div>
    </div>
    <div class="gallery-container">
      <ul class="featured-images">
        <li v-for="(gallery, index) in galleries"
            class="featured-image"
            :key="index">
          <span>{{ gallery.title }}</span>
        </li>
      </ul>
      <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">
              <li class="featured-image 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>
    </div>
  </div>
</template>

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

  data () {
    return {
      imageViewerIsVisible: false
    }
  },

  methods: {
    toggleImageViewer () {
      this.imageViewerIsVisible = !this.imageViewerIsVisible;
    }
  }
}
</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;
}

.image-viewer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
  to bottom left,
  magenta,
  cyan
  );
}

@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;
  }

  .close-viewer {
    font-size: 10em;
    cursor: pointer;
  }

  .featured-images {
    width: 100vw;
  }

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

  .gallery-thumbs__spacer {
    display:none;
  }

  .gallery-thumbs__row {
  }

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

  .thumb-container {
    height: 50vh;
  }

  .image-viewer {
    z-index: 50;

    transition: opacity 1s; //TEMP
    opacity: 0;
    pointer-events: none;

    &.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

}

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

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

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

  .close-viewer {
    display: none;
  }

  .featured-images {
    order: 2;
    flex: 0 0 $featured-width;
    overflow-y: auto;
  }

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

    &--mobile-only {
      display: none;
    }
  }

  .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>