[nouns] fix declension messing up layout

This commit is contained in:
Andrea Vos 2021-07-10 13:18:22 +02:00
parent 5f2e5f35b5
commit 5e042fdfd1
2 changed files with 21 additions and 5 deletions

View File

@ -1,11 +1,12 @@
<template>
<span>
<span class="position-relative">
<template v-if="declensionTemplate">
<a v-if="!open" href="#" @click.prevent="visible = !visible">{{ word }}</a>
<ul v-if="visible" :class="['list-unstyled', 'small', open ? '' : 'm-2 p-2 border']">
<a v-if="!open" href="#" @click.prevent="visible = !visible" :class="tooltip && visible ? 'fw-bold' : ''">{{ word }}</a>
<ul v-if="visible" :class="['list-unstyled', 'small', open ? '' : 'm-2 p-3 pe-5 border bg-light', tooltip ? 'tooltip' : '']">
<li v-for="(declined, c) in declensionTemplate.decline(word, plural)" class="text-nowrap">
<strong>{{c}} <small v-if="!condense">({{cases[c]}})</small></strong> {{ declined.join(' / ') }}
</li>
<li v-if="tooltip" class="close"><a href="#" @click.prevent="visible = false"><Icon v="times"/></a></li>
</ul>
</template>
<template v-else>{{ word }}</template>
@ -24,6 +25,7 @@
template: { },
open: { type: Boolean },
condense: { type: Boolean },
tooltip: { type: Boolean },
},
data() {
return {
@ -68,3 +70,17 @@
},
};
</script>
<style lang="scss" scoped>
ul.tooltip {
position: absolute;
top: 1rem;
left: 0;
z-index: 999;
li.close {
position: absolute;
top: 1rem;
right: 1rem;
}
}
</style>

View File

@ -100,14 +100,14 @@
<td>
<ul class="list-singular">
<li v-for="w in s.el.neutr">
<Declension v-if="config.nouns.declension" :word="w"/>
<Declension v-if="config.nouns.declension" :word="w" tooltip/>
<template v-else><Spelling :text="w"/></template>
<a :href="`/api/nouns/${w}.png`" target="_blank" rel="noopener"><Icon v="image"/></a>
</li>
</ul>
<ul v-if="config.nouns.plurals" class="list-plural">
<li v-for="w in s.el.neutrPl">
<Declension v-if="config.nouns.declension" :word="w" plural :singularOptions="s.el.neutr"/>
<Declension v-if="config.nouns.declension" :word="w" plural :singularOptions="s.el.neutr" tooltip/>
<template v-else><Spelling :text="w"/></template>
<a :href="`/api/nouns/${w}.png`" target="_blank" rel="noopener"><Icon v="image"/></a>
</li>