TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-26 14:32:04 -04:00
Code Issues Packages Projects Releases Wiki Activity

[nouns] fix declension messing up layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/Declension.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<span> <span class="position-relative">
<template v-if="declensionTemplate"> <template v-if="declensionTemplate">
<a v-if="!open" href="#" @click.prevent="visible = !visible">{{ word }}</a> <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-2 border']"> <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"> <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(' / ') }} <strong>{{c}} <small v-if="!condense">({{cases[c]}})</small></strong> {{ declined.join(' / ') }}
</li> </li>
<li v-if="tooltip" class="close"><a href="#" @click.prevent="visible = false"><Icon v="times"/></a></li>
</ul> </ul>
</template> </template>
<template v-else>{{ word }}</template> <template v-else>{{ word }}</template>
@ -24,6 +25,7 @@
template: { }, template: { },
open: { type: Boolean }, open: { type: Boolean },
condense: { type: Boolean }, condense: { type: Boolean },
tooltip: { type: Boolean },
}, },
data() { data() {
return { return {
@ -68,3 +70,17 @@
}, },
}; };
</script> </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>

4
components/Dictionary.vue
View File

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