update
This commit is contained in:
polv committed
1 parent
ffbe5fed18
commit
b32007acd1
6 files changed
+939
-55
No files matched your search
@@ -0,0 +1,837 @@
|
||||
<template>
|
||||
<b-modal class="quiz-modal" :active.sync="isQuizModal" @close="endQuiz">
|
||||
<div class="card">
|
||||
<div v-if="current.id" class="card-content">
|
||||
<div
|
||||
v-show="!isQuizShownAnswer"
|
||||
class="content hover-parent"
|
||||
style="cursor: pointer"
|
||||
@click="addHint"
|
||||
>
|
||||
<div v-if="current.type === 'character'">
|
||||
<div v-if="current.direction === 'ec'">
|
||||
<h4>Hanzi English-Chinese</h4>
|
||||
|
||||
<div
|
||||
v-html="
|
||||
doMask((current.english || []).join(' / '), current.entry)
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h4>Hanzi Chinese-English</h4>
|
||||
<div
|
||||
class="font-han text-w-normal hanzi-display"
|
||||
style="text-align: center"
|
||||
>
|
||||
{{ current.entry }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="current.type === 'vocabulary'">
|
||||
<div v-if="current.direction === 'ec'">
|
||||
<h4>Vocab English-Chinese</h4>
|
||||
|
||||
<ul v-if="Array.isArray(current.english)">
|
||||
<li
|
||||
v-for="(it, i) in current.english"
|
||||
:key="i"
|
||||
v-html="
|
||||
doMask(
|
||||
it,
|
||||
current.entry,
|
||||
...(current.reading || []),
|
||||
...(current.alt || [])
|
||||
)
|
||||
"
|
||||
></li>
|
||||
</ul>
|
||||
|
||||
<div
|
||||
v-else
|
||||
v-html="
|
||||
doMask(
|
||||
(current.english || []).join(' / '),
|
||||
current.entry,
|
||||
...(current.reading || []),
|
||||
...(current.alt || [])
|
||||
)
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h4 v-if="current.direction === 'te'">
|
||||
Vocabulary Traditional-English
|
||||
</h4>
|
||||
<h4 v-else>Vocab Simplified-English</h4>
|
||||
|
||||
<div class="font-zh-simp text-w-normal" style="font-size: 2rem">
|
||||
{{ current.entry }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-if="current.direction === 'ec'">
|
||||
<h4>Sentence English-Chinese</h4>
|
||||
|
||||
<ul>
|
||||
<li v-for="(e, i) in current.english" :key="i">
|
||||
{{ e }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h4>Sentence Chinese-English</h4>
|
||||
|
||||
<h2 class="font-zh-simp text-w-normal">
|
||||
{{ current.entry }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mb-4 hover-child">
|
||||
<small>
|
||||
{{ current.hint || 'Click to add hint' }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isQuizShownAnswer" class="content">
|
||||
<div v-if="current.type === 'character'">
|
||||
<div
|
||||
class="hanzi-display has-context font-han"
|
||||
@click="openContext"
|
||||
@contextmenu.prevent="openContext"
|
||||
style="text-align: center"
|
||||
>
|
||||
{{ current.entry }}
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-bottom: 1rem">
|
||||
{{ (current.reading || []).join(' | ') }}
|
||||
</div>
|
||||
|
||||
<div style="text-align: center">
|
||||
{{ (current.english || []).join(' / ') }}
|
||||
</div>
|
||||
|
||||
<ul v-if="getSentenceByCharacter(current.entry).length">
|
||||
<li
|
||||
v-for="(it, i) in getSentenceByCharacter(current.entry)"
|
||||
:key="i"
|
||||
>
|
||||
<span
|
||||
class="has-context"
|
||||
:title="it.reading[0]"
|
||||
@click="(ev) => openContext(ev, it.entry, 'sentence')"
|
||||
@contextmenu.prevent="
|
||||
(ev) => openContext(ev, it.entry, 'sentence')
|
||||
"
|
||||
>
|
||||
{{ it.entry }}
|
||||
</span>
|
||||
<ul>
|
||||
<li v-for="(e, j) in it.english" :key="j" class="english">
|
||||
{{ e }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-else-if="current.type === 'vocabulary'">
|
||||
<div
|
||||
class="font-zh-simp text-w-normal has-context"
|
||||
style="font-size: 2rem"
|
||||
@click="openContext"
|
||||
@contextmenu.prevent="openContext"
|
||||
>
|
||||
{{ current.simplified }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="current.alt && current.alt.length"
|
||||
class="font-zh-trad text-w-normal"
|
||||
style="font-size: 1.7rem"
|
||||
>
|
||||
<span
|
||||
v-for="(it, i) in current.alt"
|
||||
:key="i"
|
||||
class="traditional has-context"
|
||||
@click="(ev) => openContext(ev, it)"
|
||||
@contextmenu.prevent="(ev) => openContext(ev, it)"
|
||||
>
|
||||
{{ it }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ (current.reading || []).join(' | ') }}
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="(it, i) in current.english" :key="i">
|
||||
{{ it }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="current.sentences.length"
|
||||
:key="dictionaryData.sentence.length"
|
||||
>
|
||||
<li
|
||||
v-for="(it, i) in current.sentences"
|
||||
:key="i"
|
||||
class="sentence"
|
||||
>
|
||||
<span
|
||||
class="has-context"
|
||||
:title="dictionaryData.sentence[it].reading[0]"
|
||||
@click="(ev) => openContext(ev, it, 'sentence')"
|
||||
@contextmenu.prevent="(ev) => openContext(ev, it, 'sentence')"
|
||||
>
|
||||
{{ it }}
|
||||
</span>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(e, j) in dictionaryData.sentence[it].english"
|
||||
:key="j"
|
||||
class="english"
|
||||
>
|
||||
{{ e }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<h2
|
||||
class="font-zh-simp text-w-normal has-context"
|
||||
:title="(current.reading || [])[0]"
|
||||
@click="openContext"
|
||||
@contextmenu.prevent="openContext"
|
||||
>
|
||||
{{ current.entry }}
|
||||
</h2>
|
||||
|
||||
<ul v-if="current.english.length">
|
||||
<li v-for="(it, i) in current.english" :key="i">
|
||||
{{ it }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul v-if="current.vocabulary.length">
|
||||
<li v-for="(it, i) in current.vocabulary" :key="i">
|
||||
<span
|
||||
class="has-context"
|
||||
@click="(ev) => openContext(ev, it.entry, 'vocabulary')"
|
||||
@contextmenu.prevent="
|
||||
(ev) => openContext(ev, it.entry, 'vocabulary')
|
||||
"
|
||||
>
|
||||
{{ it.entry }}
|
||||
</span>
|
||||
<span>[{{ it.reading.join(' | ') }}]</span>
|
||||
<span>
|
||||
{{ it.english.join(' / ') }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="has-context mt-4 mb-4" @click="addMnemonic">
|
||||
<small>
|
||||
{{ current.mnemonic || 'Click to add mnemonic' }}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div v-if="current.tag && current.tag.length" class="mb-4">
|
||||
Tags:
|
||||
<b-taglist style="display: inline-flex">
|
||||
<b-tag
|
||||
v-for="t in current.tag.slice(0, 5)"
|
||||
:key="t"
|
||||
type="is-info"
|
||||
>
|
||||
{{ t }}
|
||||
</b-tag>
|
||||
</b-taglist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons-area">
|
||||
<div v-if="quizIndex >= quizArray.length" class="buttons">
|
||||
<button
|
||||
ref="btnEndQuiz"
|
||||
class="button is-warning"
|
||||
@click="endQuiz"
|
||||
@keypress="endQuiz"
|
||||
>
|
||||
End quiz
|
||||
</button>
|
||||
</div>
|
||||
<div v-else-if="!isQuizShownAnswer" class="buttons">
|
||||
<button
|
||||
ref="btnShowAnswer"
|
||||
class="button is-warning"
|
||||
@click="isQuizShownAnswer = true"
|
||||
@keypress="isQuizShownAnswer = true"
|
||||
>
|
||||
Show answer
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="buttons-panel">
|
||||
<div class="buttons">
|
||||
<button
|
||||
ref="btnMarkRight"
|
||||
class="button is-success"
|
||||
@click="doMark('right')"
|
||||
@keypress="doMark('right')"
|
||||
>
|
||||
Right
|
||||
</button>
|
||||
<button
|
||||
ref="btnMarkWrong"
|
||||
class="button is-danger"
|
||||
@click="doMark('wrong')"
|
||||
@keypress="doMark('wrong')"
|
||||
>
|
||||
Wrong
|
||||
</button>
|
||||
<button
|
||||
ref="btnMarkRepeat"
|
||||
class="button is-warning"
|
||||
@click="doMark('repeat')"
|
||||
@keypress="doMark('repeat')"
|
||||
>
|
||||
Repeat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button
|
||||
ref="btnHideAnswer"
|
||||
class="button is-warning"
|
||||
@click="isQuizShownAnswer = false"
|
||||
@keypress="isQuizShownAnswer = false"
|
||||
>
|
||||
Hide answer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContextMenu ref="context" :entry="ctxEntry" :type="ctxType" />
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
|
||||
import { api, IEntry, IQuiz } from '~/assets/api'
|
||||
import { shuffle } from '~/assets/util'
|
||||
import ContextMenu from '../ContextMenu.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
ContextMenu,
|
||||
},
|
||||
})
|
||||
export default class QuizCard extends Vue {
|
||||
@Prop({ required: true }) quizArray!: string[]
|
||||
|
||||
@Ref() context!: ContextMenu
|
||||
|
||||
ctxEntry = ''
|
||||
ctxType = ''
|
||||
|
||||
isQuizShownAnswer = false
|
||||
isQuizModal = false
|
||||
quizIndex = -1
|
||||
|
||||
quizData: {
|
||||
[quizId: string]: IQuiz
|
||||
} = {}
|
||||
|
||||
dictionaryData = {
|
||||
character: {} as Record<string, IEntry>,
|
||||
vocabulary: {} as Record<
|
||||
string,
|
||||
IEntry & {
|
||||
sentence_set: Record<string, boolean>
|
||||
}
|
||||
>,
|
||||
sentence: {} as Record<
|
||||
string,
|
||||
IEntry & {
|
||||
vocabulary_set: Record<string, boolean>
|
||||
}
|
||||
>,
|
||||
}
|
||||
|
||||
get current() {
|
||||
const it = this.quizData[this.quizArray[this.quizIndex]!]
|
||||
|
||||
if (!it || !it.type || !it.entry) {
|
||||
return {} as Partial<IQuiz>
|
||||
}
|
||||
|
||||
return {
|
||||
...it,
|
||||
...this.dictionaryData[it.type][it.entry],
|
||||
}
|
||||
}
|
||||
|
||||
fromCharacter(c: string, type: 'vocabulary' | 'sentence') {
|
||||
return shuffle(
|
||||
Object.entries(this.dictionaryData[type]).filter(([entry]) =>
|
||||
entry.includes(c)
|
||||
)
|
||||
)
|
||||
.slice(0, 5)
|
||||
.map(([entry, v]) => ({
|
||||
...v,
|
||||
entry,
|
||||
}))
|
||||
}
|
||||
|
||||
async startQuiz() {
|
||||
this.quizIndex = -1
|
||||
await this.initNextQuizItem()
|
||||
}
|
||||
|
||||
endQuiz() {
|
||||
this.isQuizModal = false
|
||||
this.$emit('quiz:ended')
|
||||
}
|
||||
|
||||
async doMark(type: 'right' | 'wrong' | 'repeat') {
|
||||
const id = this.quizArray[this.quizIndex] as string | undefined
|
||||
|
||||
if (id) {
|
||||
api.quiz_updateSrsLevel({
|
||||
id,
|
||||
df: {
|
||||
right: 1,
|
||||
wrong: -1,
|
||||
repeat: 0,
|
||||
}[type],
|
||||
})
|
||||
}
|
||||
this.initNextQuizItem()
|
||||
}
|
||||
|
||||
async initNextQuizItem() {
|
||||
this.isQuizShownAnswer = false
|
||||
|
||||
Array(2)
|
||||
.fill(null)
|
||||
.map((_, i) => {
|
||||
const front = this.checkFront(i + 1)
|
||||
|
||||
if (!front) {
|
||||
this.cacheQuizItem({
|
||||
relativePosition: i + 1,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (this.quizArray[this.quizIndex + 1]) {
|
||||
await this.cacheQuizItem({ relativePosition: 0 })
|
||||
}
|
||||
|
||||
let it: IQuiz | undefined
|
||||
while (true) {
|
||||
it = this.quizData[this.quizArray[++this.quizIndex]!]
|
||||
|
||||
if (it && it.entry && it.type) {
|
||||
break
|
||||
}
|
||||
|
||||
if (this.quizIndex >= this.quizArray.length) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
this.isQuizModal = true
|
||||
}
|
||||
|
||||
checkFront(relativePosition: number): boolean {
|
||||
relativePosition++
|
||||
const it = this.quizData[this.quizArray[this.quizIndex + relativePosition]!]
|
||||
|
||||
if (!it) {
|
||||
return false
|
||||
}
|
||||
|
||||
const { entry, type, direction } = it
|
||||
|
||||
if (!entry || !type || !direction) {
|
||||
return false
|
||||
}
|
||||
|
||||
return !!this.dictionaryData[type][entry]
|
||||
}
|
||||
|
||||
openContext(ev: MouseEvent, entry?: string, type?: string) {
|
||||
this.ctxEntry = entry || this.current.entry || ''
|
||||
this.ctxType = type || this.current.type || ''
|
||||
|
||||
this.context.open(ev)
|
||||
}
|
||||
|
||||
doMask(s = '', ...ws: string[]) {
|
||||
ws.map((w) => {
|
||||
s = s.replace(
|
||||
new RegExp(
|
||||
`(^| |[^a-z])(${w
|
||||
.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
||||
.replace(/\d/g, '\\d?')
|
||||
.replace(/\s+/g, '\\s*')})($| |[^a-z])`,
|
||||
'gi'
|
||||
),
|
||||
'$1<span class="gray-box">$2</span>$3'
|
||||
)
|
||||
})
|
||||
|
||||
return s
|
||||
}
|
||||
|
||||
async cacheQuizItem(params: { quizId?: string; relativePosition?: number }) {
|
||||
let { relativePosition = 0 } = params
|
||||
relativePosition++
|
||||
|
||||
let { quizId } = params
|
||||
quizId = quizId || this.quizArray[this.quizIndex + relativePosition]
|
||||
|
||||
if (!quizId) {
|
||||
return
|
||||
}
|
||||
|
||||
let q = this.quizData[quizId]
|
||||
if (!q || !q.entry || !q.type || !q.direction) {
|
||||
const r = await api.quiz_getById({
|
||||
id: quizId,
|
||||
})
|
||||
|
||||
if (r) {
|
||||
if (q) {
|
||||
Object.assign(q, r)
|
||||
} else {
|
||||
q = {
|
||||
...r,
|
||||
id: quizId,
|
||||
type: r.type,
|
||||
}
|
||||
}
|
||||
|
||||
q.id = quizId
|
||||
q.type = q.type
|
||||
q.entry = q.entry as string
|
||||
|
||||
this.$set(this.quizData, quizId, q)
|
||||
}
|
||||
}
|
||||
|
||||
const type = q?.type
|
||||
const entry = q?.entry
|
||||
|
||||
if (!entry || !type) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.dictionaryData[type][entry]) {
|
||||
const {
|
||||
result: [r],
|
||||
} = await api.all_getLookup({
|
||||
entry,
|
||||
type,
|
||||
limit: 1,
|
||||
forced: true,
|
||||
})
|
||||
|
||||
this.dictionaryData[type][entry] = r!
|
||||
this.$set(this.dictionaryData, type, this.dictionaryData[type])
|
||||
}
|
||||
|
||||
if (type === 'character') {
|
||||
await Promise.allSettled([
|
||||
(async () => {
|
||||
const subtype = 'vocabulary'
|
||||
|
||||
if (this.fromCharacter(entry, subtype).length < 5) {
|
||||
const { result } = await api.character_getVocabulary({ entry })
|
||||
result.map((r) => {
|
||||
if (this.dictionaryData[subtype][r.list[0]!]) {
|
||||
return
|
||||
}
|
||||
|
||||
this.dictionaryData[subtype][r.list[0]!] = {
|
||||
...r,
|
||||
sentence_set: {},
|
||||
}
|
||||
})
|
||||
|
||||
this.$set(
|
||||
this.dictionaryData,
|
||||
subtype,
|
||||
this.dictionaryData[subtype]
|
||||
)
|
||||
}
|
||||
})(),
|
||||
(async () => {
|
||||
const subtype = 'sentence'
|
||||
|
||||
if (this.fromCharacter(entry, subtype).length < 5) {
|
||||
const { result } = await api.character_getSentence({ entry })
|
||||
result.map((r) => {
|
||||
if (this.dictionaryData[subtype][r.list[0]!]) {
|
||||
return
|
||||
}
|
||||
|
||||
this.dictionaryData[subtype][r.list[0]!] = {
|
||||
...r,
|
||||
vocabulary_set: {},
|
||||
}
|
||||
})
|
||||
|
||||
this.$set(
|
||||
this.dictionaryData,
|
||||
subtype,
|
||||
this.dictionaryData[subtype]
|
||||
)
|
||||
}
|
||||
})(),
|
||||
])
|
||||
} else if (type === 'vocabulary') {
|
||||
if (
|
||||
Object.keys(this.dictionaryData[type][entry]!.sentence_set).length < 5
|
||||
) {
|
||||
const subtype = 'sentence'
|
||||
|
||||
const { result } = await api.vocabulary_getSentence({ entry })
|
||||
result.map((r) => {
|
||||
if (this.dictionaryData[subtype][r.list[0]!]) {
|
||||
return
|
||||
}
|
||||
|
||||
this.dictionaryData[subtype][r.list[0]!] = {
|
||||
...r,
|
||||
vocabulary_set: {},
|
||||
}
|
||||
})
|
||||
this.dictionaryData[type][entry]!.sentence_set = result.reduce(
|
||||
(prev, c) => ({
|
||||
...prev,
|
||||
[c.list[0]!]: true,
|
||||
}),
|
||||
{} as Record<string, boolean>
|
||||
)
|
||||
|
||||
this.$set(this.dictionaryData, type, this.dictionaryData[type])
|
||||
this.$set(this.dictionaryData, subtype, this.dictionaryData[subtype])
|
||||
}
|
||||
} else if (type === 'sentence') {
|
||||
if (
|
||||
!Object.keys(this.dictionaryData[type][entry]!.vocabulary_set).length
|
||||
) {
|
||||
const subtype = 'vocabulary'
|
||||
|
||||
const { result: tokens } = await api.all_tokenize({ entry })
|
||||
|
||||
await Promise.allSettled(
|
||||
tokens.map(async (entry) => {
|
||||
if (this.dictionaryData[subtype][entry]) {
|
||||
return
|
||||
}
|
||||
|
||||
const {
|
||||
result: [r],
|
||||
} = await api.all_getLookup({
|
||||
entry,
|
||||
type: subtype,
|
||||
limit: 1,
|
||||
forced: true,
|
||||
})
|
||||
|
||||
this.dictionaryData[subtype][entry] = {
|
||||
...r!,
|
||||
sentence_set: {},
|
||||
}
|
||||
this.$set(
|
||||
this.dictionaryData,
|
||||
subtype,
|
||||
this.dictionaryData[subtype]
|
||||
)
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addHint() {
|
||||
const i = this.quizArray[this.quizIndex]
|
||||
const it = this.quizData[i!]
|
||||
|
||||
if (!it) return
|
||||
|
||||
this.$buefy.dialog.prompt({
|
||||
message: 'Hint',
|
||||
inputAttrs: {
|
||||
value: it.hint,
|
||||
},
|
||||
trapFocus: true,
|
||||
onConfirm: async (hint) => {
|
||||
await api.quiz_update({ hint, id: it.id })
|
||||
it.hint = hint
|
||||
this.$set(this.quizData, i!, it)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
addMnemonic() {
|
||||
const i = this.quizArray[this.quizIndex]
|
||||
const it = this.quizData[i!]
|
||||
|
||||
if (!it) return
|
||||
|
||||
this.$buefy.dialog.prompt({
|
||||
message: 'Mnemonic',
|
||||
inputAttrs: {
|
||||
value: it.mnemonic,
|
||||
},
|
||||
trapFocus: true,
|
||||
onConfirm: async (mnemonic) => {
|
||||
await api.quiz_update({ mnemonic, id: it.id })
|
||||
it.mnemonic = mnemonic
|
||||
this.$set(this.quizData, i!, it)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.has-context {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hover-parent:hover .hover-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.traditional {
|
||||
& + &::before {
|
||||
content: ' | ';
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.quiz-modal .modal-content {
|
||||
max-width: 500px !important;
|
||||
}
|
||||
|
||||
.quiz-modal .buttons-area {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buttons-area .buttons {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.quiz-modal .card-content {
|
||||
min-height: 7.5rem;
|
||||
max-height: calc(100vh - 300px);
|
||||
overflow: scroll;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
border-bottom: 1px solid hsla(0, 0%, 50%, 0.25);
|
||||
|
||||
scrollbar-width: none; /* For Firefox */
|
||||
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px; /* For Chrome, Safari, and Opera */
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buttons-panel .buttons {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.buttons-area button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
visibility: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.buttons-area button:not(:active)::before {
|
||||
animation: ripple 0.4s cubic-bezier(0, 0, 0.2, 1);
|
||||
transition: visibility 0.4s step-end;
|
||||
}
|
||||
|
||||
.buttons-area button:active::before {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.edit-modal .card-footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sentence {
|
||||
li.english {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover li.english {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user