settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

open/close explain box

Browse Source
This commit is contained in:
Settel 2021-10-15 19:52:55 +02:00
parent 892ab0b0cf
commit 3d4ab372e8
1 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/components/CollectQuotesExplain.vue
View File

@ -1,6 +1,16 @@
<template>
<div class="collect-quotes-explain">
<div class="collect-quotes-explain__container">
<div class="collect-quotes-explain__open-close-toggle" @click="toggleOpenClose">
<span v-if="explainOpen">X</span>
<span v-else>&gt;</span>
</div>
<div v-if="!explainOpen">
<div class="collect-quotes-explain__explain" @click="toggleOpenClose">
<p>Erklärung zum Spiel</p>
</div>
</div>
<div v-if="explainOpen">
<div class="collect-quotes-explain__explain">
<p>
Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
@ -25,6 +35,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
@ -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;