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,14 +118,9 @@
       -1px 1px 0 $color-brand,
       1px 1px 0 $color-brand;*/
     }
-  }
 
-  .start-sections {
+    &__modules {
       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;
@@ -156,6 +129,8 @@
         display: grid;
       }
       @include desktop {
+        padding-left: 120px;
+        padding-right: 120px;
         grid-template-columns: 1fr 1fr 1fr;
       }
 
@@ -181,7 +156,7 @@
         -ms-grid-row: 1;
         -ms-grid-column: 3;
       }
-
+    }
   }
 
   .news {