From 943ac76859132775516e8ffbd3d1b67ca97603bc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 29 Jun 2020 16:39:44 +0200
Subject: [PATCH] Archive old start page

---
 client/src/pages/start-old.vue | 259 +++++++++++++++++++++++++++++++++
 1 file changed, 259 insertions(+)
 create mode 100644 client/src/pages/start-old.vue

diff --git a/client/src/pages/start-old.vue b/client/src/pages/start-old.vue
new file mode 100644
index 00000000..47098720
--- /dev/null
+++ b/client/src/pages/start-old.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="start-page">
+    <header-bar class="start-page__header"/>
+
+    <div class="start-page__sections start-sections">
+
+      <section-block
+        :link-text="moduleText"
+        :route="moduleRoute"
+        class="start-sections__section"
+        title="Inhalte"
+        subtitle="Neues Wissen erwerben"
+        data-cy="current-module-link"
+      >
+        <contents-illustration/>
+      </section-block>
+      <section-block
+        class="start-sections__section"
+        title="Räume"
+        subtitle="Beiträge mit der Klasse teilen"
+        data-cy="rooms-link"
+        link-text="Alle Räume anzeigen"
+        route="/rooms"
+      >
+        <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/>
+      </section-block>
+    </div>
+    <div class="start-page__news news">
+      <h2 class="news__title">News</h2>
+      <news-teaser
+        date="27. Mai 2020"
+        title="Lockdown"
+        url="https://myskillbox-abu-news.webflow.io/lockdown"/>
+      <news-teaser
+        date="11. März 2020"
+        title="Brexit"
+        url="https://myskillbox-abu-news.webflow.io/brexit"/>
+      <news-teaser
+        date="20. Dezember 2019"
+        title="Blockchain"
+        url="https://myskillbox-abu-news.webflow.io/blockchain"/>
+      <!--<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 MobileHeader from '@/components/MobileHeader';
+
+  import meMixin from '@/mixins/me';
+
+  export default {
+
+    mixins: [meMixin],
+    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'
+      }
+    },
+
+  }
+</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-silver-light;
+      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-charcoal-dark;
+    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-silver-light;
+      }
+    }
+  }
+</style>