From 240fcf07954a8e6dd340801f3de643643f858196 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 1 Jul 2020 11:33:15 +0200
Subject: [PATCH] Display text when no modules have been visited by the user

---
 client/cypress/integration/current-module.spec.js |  1 +
 client/src/App.vue                                |  1 +
 client/src/pages/start.vue                        | 11 ++++++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/cypress/integration/current-module.spec.js b/client/cypress/integration/current-module.spec.js
index c25aeb50..1445652d 100644
--- a/client/cypress/integration/current-module.spec.js
+++ b/client/cypress/integration/current-module.spec.js
@@ -94,6 +94,7 @@ describe('Current Module', () => {
 
     // module list exists, but does not have anything in it
     cy.checkHome(0, true);
+    cy.get('[data-cy=no-modules-yet]').should('exist').should('contain', 'Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!');
 
     cy.goToModule('1. Geld und Kauf', 'Modul 2');
     cy.get('[data-cy=module-title]').should('contain', 'Geld');
diff --git a/client/src/App.vue b/client/src/App.vue
index c8e04a0b..0e78c5fd 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -87,6 +87,7 @@
 
   body {
     overflow-y: auto;
+    overflow-x: hidden;
     height: 100vh;
   }
 
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index 45a89981..1b060ce1 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -5,6 +5,10 @@
         class="start-page__modules start-sections"
         data-cy="start-modules-list">
         <h2 class="start-page__heading">Letzte Module</h2>
+        <h3
+          class="start-page__no-modules"
+          data-cy="no-modules-yet"
+          v-if="!me.recentModules.length">Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!</h3>
         <div class="start-page__modules-list">
           <module-teaser
             :key="index"
@@ -104,7 +108,7 @@
     justify-content: space-between;
     @supports (display: grid) {
       display: grid;
-      justify-content: stretch;
+      justify-content: center;
     }
     grid-template-rows: auto 1fr auto;
     min-height: 100vh;
@@ -147,6 +151,11 @@
       }
     }
 
+    &__no-modules {
+      @include heading-3;
+      margin-bottom: 0;
+    }
+
     &__modules {
       margin-bottom: $large-spacing;
     }