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

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

@ -1,27 +1,38 @@
<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__explain"> <div class="collect-quotes-explain__open-close-toggle" @click="toggleOpenClose">
<p> <span v-if="explainOpen">X</span>
Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den <span v-else>&gt;</span>
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>
<div class="collect-quotes-explain__example"> <div v-if="!explainOpen">
<div class="collect-quotes-explain__example-title">Beispiel</div> <div class="collect-quotes-explain__explain" @click="toggleOpenClose">
<div class="collect-quotes-explain__example-subtitle">(anklicken für nächstes)</div> <p>Erklärung zum Spiel</p>
</div>
</div> </div>
<div class="collect-quotes-explain__example-container" @click="showNextExampleQuote"> <div v-if="explainOpen">
<transition name="collect-quotes-explain-fade" mode="out-in"> <div class="collect-quotes-explain__explain">
<div class="collect-quotes-explain__example-text" :key="quoteNr"> <p>
{{ exampleQuotes[quoteNr] }} Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
</div> Mitspielenden Statements gesammelt. In der zweiten Phase versucht
</transition> 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> </div>
</div> </div>
@ -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;