Show recent modules on start page

client/src/graphql/gql/fragments/userParts.gql

@@ -1,4 +1,5 @@
 #import "./schoolClassParts.gql"
+#import "./moduleParts.gql"
 fragment UserParts on UserNode {
   id
   pk
@@ -19,6 +20,13 @@ fragment UserParts on UserNode {
   selectedClass {
     id
   }
+  recentModules(orderBy: "-visited") {
+    edges {
+      node {
+        ...ModuleParts
+      }
+    }
+  }
   schoolClasses {
     edges {
       node {

client/src/pages/start.vue

@@ -2,37 +2,15 @@
   <div class="start-page">
     <header-bar class="start-page__header"/>
 
-    <div class="start-page__sections start-sections">
+    <div class="start-page__modules start-sections">
-
+      <module-teaser
-      <section-block
+        :key="index"
-        :link-text="moduleText"
+        :meta-title="module.metaTitle"
-        :route="moduleRoute"
+        :title="module.title"
-        class="start-sections__section"
+        :hero-image="module.heroImage"
-        title="Inhalte"
+        :slug="module.slug"
-        subtitle="Neues Wissen erwerben"
+        data-cy="start-module-teaser"
-        data-cy="current-module-link"
+        v-for="(module, index) in me.recentModules"/>
-      >
-        <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>
@@ -48,8 +26,6 @@
         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>
@@ -58,6 +34,7 @@
   import SectionBlock from '@/components/SectionBlock.vue';
   import NewsTeaser from '@/components/NewsTeaser.vue';
   import HeaderBar from '@/components/HeaderBar';
+  import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
   import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
   import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
@@ -77,7 +54,8 @@
       NewsTeaser,
       ContentsIllustration,
       PortfolioIllustration,
-      RoomsIllustration
+      RoomsIllustration,
+      ModuleTeaser
     },
 
     computed: {
@@ -140,48 +118,45 @@
       -1px 1px 0 $color-brand,
       1px 1px 0 $color-brand;*/
     }
-  }
 
-  .start-sections {
+    &__modules {
-    margin: 0 30px;
+      margin: 0 30px;
-    @include desktop {
+      display: -ms-grid;
-      padding-left: 120px;
+      -ms-grid-column-align: center;
-      padding-right: 120px;
+      -ms-grid-columns: 1fr 1fr 1fr;
-    }
+      margin-bottom: 90px;
-    display: -ms-grid;
+      @supports (display: grid) {
-    -ms-grid-column-align: center;
+        display: grid;
-    -ms-grid-columns: 1fr 1fr 1fr;
+      }
-    margin-bottom: 90px;
+      @include desktop {
-    @supports (display: grid) {
+        padding-left: 120px;
-      display: grid;
+        padding-right: 120px;
-    }
+        grid-template-columns: 1fr 1fr 1fr;
-    @include desktop {
+      }
-      grid-template-columns: 1fr 1fr 1fr;
-    }
 
-    grid-row-gap: 15px;
+      grid-row-gap: 15px;
-    grid-column-gap: 50px;
+      grid-column-gap: 50px;
-    justify-items: start;
+      justify-items: start;
     align-items: center;
 
-    /*
+      /*
-     * For IE10+
+       * For IE10+
-     */
+       */
-    & > :nth-child(1) {
+      & > :nth-child(1) {
-      -ms-grid-row: 1;
+        -ms-grid-row: 1;
-      -ms-grid-column: 1;
+        -ms-grid-column: 1;
-    }
+      }
 
-    & > :nth-child(2) {
+      & > :nth-child(2) {
-      -ms-grid-row: 1;
+        -ms-grid-row: 1;
-      -ms-grid-column: 2;
+        -ms-grid-column: 2;
-    }
+      }
 
-    & > :nth-child(3) {
+      & > :nth-child(3) {
-      -ms-grid-row: 1;
+        -ms-grid-row: 1;
-      -ms-grid-column: 3;
+        -ms-grid-column: 3;
+      }
     }
-
   }
 
   .news {