skillbox/client/src/pages/start.vue

<template>
  <div class="start-page">
    <header-bar class="start-page__header"></header-bar>

    <mobile-header class="start-page__header start-page__header--mobile"></mobile-header>

    <div class="start-page__sections start-sections">

      <section-block
        class="start-sections__section"
        title="Inhalte"
        subtitle="Neues Wissen erwerben"
        data-cy="current-module-link"
        :link-text="moduleText"
        :route="moduleRoute"
      >
        <contents-illustration></contents-illustration>
      </section-block>
      <section-block
        class="start-sections__section"
        title="Räume"
        subtitle="Beiträge mit der Klasse teilen"
        link-text="Alle Räume anzeigen"
        route="/rooms"
      >
        <rooms-illustration></rooms-illustration>
      </section-block>
      <section-block
        class="start-sections__section"
        title="Portfolio"
        subtitle="Projekt dokumentieren und reflektieren"
        link-text="Portfolio anzeigen"
        route="/portfolio"
      >
        <portfolio-illustration></portfolio-illustration>
      </section-block>
    </div>
    <div class="start-page__news news">
      <h2 class="news__title">News</h2>
      <news-teaser date="19. Dezember 2018" title="Bilder eines Jahres"
                   url="https://www.brennpunkt-welt.ch/jahresrückblick-2018/"></news-teaser>
      <news-teaser date="20. November 2018" title="100 Jahre Erster Weltkrieg"
                   url="http://abunews-1f178193a10edaabff3ab828e30af44.webflow.io/"></news-teaser>
      <news-teaser date="31. Oktober 2018" title="Sommerzeit - Festivalzeit"
                   url="https://abunews.webflow.io/"></news-teaser>
      <div class="news__more">Mehr...</div>
    </div>
  </div>
</template>
<script>
  import SectionBlock from '@/components/SectionBlock.vue';
  import NewsTeaser from '@/components/NewsTeaser.vue';
  import HeaderBar from '@/components/HeaderBar';

  import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
  import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';

  import {meQuery} from '@/graphql/queries';
  import MobileHeader from '@/components/MobileHeader';

  export default {
    components: {
      MobileHeader,
      HeaderBar,
      SectionBlock,
      NewsTeaser,
      ContentsIllustration,
      PortfolioIllustration,
      RoomsIllustration
    },

    computed: {
      moduleRoute() {
        if (this.me.lastModule && this.me.lastModule.slug) {
          return `/module/${this.me.lastModule.slug}`;
        }
        return '/book/topic/berufliche-grundbildung';
      },
      moduleText() {
        if (this.me.lastModule && this.me.lastModule.slug) {
          return 'Aktuelles Modul anzeigen';
        }
        return 'Alle Inhalte anzeigen'
      }
    },

    apollo: {
      me: meQuery
    },

    data() {
      return {
        me: {}
      }
    }
  }
</script>

<style scoped lang="scss">

  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .start-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @supports (display: grid) {
      display: grid;
      justify-content: stretch;
    }
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;

    &__header {

    }

    &__title {
      color: $color-brand;
      text-align: center;
      border-bottom: 1px solid $color-lightgrey;
      padding-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
      margin-bottom: 60px;
    }

    &__my {
      color: $color-white;
      /*font-size: 2rem;*/
      font-weight: 800;
      -webkit-text-stroke: 1px $color-brand;
      /*text-shadow: -1px -1px 0 $color-brand,
      1px -1px 0 $color-brand,
      -1px 1px 0 $color-brand,
      1px 1px 0 $color-brand;*/
    }
  }

  .start-sections {
    margin: 0 30px;
    @include desktop {
      padding-left: 120px;
      padding-right: 120px;
    }
    display: -ms-grid;
    -ms-grid-column-align: center;
    -ms-grid-columns: 1fr 1fr 1fr;
    margin-bottom: 90px;
    @supports (display: grid) {
      display: grid;
    }
    @include desktop {
      grid-template-columns: 1fr 1fr 1fr;
    }

    grid-row-gap: 15px;
    grid-column-gap: 50px;
    justify-items: start;
    align-items: center;

    /*
     * For IE10+
     */
    & > :nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }
    & > :nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
    }
    & > :nth-child(3) {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }

  }

  .news {
    background-color: $color-darkgrey-1;
    color: $color-white;
    padding-top: $large-spacing;
    padding-bottom: $large-spacing;
    display: flex;
    justify-content: space-around;
    -ms-grid-columns: 1fr 1fr 1fr;
    @supports (display: grid) {
      display: grid;
      grid-template-columns: 1fr;
    }

    grid-row-gap: $large-spacing;

    @include desktop {
      grid-template-columns: repeat(5, 1fr);
    }

    /*
     * For IE10+
     */
    & > :nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }
    & > :nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
    }
    & > :nth-child(3) {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }
    & > :nth-child(4) {
      -ms-grid-row: 1;
      -ms-grid-column: 4;
    }

    @include desktop {
      /*padding-left: 120px;*/
      /*padding-right: 120px;*/
    }

    &__title {
      font-family: $sans-serif-font-family;
      font-weight: $font-weight-bold;
      text-transform: uppercase;
      font-size: 2.1875rem;
      padding-bottom: 24px;
      text-align: center;
      color: inherit;
      margin-bottom: 0;
    }

    &__more {
      color: $color-white;
      font-family: $sans-serif-font-family;
      line-height: $default-line-height;
      padding-left: $medium-spacing;
      font-weight: $font-weight-bold;
      text-align: center;

      @include desktop {
        text-align: left;
        border-left: 1px solid $color-lightgrey;
      }
    }
  }
</style>