Refactor and update news teasers on start page

client/src/components/NewsTeasers.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="news-teasers">
-    <div
-      :key="teaser.id"
-      class="news-teasers__teaser teaser"
-      v-for="teaser in newsTeasers">
-      <a :href="teaser.newsArticleUrl">
-        <img
-          :src="teaser.imageUrl"
-          class="teaser__image">
-        <p class="teaser__image-source">
-          <a
-            :href="teaser.imageSource"
-            class="tiny-text">Quelle {{ teaser.imageSource }}</a></p>
-        <h4 class="teaser__title">{{ teaser.title }}</h4>
-        <p class="teaser__description">{{ teaser.description }}</p>
-        <p class="teaser__date">{{ teaser.displayDate }}</p>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
-
-export default {
-  components: {},
-
-  data() {
-    return {
-      newsTeasers: []
-    };
-  },
-
-  apollo: {
-    $client: 'publicClient',
-    newsTeasers: {
-      query: NEWS_TEASER_QUERY,
-      update(data) {
-        return this.$getRidOfEdges(data).newsTeasers;
-      }
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-@import "@/styles/_variables.scss";
-@import "@/styles/_functions.scss";
-@import "@/styles/_mixins.scss";
-
-$news_width: 550px;
-$image_height: 254px;
-
-.teasers {
-  display: block;
-
-  @include desktop {
-    @supports (display: grid) {
-      display: grid;
-      display: -ms-grid;
-    }
-
-    grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
-    grid-gap: 40px;
-    grid-auto-rows: minmax(400px, auto);
-    grid-template-rows: auto auto;
-    -ms-grid-columns: $news_width $news_width;
-  }
-}
-
-.teaser {
-  margin-bottom: $large-spacing;
-  position: relative;
-
-  &__image {
-    display: block;
-    max-width: 100%;
-    height: auto;
-
-    @include desktop {
-      max-width: $news_width;
-    }
-  }
-
-  &__image-source {
-    line-height: 25px;
-  }
-
-  &__description {
-    margin-bottom: $large-spacing;
-  }
-
-  &__date {
-    font-family: $sans-serif-font-family;
-    font-weight: $font-weight-regular;
-    color: $color-silver-dark;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
-</style>

client/src/components/news/NewsTeaser.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="news-teaser">
+    <a :href="teaser.newsArticleUrl">
+      <img
+        :src="teaser.imageUrl"
+        class="news-news-teaser__image">
+      <p class="news-teaser__image-source">
+        <a
+          :href="teaser.imageSource"
+          class="tiny-text">Quelle {{ teaser.imageSource }}</a></p>
+      <h4 class="news-teaser__title">{{ teaser.title }}</h4>
+      <p class="news-teaser__description">{{ teaser.description }}</p>
+      <p class="news-teaser__date">{{ teaser.displayDate }}</p>
+    </a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      teaser: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
+
+  .news-teaser {
+    position: relative;
+    padding-bottom: $large-spacing;
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      height: auto;
+
+      @include desktop {
+        max-width: $news_width;
+      }
+    }
+
+    &__image-source {
+      line-height: 25px;
+    }
+
+    &__description {
+      margin-bottom: $large-spacing;
+    }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-regular;
+      color: $color-silver-dark;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+</style>

client/src/components/news/NewsTeasers.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="news-teasers">
+    <news-teaser
+      :key="teaser.id"
+      :teaser="teaser"
+      class="news-teasers__teaser teaser"
+      v-for="teaser in newsTeasers"/>
+  </div>
+</template>
+
+<script>
+  import NewsTeaser from '@/components/news/NewsTeaser';
+
+  import news from '@/mixins/news'
+
+  export default {
+    mixins: [news],
+
+    components: {
+      NewsTeaser
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
+
+  $image_height: 254px;
+
+  .news-teasers {
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+    margin-bottom: $large-spacing;
+    grid-gap: 40px;
+
+    @include desktop {
+      grid-column-gap: 40px;
+      grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
+      grid-auto-rows: minmax(400px, auto);
+      grid-template-rows: auto auto;
+      -ms-grid-columns: $news_width $news_width;
+    }
+  }
+</style>

client/src/mixins/news.js

@@ -0,0 +1,18 @@
+import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
+
+export default {
+  data() {
+    return {
+      newsTeasers: []
+    };
+  },
+  apollo: {
+    newsTeasers: {
+      query: NEWS_TEASER_QUERY,
+      update(data) {
+        return this.$getRidOfEdges(data).newsTeasers;
+      },
+      client: 'publicClient',
+    }
+  }
+}

client/src/pages/news.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="news">
     <h1 class="news__heading">News</h1>
-    <NewsTeasers />
+    <news-teasers />
   </div>
 </template>
 
 <script>
 
-  import NewsTeasers from '@/components/NewsTeasers';
+  import NewsTeasers from '@/components/news/NewsTeasers';
 
   export default {
     components: {NewsTeasers},

client/src/pages/start-old.vue

@@ -56,7 +56,7 @@
 </template>
 <script>
   import SectionBlock from '@/components/SectionBlock.vue';
-  import NewsTeaser from '@/components/NewsTeaser.vue';
+  import NewsTeaser from '@/components/news/NewsTeaserOld.vue';
   import HeaderBar from '@/components/HeaderBar';
 
   import ContentsIllustration from '@/components/illustrations/ContentsIllustration';

client/src/pages/start.vue

@@ -1,40 +1,49 @@
 <template>
   <div class="start-page">
-    <header-bar class="start-page__header"/>
+    <div class="start-page__content">
+      <div
+        class="start-page__modules start-sections"
+        data-cy="start-modules-list">
+        <h2 class="start-page__heading">Letzte Module</h2>
+        <div class="start-page__modules-list">
+          <module-teaser
+            :key="index"
+            :meta-title="module.metaTitle"
+            :title="module.title"
+            :hero-image="module.heroImage"
+            :slug="module.slug"
+            data-cy="start-module-teaser"
+            v-for="(module, index) in me.recentModules"/>
 
-    <div
+        </div>
-      class="start-page__modules start-sections"
+        <router-link
-      data-cy="start-modules-list">
+          :to="topicRoute"
-      <module-teaser
+          tag="div"
-        :key="index"
+          class="button">Alle Module anzeigen
-        :meta-title="module.metaTitle"
+        </router-link>
-        :title="module.title"
+      </div>
-        :hero-image="module.heroImage"
+      <div class="start-page__news news">
-        :slug="module.slug"
+        <h2 class="start-page__heading">News</h2>
-        data-cy="start-module-teaser"
+        <div class="news__list">
-        v-for="(module, index) in me.recentModules"/>
+          <news-teaser
-    </div>
+            :teaser="teaser"
-    <div class="start-page__news news">
+            :key="teaser.id"
-      <h2 class="news__title">News</h2>
+            v-for="teaser in teasers"/>
-      <news-teaser
+        </div>
-        date="27. Mai 2020"
+
-        title="Lockdown"
+        <router-link
-        url="https://myskillbox-abu-news.webflow.io/lockdown"/>
+          :to="{name: 'news'}"
-      <news-teaser
+          class="button">Alle News anzeigen
-        date="11. März 2020"
+        </router-link>
-        title="Brexit"
+      </div>
-        url="https://myskillbox-abu-news.webflow.io/brexit"/>
-      <news-teaser
-        date="20. Dezember 2019"
-        title="Blockchain"
-        url="https://myskillbox-abu-news.webflow.io/blockchain"/>
-      <div class="news__more">Mehr...</div>
     </div>
+
   </div>
 </template>
 <script>
   import SectionBlock from '@/components/SectionBlock.vue';
-  import NewsTeaser from '@/components/NewsTeaser.vue';
+  import NewsTeaser from '@/components/news/NewsTeaser.vue';
+  import NewsTeasers from '@/components/news/NewsTeasers.vue';
   import HeaderBar from '@/components/HeaderBar';
   import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
@@ -44,16 +53,19 @@
 
   import MobileHeader from '@/components/MobileHeader';
 
-  import meMixin from '@/mixins/me';
+  import meQuery from '@/mixins/me';
+  import news from '@/mixins/news';
 
   export default {
 
-    mixins: [meMixin],
+    mixins: [meQuery, news],
+
     components: {
       MobileHeader,
       HeaderBar,
       SectionBlock,
       NewsTeaser,
+      NewsTeasers,
       ContentsIllustration,
       PortfolioIllustration,
       RoomsIllustration,
@@ -72,6 +84,9 @@
           return 'Aktuelles Modul anzeigen';
         }
         return 'Alle Inhalte anzeigen'
+      },
+      teasers() {
+        return this.newsTeasers.slice(0, 2);
       }
     },
 
@@ -96,10 +111,6 @@
     width: 100vw;
     box-sizing: border-box;
 
-    &__header {
-
-    }
-
     &__title {
       color: $color-brand;
       text-align: center;
@@ -121,25 +132,45 @@
       1px 1px 0 $color-brand;*/
     }
 
+    &__heading {
+      width: 100%;
+      @include meta-title;
+    }
+
+    &__content {
+      padding-top: 2*$large-spacing;
+      box-sizing: border-box;
+      max-width: 100%;
+      @include desktop {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+    }
+
     &__modules {
-      margin: 0 30px;
+      margin-bottom: $large-spacing;
+    }
+
+    &__modules-list {
+      /*margin: 0 30px;*/
       display: -ms-grid;
       -ms-grid-column-align: center;
       -ms-grid-columns: 1fr 1fr 1fr;
-      margin-bottom: 90px;
+      width: 100%;
+      margin-bottom: $large-spacing;
+
       @supports (display: grid) {
         display: grid;
       }
       @include desktop {
-        padding-left: 120px;
-        padding-right: 120px;
         grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: max-content;
       }
 
       grid-row-gap: 15px;
       grid-column-gap: 50px;
       justify-items: start;
-    align-items: center;
+      align-items: center;
 
       /*
        * For IE10+
@@ -162,22 +193,24 @@
   }
 
   .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;
+    & &__list {
+      display: flex;
 
-    @include desktop {
+      grid-row-gap: $large-spacing;
-      grid-template-columns: repeat(5, 1fr);
+      grid-column-gap: $large-spacing;
+
+      margin-bottom: $large-spacing;
+
+      @supports (display: grid) {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+
+      @include desktop {
+        grid-template-columns: repeat(2, 1fr);
+      }
     }
 
     /*

client/src/router/index.js

@@ -47,7 +47,7 @@ const routes = [
     path: '/',
     name: 'home',
     component: start,
-    meta: {layout: 'blank'}
+    // meta: {layout: 'blank'}
   },
   {
     path: '/login',

client/src/styles/_variables.scss

@@ -77,3 +77,4 @@ $default-heading-line-height: 1.2;
 $popover-default-bottom: -110px;
 
 $footer-width: 800px;
+$news_width: 550px;