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> <template>
<div class="collect-quotes-explain"> <div class="collect-quotes-explain">
<div class="collect-quotes-explain__container"> <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"> <div class="collect-quotes-explain__explain">
<p> <p>
Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
@ -25,6 +35,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -34,6 +45,7 @@ export default {
return { return {
quoteNr: 0, quoteNr: 0,
lastUpdate: new Date().getTime(), lastUpdate: new Date().getTime(),
explainOpen: true,
exampleQuotes: [ exampleQuotes: [
'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.', '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.', '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.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
this.lastUpdate = new Date().getTime() this.lastUpdate = new Date().getTime()
}, },
toggleOpenClose() {
this.explainOpen = !this.explainOpen
},
}, },
beforeMount() { beforeMount() {
this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length), this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
@ -75,6 +90,22 @@ export default {
background-color: #6040c0; 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 { &__explain {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 24px; font-size: 24px;