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

collect phase: explain + example

Browse Source
This commit is contained in:
Settel 2021-10-04 13:31:45 +02:00
parent 957ef0f983
commit 892ab0b0cf
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,10 +12,11 @@
Schreibe in 3-5 einzelnen Statements etwas über dich. Schreibe in 3-5 einzelnen Statements etwas über dich.
</p> </p>
</div> </div>
<div class="collect-quotes-explain__example-title"> <div class="collect-quotes-explain__example">
Beispiel: <div class="collect-quotes-explain__example-title">Beispiel</div>
<div class="collect-quotes-explain__example-subtitle">(anklicken für nächstes)</div>
</div> </div>
<div class="collect-quotes-explain__example-container"> <div class="collect-quotes-explain__example-container" @click="showNextExampleQuote">
<transition name="collect-quotes-explain-fade" mode="out-in"> <transition name="collect-quotes-explain-fade" mode="out-in">
<div class="collect-quotes-explain__example-text" :key="quoteNr"> <div class="collect-quotes-explain__example-text" :key="quoteNr">
{{ exampleQuotes[quoteNr] }} {{ exampleQuotes[quoteNr] }}
@ -32,6 +33,7 @@ export default {
data() { data() {
return { return {
quoteNr: 0, quoteNr: 0,
lastUpdate: new Date().getTime(),
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.',
@ -43,11 +45,19 @@ export default {
], ],
} }
}, },
methods: {
showNextExampleQuote() {
this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
this.lastUpdate = new Date().getTime()
},
},
beforeMount() { beforeMount() {
this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length), this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
this.timer = window.setInterval(function() { this.timer = window.setInterval(function() {
this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length if (new Date().getTime() > this.lastUpdate + 15000) {
}.bind(this), 15000) this.showNextExampleQuote()
}
}.bind(this), 2000)
}, },
beforeDestroy() { beforeDestroy() {
window.clearInterval(this.timer) window.clearInterval(this.timer)
@ -57,34 +67,40 @@ export default {
<style lang="scss"> <style lang="scss">
.collect-quotes-explain { .collect-quotes-explain {
&__container { &__container {
margin: 20px 80px; margin: 20px 80px;
padding: 0 20px; padding: 0 40px;
border: 1px solid white; border: 1px solid white;
border-radius: 20px; border-radius: 20px;
background-color: #6040c0; background-color: #6040c0;
} }
&__explain { &__explain {
margin-bottom: 40px;
font-size: 24px; font-size: 24px;
font-family: "Wendy One"; font-family: Dosis;
color: #ffffff; color: #ffffff;
} }
&__example { &__example {
font-family: Dosis;
color: #ffffff;
&-title { &-title {
font-family: "Wendy One"; font-size: 24px;
color: #ffffff; }
&-subtitle {
font-size: 16px;
margin-bottom: 10px;
} }
&-container { &-container {
height: 120px; height: 8em;
} }
&-text { &-text {
font-family: Dosis; font-family: Dosis;
font-size: 24px; font-size: 24px;
color: #ffffff; color: #ffffff;
cursor: pointer;
&:before { &:before {
content: '„'; content: '„';