From 892ab0b0cf17c0b227cdd25a51c2ce8e26216321 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Mon, 4 Oct 2021 13:31:45 +0200
Subject: [PATCH] collect phase: explain + example

---
 .../src/components/CollectQuotesExplain.vue   | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/client/src/components/CollectQuotesExplain.vue b/client/src/components/CollectQuotesExplain.vue
index 46f7c57..cf3e27c 100644
--- a/client/src/components/CollectQuotesExplain.vue
+++ b/client/src/components/CollectQuotesExplain.vue
@@ -12,10 +12,11 @@
           Schreibe in 3-5 einzelnen Statements etwas über dich.
         </p>
       </div>
-      <div class="collect-quotes-explain__example-title">
-        Beispiel:
+      <div class="collect-quotes-explain__example">
+        <div class="collect-quotes-explain__example-title">Beispiel</div>
+        <div class="collect-quotes-explain__example-subtitle">(anklicken für nächstes)</div>
       </div>
-      <div class="collect-quotes-explain__example-container">
+      <div class="collect-quotes-explain__example-container" @click="showNextExampleQuote">
         <transition name="collect-quotes-explain-fade" mode="out-in">
           <div class="collect-quotes-explain__example-text" :key="quoteNr">
             {{ exampleQuotes[quoteNr] }}
@@ -32,6 +33,7 @@ export default {
   data() {
     return {
       quoteNr: 0,
+      lastUpdate: new Date().getTime(),
       exampleQuotes: [
         'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
         'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
@@ -43,11 +45,19 @@ export default {
       ],
     }
   },
+  methods: {
+    showNextExampleQuote() {
+      this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
+      this.lastUpdate = new Date().getTime()
+    },
+  },
   beforeMount() {
     this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
     this.timer = window.setInterval(function() {
-      this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
-    }.bind(this), 15000)
+      if (new Date().getTime() > this.lastUpdate + 15000) {
+        this.showNextExampleQuote()
+      }
+    }.bind(this), 2000)
   },
   beforeDestroy() {
     window.clearInterval(this.timer)
@@ -57,34 +67,40 @@ export default {
 
 <style lang="scss">
 .collect-quotes-explain {
-
   &__container {
     margin: 20px 80px;
-    padding: 0 20px;
+    padding: 0 40px;
     border: 1px solid white;
     border-radius: 20px;
     background-color: #6040c0;
   }
 
   &__explain {
+    margin-bottom: 40px;
     font-size: 24px;
-    font-family: "Wendy One";
+    font-family: Dosis;
     color: #ffffff;
   }
 
   &__example {
+    font-family: Dosis;
+    color: #ffffff;
     &-title {
-      font-family: "Wendy One";
-      color: #ffffff;
+      font-size: 24px;
+    }
+    &-subtitle {
+      font-size: 16px;
+      margin-bottom: 10px;
     }
 
     &-container {
-      height: 120px;
+      height: 8em;
     }
     &-text {
       font-family: Dosis;
       font-size: 24px;
       color: #ffffff;
+      cursor: pointer;
 
       &:before {
         content: '„';