From 271bca5c6a0b35d8ee8b04dbb8cd1e41f9f1fa15 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Sat, 15 Jun 2024 12:09:49 +0200
Subject: [PATCH] (nouns) make submit form more responsive to smaller screen
 sizes

---
 components/Dictionary.vue         | 17 ++-----
 components/NounGenderLabel.vue    | 36 +++++++++++++++
 components/NounSubmitForm.vue     | 76 ++++++++++---------------------
 components/NounTemplatesTable.vue | 20 ++++----
 4 files changed, 74 insertions(+), 75 deletions(-)
 create mode 100644 components/NounGenderLabel.vue

diff --git a/components/Dictionary.vue b/components/Dictionary.vue
index 4f0359472..276dc6b19 100644
--- a/components/Dictionary.vue
+++ b/components/Dictionary.vue
@@ -25,17 +25,8 @@
 
         <Table ref="dictionarytable" :data="visibleNouns()" :columns="3" :marked="/* @ts-ignore */ (el) => !el.approved" fixed>
             <template #header>
-                <th class="text-nowrap">
-                    <Icon v="mars" />
-                    <T>nouns.masculine</T>
-                </th>
-                <th class="text-nowrap">
-                    <Icon v="venus" />
-                    <T>nouns.feminine</T>
-                </th>
-                <th class="text-nowrap">
-                    <Icon v="neuter" />
-                    <T>nouns.neuter</T>
+                <th v-for="gender in genders" :key="gender" class="text-nowrap">
+                    <NounGenderLabel :gender="gender" />
                 </th>
                 <th></th>
             </template>
@@ -161,7 +152,7 @@
 </template>
 
 <script lang="ts">
-import { Noun } from '../src/classes.ts';
+import { Noun, genders } from '../src/classes.ts';
 import { buildDict } from '../src/helpers.ts';
 import hash from '../plugins/hash.ts';
 import type { NounRaw } from '../src/classes.ts';
@@ -177,6 +168,7 @@ interface Refs {
 interface Data {
     filter: string;
     nounsRaw: NounRaw[] | undefined;
+    genders: typeof genders;
 }
 
 export default hash.extend({
@@ -187,6 +179,7 @@ export default hash.extend({
         return {
             filter: '',
             nounsRaw: undefined,
+            genders,
         };
     },
     computed: {
diff --git a/components/NounGenderLabel.vue b/components/NounGenderLabel.vue
new file mode 100644
index 000000000..f8bce3c12
--- /dev/null
+++ b/components/NounGenderLabel.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="text-nowrap">
+        <Icon :v="iconName" />
+        <span><T>nouns.{{ longIdentifier }}</T></span>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import type { PropType } from 'vue';
+import type { genders } from '../src/classes.ts';
+
+export default Vue.extend({
+    props: {
+        gender: { required: true, type: String as PropType<typeof genders[number]> },
+    },
+    computed: {
+        iconName(): string {
+            const iconNames = {
+                masc: 'mars',
+                fem: 'venus',
+                neutr: 'neuter',
+            };
+            return iconNames[this.gender];
+        },
+        longIdentifier(): string {
+            const longIdentifiers = {
+                masc: 'masculine',
+                fem: 'feminine',
+                neutr: 'neuter',
+            };
+            return longIdentifiers[this.gender];
+        },
+    },
+});
+</script>
diff --git a/components/NounSubmitForm.vue b/components/NounSubmitForm.vue
index 062de4368..0ab940ec3 100644
--- a/components/NounSubmitForm.vue
+++ b/components/NounSubmitForm.vue
@@ -12,57 +12,31 @@
             </p>
         </div>
         <form v-else @submit.prevent="submit">
-            <div class="table-responsive">
-                <table :class="`table table-borderless table-sm table-fixed-${$config.nouns.plurals ? '4' : '3'}`">
-                    <thead>
-                        <tr>
-                            <th v-if="$config.nouns.plurals"></th>
-                            <th class="text-nowrap">
-                                <Icon v="mars" />
-                                <span class="d-none d-md-inline"><T>nouns.masculine</T></span>
-                                <span class="d-md-none"><T>nouns.masculineShort</T></span>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="venus" />
-                                <span class="d-none d-md-inline"><T>nouns.feminine</T></span>
-                                <span class="d-md-none"><T>nouns.feminineShort</T></span>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="neuter" />
-                                <span class="d-none d-md-inline"><T>nouns.neuter</T></span>
-                                <span class="d-md-none"><T>nouns.neuterShort</T></span>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <th v-if="$config.nouns.plurals" class="text-nowrap">
-                                <span class="d-none d-md-inline">⋅ <T>nouns.singular</T></span>
-                                <span class="d-md-none">⋅ <T>nouns.singularShort</T></span>
-                            </th>
-                            <td v-for="gender in genders" :key="gender">
-                                <ListInput
-                                    v-model="form[gender]"
-                                    :maxlength="36"
-                                    :minitems="1"
-                                />
-                            </td>
-                        </tr>
-                        <tr v-if="$config.nouns.plurals">
-                            <th class="text-nowrap">
-                                <span class="d-none d-md-inline">⁖ <T>nouns.plural</T></span>
-                                <span class="d-md-none">⁖ <T>nouns.pluralShort</T></span>
-                            </th>
-                            <td v-for="gender in genders" :key="gender">
-                                <ListInput
-                                    v-model="form[`${gender}Pl`]"
-                                    :maxlength="36"
-                                    :minitems="$config.nouns.pluralsRequired ? 1 : 0"
-                                />
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="row">
+                <div v-if="$config.nouns.plurals" class="col-12 col-md text-nowrap mt-md-4">
+                    <label><strong>⋅ <T>nouns.singular</T></strong></label>
+                </div>
+                <div v-for="gender in genders" :key="gender" class="col-6 col-sm">
+                    <label><strong><NounGenderLabel :gender="gender" /></strong></label>
+                    <ListInput
+                        v-model="form[gender]"
+                        :maxlength="36"
+                        :minitems="1"
+                    />
+                </div>
+            </div>
+            <div v-if="$config.nouns.plurals" class="row">
+                <div class="col-12 col-md text-nowrap">
+                    <label><strong>⁖ <T>nouns.plural</T></strong></label>
+                </div>
+                <div v-for="gender in genders" :key="gender" class="col-6 col-sm">
+                    <label class="d-md-none"><strong><NounGenderLabel :gender="gender" /></strong></label>
+                    <ListInput
+                        v-model="form[`${gender}Pl`]"
+                        :maxlength="36"
+                        :minitems="$config.nouns.pluralsRequired ? 1 : 0"
+                    />
+                </div>
             </div>
             <div v-if="$isGranted('sources')" class="form-group">
                 <label><strong><T>sources.referenced</T><T>quotation.colon</T></strong></label>
diff --git a/components/NounTemplatesTable.vue b/components/NounTemplatesTable.vue
index 672e3e0f4..b1f121f37 100644
--- a/components/NounTemplatesTable.vue
+++ b/components/NounTemplatesTable.vue
@@ -1,17 +1,8 @@
 <template>
     <Table :data="templates" :columns="3" fixed>
         <template #header>
-            <th class="text-nowrap">
-                <Icon v="mars" />
-                <T>nouns.masculine</T>
-            </th>
-            <th class="text-nowrap">
-                <Icon v="venus" />
-                <T>nouns.feminine</T>
-            </th>
-            <th class="text-nowrap">
-                <Icon v="neuter" />
-                <T>nouns.neuter</T>
+            <th v-for="gender in genders" :key="gender" class="text-nowrap">
+                <NounGenderLabel :gender="gender" />
             </th>
             <th></th>
         </template>
@@ -41,8 +32,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { genders, gendersWithNumerus } from '../src/classes.ts';
 import type { MinimalNoun } from '../src/classes.ts';
-import { gendersWithNumerus } from '../src/classes.ts';
 import { nounTemplates } from '../src/data.ts';
 
 export default Vue.extend({
@@ -50,6 +41,11 @@ export default Vue.extend({
         templateBase: { default: '', type: String },
         filter: { default: '', type: String },
     },
+    data() {
+        return {
+            genders,
+        };
+    },
     computed: {
         templates(): MinimalNoun[] {
             return nounTemplates.filter((template) => {