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

feat: expand/hide explaination box

Browse Source
This commit is contained in:
Settel 2022-09-23 18:24:02 +02:00
parent 57dfa90b65
commit 61514f1234
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/QuoteExplainationBox.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-if="expandExplanationBox" class="quote-explaination-box__container"> <div class="quote-explaination-box__container">
<DialogBox :title="$t('how-to-play')" @close="close"> <DialogBox v-if="expandExplanationBox" :title="$t('how-to-play')" @close="close">
<p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p> <p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p>
<p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p> <p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p>
<div class="quote-explaination-box__example"> <div class="quote-explaination-box__example">
@ -18,6 +18,9 @@
<Button @click="close">{{ $t('dismiss') }}</Button> <Button @click="close">{{ $t('dismiss') }}</Button>
</template> </template>
</DialogBox> </DialogBox>
<div v-else class="quote-explaination-box__container-small" @click="expand">
ⓘ {{ $t('how-to-play') }}
</div>
</div> </div>
</template> </template>
@ -71,6 +74,7 @@ const { $t } = useI18n({
const expandExplanationBox = ref(props.expand) const expandExplanationBox = ref(props.expand)
const close = () => { expandExplanationBox.value = false } const close = () => { expandExplanationBox.value = false }
const expand = () => { expandExplanationBox.value = true }
const quoteNr = ref(0) const quoteNr = ref(0)
let lastUpdate = new Date().getTime() let lastUpdate = new Date().getTime()
@ -129,6 +133,15 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
} }
} }
&__container-small {
color: darken($text-primary-color, 20%);
cursor: pointer;
&:hover {
color: $text-primary-color;
}
}
} }
.quote-explaination-box__example-container__fade-enter-active, .quote-explaination-box__example-container__fade-enter-active,
.quote-explaination-box__example-container__fade-leave-active { .quote-explaination-box__example-container__fade-leave-active {