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

bugfix: correct color of edit pencil from red to black

Browse Source
This commit is contained in:
Settel 2022-09-19 12:25:23 +02:00
parent 2241723b7a
commit 8cd29d024d
2 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/assets/icons/edit.svg
View File

@ -62,7 +62,7 @@
/>
<rect
id="rect5338-48"
style="fill:#ff0200"
style="fill:#000000"
transform="matrix(-.26499 -.96425 .70711 -.70711 0 0)"
rx="1.8358"
ry="1.8187"
@ -74,7 +74,7 @@
<rect
id="rect5338-4-2"
ry="1.8187"
style="fill:#ff0200"
style="fill:#000000"
rx="1.377"
transform="rotate(225)"
height="53.819"
@ -84,7 +84,7 @@
/>
<rect
id="rect5338-1-1"
style="fill:#ff0200"
style="fill:#000000"
transform="matrix(.96593 .25882 .70711 -.70711 0 0)"
rx="1.836"
ry="1.8187"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

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

@ -1,8 +1,19 @@
<template>
<div v-if="show" class="quote-explaination-box__container">
<DialogBox :title="$t('how-to-play')" @close="close">
<p>{{ $t('explain-game-p-1') }}</p>
<p>{{ $t('explain-game-p-2') }}</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>
<div class="quote-explaination-box__example">
<div class="quote-explaination-box__example-title">{{ $t('examples') }}</div>
<div class="quote-explaination-box__example-subtitle">{{ $t('click-for-next') }}</div>
</div>
<div class="quote-explaination-box__example-container" @click="showNextExampleQuote">
<transition name="quote-explaination-box__example-container__fade" mode="out-in">
<div class="quote-explaination-box__example-text" :key="quoteNr">
{{ $t(`example-quote-${quoteNr}`) }}
</div>
</transition>
</div>
<template v-slot:footer>
<Button @click="close">{{ $t('dismiss') }}</Button>
</template>
@ -11,7 +22,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onBeforeUnmount } from 'vue'
import useI18n from '@/composables/useI18n'
const { $t } = useI18n({
@ -56,6 +67,21 @@ const { $t } = useI18n({
const show = ref(true)
const close = () => { show.value = false }
const quoteNr = ref(0)
let lastUpdate = new Date().getTime()
const showNextExampleQuote = () => {
quoteNr.value = (quoteNr.value + 1) % 7
lastUpdate = new Date().getTime()
}
const timer = window.setInterval(() => {
if (new Date().getTime() > lastUpdate + 15000) {
showNextExampleQuote()
}
}, 2000)
onBeforeUnmount(() => { window.clearInterval(timer) })
</script>
<style lang="scss">
@ -65,7 +91,47 @@ const close = () => { show.value = false }
&__container {
padding: 16px;
font-family: $font-secondary;
font-size: 18px;
font-size: 24px;
}
&__p {
margin: 0 0 1em 0;
}
&__example {
&-title {
font-size: 24px;
}
&-subtitle {
font-size: 16px;
margin-bottom: 10px;
}
&-container {
height: 3em;
}
&-text {
cursor: pointer;
&:before {
content: '„';
}
&:after {
content: '“';
}
}
}
}
.quote-explaination-box__example-container__fade-enter-active,
.quote-explaination-box__example-container__fade-leave-active {
transition: all 0.4s ease;
}
.quote-explaination-box__example-container__fade-enter-from,
.quote-explaination-box__example-container__fade-leave-to {
opacity: 0;
}
</style>