marc-leopold/pages/services.vue

<template>
  <ContentPage heading="My Services">
    <BackgroundImagePreloader v-if="showPreloaderBackground && backgroundImageUrls.length > 0"
                              slot="background"
                              class="background-preloader"
                              :image-urls="backgroundImageUrls"
                              :active-index="activeIndex"
    >
      <div slot="overlay" class="background-tint background preloader-overlay"></div>
    </BackgroundImagePreloader>
    <BackgroundImageLoader v-else slot="background"
                           class="background"
                           :image-url="imageUrl"
    >
      <div slot="overlay" class="background-tint background preloader-overlay"></div>
    </BackgroundImageLoader>

    <ul v-if="services.length > 0" class="services-list">
      <li v-for="(service, index) in services"
          :key="index"
          class="services-list__item"
          :style="{ 'z-index': services.length - index + 1}"
          @mouseover="handleMouseOver(index)"
      >
        <div class="background background-image"
             :style="{ 'background-image': `url(${service.imageUrl})` }"
        >
        </div>
        <div class="background background-overlay"></div>
        <div class="services-list__content">
          <h2 class="services-list__heading service-heading">{{ service.heading }}</h2>
          <div class="services-list__body" v-html="service.html">
          </div>
          <a class="btn-link services-list__gallery-link" :href="service.linkUrl">My {{ service.heading }}</a>
        </div>
      </li>
    </ul>
    <div v-else class="no-services">
      <p class="no-content-text">Please check back soon for information on the services I provide.</p>
    </div>
  </ContentPage>
</template>

<script>
import ContentPage from '@/components/ContentPage'
import BackgroundImagePreloader from '@/components/BackgroundImagePreloader'
import BackgroundImageLoader from '@/components/BackgroundImageLoader'

export default {
  name: 'ServicesPage',

  components: {
    ContentPage,
    BackgroundImagePreloader,
    BackgroundImageLoader,
  },

  data() {
    return {
      showPreloaderBackground: false,
      activeIndex: 0,
    }
  },

  head () {
    return {
      title: 'My Services',
      meta: [{ 
        hid: 'description',
        name: 'description',
        content: 'An overview of the services provided by the photographer marc Leopold.'
      }],
    }
  },

  computed: {
    backgroundImageUrls () {
      return this.services.map(el => el.backgroundImageUrl)
    },
  },

  mounted () {
    const mq = window.matchMedia("(min-width: 40em)")
    this.showPreloaderBackground = mq.matches
  },

  methods: {
    handleMouseOver(index) {
      this.activeIndex = index
    },
  },

  async asyncData ({ $axios }) {
    try {
      const { services } = await $axios.$get('api/v1/services')
      let { imageUrl } = await $axios.$get('api/v1/page/services')

      if (!imageUrl) {
        imageUrl = '/img/default-home.jpg'
      }

      return { services, imageUrl }
    } catch {
      return {
        services: [],
        imageUrl: '/img/default-home.jpg',
      }
    }
  },
}
</script>

<style scoped lang="scss">
.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

  .services-list__item {
    $min-height: 32rem;
    $overlap: 4rem;
    $padding-vertical: 2rem;
    $color-overlay: $color__neutral-200;

    position: relative;
    display: block;
    min-height: $min-height;
    padding: $overlap + $padding-vertical 2rem $overlap;
    margin-top: 0;
    margin-bottom: -1 * $overlap;

    background-color: $color__neutral-200;
    font-size: 1rem;

    .background-overlay {
      opacity: 1;
    }

    &:nth-child(odd) {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - #{$overlap}), 0 100%);

      .background-overlay {
        background: linear-gradient(
                      to right,
                      rgba($color-overlay, .1),
                      rgba($color-overlay, 1) 75%
                    );
      }

      .services-list__heading {
        text-align: right;
      }

      .services-list__body {
        align-self: flex-end;

        @media (min-width: $bp__layout) {
          text-align: right;
        }
      }
    }

    &:nth-child(even) {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$overlap}));
      .background-overlay {
        background: linear-gradient(
                      to left,
                      rgba($color-overlay, .1),
                      rgba($color-overlay, 1) 75%
                    );
      }

      .background-image {
        left: auto;
        right: 0;
      }

      .services-list__gallery-link {
        left: auto;
        right: 2rem;
      }

      .services-list__body {
        text-align: right;

        @media (min-width: $bp__layout) {
          text-align: left;
        }
      }
    }

    &:first-child {
    min-height: $min-height - $overlap;
      padding-top: $padding-vertical;
    }

    &:last-child {
      margin-bottom: 0;
      padding-bottom: $padding-vertical;
      clip-path: none;
    }
  }

  .services-list__img {
    display: none;
    position: absolute;
    height: 20em;
    width: auto;
    bottom: 0;
    right: 0;
    opacity: .4;
  }

  .services-list__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 20em;

    padding-bottom: 1rem;
  }

  .services-list__body {
    width: 100%;
    color: $color__neutral-800;

    @media (min-width: $bp__layout) {
      width: 80%;
    }
    
    @media (min-width: 70em) {
      width: 50%;
    }
  }

  .services-list__gallery-link {
    position: absolute;
    bottom: 3rem;
    left: 2rem;
  }

.background {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;

}

.background-image {
  // opacity: .3;
  background-size: cover;
  filter: grayscale(.2);
  width: 75%;
}

.service-heading {
  @include font-title();
  color: $color__neutral-900;
  font-size: 2.0em;
}

.preloader-overlay {
  z-index: 10;
}

.no-services {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
</style>