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

(de)(pronouns) shorten table headers on smaller screen sizes

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-03-17 00:50:59 +01:00
parent 1fdd2cfa6b
commit 5eb7a51598
1 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
locale/de/pronouns/GrammarTables.vue
View File

@ -9,20 +9,38 @@
<thead>
<tr>
<th v-if="grammarTable.rowHeaderCount" :colspan="grammarTable.rowHeaderCount"></th>
<th v-for="name in grammarTable.columnHeader" :key="name">
<Spelling :text="name" />
<th v-for="header in grammarTable.columnHeader" :key="header.name">
<Spelling class="d-none d-md-inline" :text="header.name" />
<Tooltip class="d-md-none" :text="header.name">
<Spelling :text="header.short" />
</Tooltip>
</th>
</tr>
</thead>
<tbody>
<template v-for="section in grammarTable.sections">
<tr v-for="[i, variant] in section.variants.entries()" :key="`${section.name}-${variant.name}`">
<tr
v-for="[i, variant] in section.variants.entries()"
:key="`${section.header?.name}-${variant.name}`"
>
<th v-if="i === 0 && grammarTable.rowHeaderCount >= 1" :rowspan="section.variants.length">
<Spelling :text="section.name" />
</th>
<th v-if="grammarTable.rowHeaderCount >= 2">
<Spelling :text="variant.name" />
<template v-if="section.header">
<Spelling class="d-none d-md-inline" :text="section.header.name" />
<Tooltip class="d-md-none" :text="section.header.name">
<Spelling :text="section.header.short" />
</Tooltip>
</template>
</th>
<template v-if="grammarTable.rowHeaderCount >= 2">
<th class="pe-0">
<Tooltip v-if="variant.name" :text="variant.name">
<Icon :v="variant.icon" />
</Tooltip>
</th>
<th class="ps-0">
<Spelling class="d-none d-md-inline" :text="variant.name" />
</th>
</template>
<td v-for="morpheme in variant.morphemes" :key="morpheme">
<MorphemeWithPronunciation
:pronoun="selectedPronoun"
@ -47,31 +65,56 @@ const cases = ['n', 'g', 'd', 'a'];
const genders = [
{
name: 'Femininum',
icon: 'venus',
abbreviation: 'f',
},
{
name: 'Maskulinum',
icon: 'mars',
abbreviation: 'm',
},
{
name: 'Neutrum',
icon: 'neuter',
abbreviation: 'n',
},
];
interface GrammarTableDefinition {
columnHeader: string[];
columnHeader: Header[];
sections: SectionDefinition[];
}
interface Header {
name: string;
short: string;
}
interface SectionDefinition {
name?: string;
header?: Header;
morphemes: string[] | { base: string, type: string };
}
const grammarTableDefinitions: Record<'simple' | 'comprehensive', GrammarTableDefinition> = {
simple: {
columnHeader: ['Nominativ', 'Possessivartikel', 'Dativ', 'Akkusativ'],
columnHeader: [
{
name: 'Nominativ',
short: 'N',
},
{
name: 'Possessivartikel',
short: 'P',
},
{
name: 'Dativ',
short: 'D',
},
{
name: 'Akkusativ',
short: 'A',
},
],
sections: [
{
morphemes: ['pronoun_n', 'possessive_m_n', 'pronoun_d', 'pronoun_a'],
@ -79,31 +122,60 @@ const grammarTableDefinitions: Record<'simple' | 'comprehensive', GrammarTableDe
],
},
comprehensive: {
columnHeader: ['Nominativ', 'Genitiv', 'Dativ', 'Akkusativ'],
columnHeader: [
{
name: 'Nominativ',
short: 'N',
},
{
name: 'Genitiv',
short: 'G',
},
{
name: 'Dativ',
short: 'D',
},
{
name: 'Akkusativ',
short: 'A',
},
],
sections: [
{
name: 'Personalpronomen',
header: {
name: 'Personalpronomen',
short: 'Personalp.',
},
morphemes: {
base: 'pronoun',
type: 'case',
},
},
{
name: 'Possessivartikel',
header: {
name: 'Possessivartikel',
short: 'Possessivart.',
},
morphemes: {
base: 'possessive',
type: 'gender-with-case',
},
},
{
name: 'Relativpronomen',
header: {
name: 'Relativpronomen',
short: 'Relativp.',
},
morphemes: {
base: 'relative',
type: 'case',
},
},
{
name: 'Demonstrativpronomen',
header: {
name: 'Demonstrativpronomen',
short: 'Demonstrativp.',
},
morphemes: {
base: 'demonstrative',
type: 'case',
@ -118,18 +190,19 @@ const morphemesByCase = (morphemeBase: string): string[] => {
};
interface GrammarTable {
columnHeader: string[];
columnHeader: Header[];
rowHeaderCount: number;
sections: Section[];
}
interface Section {
name?: string;
header?: Header;
variants: PronounVariant[];
}
interface PronounVariant {
name?: string;
icon?: string;
morphemes: string[];
}
@ -144,6 +217,7 @@ const expandMorphemesForSection = (sectionMorphemes: SectionDefinition['morpheme
case 'gender-with-case':
return genders.map((gender) => ({
name: gender.name,
icon: gender.icon,
morphemes: morphemesByCase(`${morphemeBase}_${gender.abbreviation}`),
}));
default:
@ -173,17 +247,20 @@ export default Vue.extend({
const grammarTableDefinition = grammarTableDefinitions[this.comprehensive ? 'comprehensive' : 'simple'];
const sections = grammarTableDefinition.sections.map((section) => {
const variants = buildVariantsForSection(section.morphemes, this.selectedPronoun, this.counter);
return { name: section.name, variants };
return { header: section.header, variants };
}).filter((section) => {
return section.variants.length > 0;
});
const rowHeaderCount = Math.max(...sections.map((section) => {
if (!section.name) {
if (!section.header) {
// no row headers at all
return 0;
} else if (!section.variants.some((variant) => variant.name)) {
// all row headers have no variants
return 1;
} else {
return 2;
// some row headers have variants, needing a column for the icons and for the text
return 3;
}
}));
return { columnHeader: grammarTableDefinition.columnHeader, sections, rowHeaderCount };