From 5eb7a5159835c5ed62832c9e82cf2ea07e4599be Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Sun, 17 Mar 2024 00:50:59 +0100
Subject: [PATCH] (de)(pronouns) shorten table headers on smaller screen sizes

---
 locale/de/pronouns/GrammarTables.vue | 117 ++++++++++++++++++++++-----
 1 file changed, 97 insertions(+), 20 deletions(-)

diff --git a/locale/de/pronouns/GrammarTables.vue b/locale/de/pronouns/GrammarTables.vue
index 248eda5ae..ccad6c6c4 100644
--- a/locale/de/pronouns/GrammarTables.vue
+++ b/locale/de/pronouns/GrammarTables.vue
@@ -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 };