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