From 61514f1234daaa299179d72c41452fd4667e46cb Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Fri, 23 Sep 2022 18:24:02 +0200
Subject: [PATCH] feat: expand/hide explaination box

---
 client/src/components/QuoteExplainationBox.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/components/QuoteExplainationBox.vue b/client/src/components/QuoteExplainationBox.vue
index 5c4a8f4..ca3f2c5 100644
--- a/client/src/components/QuoteExplainationBox.vue
+++ b/client/src/components/QuoteExplainationBox.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="expandExplanationBox" class="quote-explaination-box__container">
-    <DialogBox :title="$t('how-to-play')" @close="close">
+  <div class="quote-explaination-box__container">
+    <DialogBox v-if="expandExplanationBox" :title="$t('how-to-play')" @close="close">
       <p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p>
       <p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p>
       <div class="quote-explaination-box__example">
@@ -18,6 +18,9 @@
         <Button @click="close">{{ $t('dismiss') }}</Button>
       </template>
     </DialogBox>
+    <div v-else class="quote-explaination-box__container-small" @click="expand">
+      ⓘ {{ $t('how-to-play') }}
+    </div>
   </div>
 </template>
 
@@ -71,6 +74,7 @@ const { $t } = useI18n({
 
 const expandExplanationBox = ref(props.expand)
 const close = () => { expandExplanationBox.value = false }
+const expand = () => { expandExplanationBox.value = true }
 
 const quoteNr = ref(0)
 let lastUpdate = new Date().getTime()
@@ -129,6 +133,15 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
     }
   }
 
+  &__container-small {
+    color: darken($text-primary-color, 20%);
+    cursor: pointer;
+
+    &:hover {
+      color: $text-primary-color;
+    }
+  }
+
 }
 .quote-explaination-box__example-container__fade-enter-active,
 .quote-explaination-box__example-container__fade-leave-active {