marc-leopold/pages/services.vue

<template>
  <ContentPage heading="My Services">
    <!-- TODO need to disable this if on mobile -->
    <BackgroundImagePreloader slot="background"
                              class="background-preloader"
                              :image-urls="backgroundImageUrls"
                              :active-index="activeIndex"
    >
      <div slot="overlay" class="background preloader-overlay"></div>
    </BackgroundImagePreloader>

    <ul 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>
  </ContentPage>
</template>

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

export default {
  name: 'HomePage',

  components: {
    ContentPage,
    BackgroundImagePreloader,
  },

  data() {
    return {
      activeIndex: 0,
      services: [
        {
          'heading': 'Portraits',
          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
          'html': '<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>',
          'linkUrl': '#',
        },
        {
          'heading': 'Dance',
          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
          'html': '<p>Photography and video production of dancers and performances for print, web, and promotion.</p>',
          'linkUrl': '#',
        },
        {
          'heading': 'Music',
          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
          'html': '<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>',
          'linkUrl': '#',
        },
        {
          'heading': 'Events',
          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
          'html': '<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>',
          'linkUrl': '#',
        },
      ]
    }
  },

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

  methods: {
    handleMouseOver(index) {
      this.activeIndex = index
    },
  },
}
</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;

    &: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(.7);
  width: 75%;
}

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

.preloader-overlay {
  z-index: 10;
  background-color: rgba($color__primary-100, .7);
}
</style>