From 3d4ab372e80c7dd3f3eb2823790dd78d5641454f Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 15 Oct 2021 19:52:55 +0200
Subject: [PATCH] open/close explain box

---
 .../src/components/CollectQuotesExplain.vue   | 69 ++++++++++++++-----
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/client/src/components/CollectQuotesExplain.vue b/client/src/components/CollectQuotesExplain.vue
index cf3e27c..dcabb27 100644
--- a/client/src/components/CollectQuotesExplain.vue
+++ b/client/src/components/CollectQuotesExplain.vue
@@ -1,27 +1,38 @@
 <template>
   <div class="collect-quotes-explain">
     <div class="collect-quotes-explain__container">
-      <div class="collect-quotes-explain__explain">
-        <p>
-          Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
-          Mitspielenden Statements gesammelt. In der zweiten Phase versucht
-          man, die Statements den richtigen Personen zuzuordnen. Wir befinden
-          uns in der ersten Phase.
-        </p>
-        <p>
-          Schreibe in 3-5 einzelnen Statements etwas über dich.
-        </p>
+      <div class="collect-quotes-explain__open-close-toggle" @click="toggleOpenClose">
+        <span v-if="explainOpen">X</span>
+        <span v-else>&gt;</span>
       </div>
-      <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 v-if="!explainOpen">
+        <div class="collect-quotes-explain__explain" @click="toggleOpenClose">
+          <p>Erklärung zum Spiel</p>
+        </div>
       </div>
-      <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] }}
-          </div>
-        </transition>
+      <div v-if="explainOpen">
+        <div class="collect-quotes-explain__explain">
+          <p>
+            Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
+            Mitspielenden Statements gesammelt. In der zweiten Phase versucht
+            man, die Statements den richtigen Personen zuzuordnen. Wir befinden
+            uns in der ersten Phase.
+          </p>
+          <p>
+            Schreibe in 3-5 einzelnen Statements etwas über dich.
+          </p>
+        </div>
+        <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" @click="showNextExampleQuote">
+          <transition name="collect-quotes-explain-fade" mode="out-in">
+            <div class="collect-quotes-explain__example-text" :key="quoteNr">
+              {{ exampleQuotes[quoteNr] }}
+            </div>
+          </transition>
+        </div>
       </div>
     </div>
   </div>
@@ -34,6 +45,7 @@ export default {
     return {
       quoteNr: 0,
       lastUpdate: new Date().getTime(),
+      explainOpen: true,
       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.',
@@ -50,6 +62,9 @@ export default {
       this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
       this.lastUpdate = new Date().getTime()
     },
+    toggleOpenClose() {
+      this.explainOpen = !this.explainOpen
+    },
   },
   beforeMount() {
     this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
@@ -75,6 +90,22 @@ export default {
     background-color: #6040c0;
   }
 
+  &__open-close-toggle {
+    float: right;
+    margin: 16px -16px 16px 16px;
+    padding: 12px;
+    border: 1px solid #ffffff;
+    border-radius: 8px;
+    background-color: #402080;
+    font-family: "Wendy One";
+    color: #ffffff;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #6040c0;
+    }
+  }
+
   &__explain {
     margin-bottom: 40px;
     font-size: 24px;