(nouns) make submit form more responsive to smaller screen sizes

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">
+                <th v-for="gender in genders" :key="gender" class="text-nowrap">
-                    <Icon v="mars" />
+                    <NounGenderLabel :gender="gender" />
-                    <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>
                 <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: {

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>

components/NounSubmitForm.vue

@@ -12,57 +12,31 @@
             </p>
         </div>
         <form v-else @submit.prevent="submit">
-            <div class="table-responsive">
+            <div class="row">
-                <table :class="`table table-borderless table-sm table-fixed-${$config.nouns.plurals ? '4' : '3'}`">
+                <div v-if="$config.nouns.plurals" class="col-12 col-md text-nowrap mt-md-4">
-                    <thead>
+                    <label><strong>⋅ <T>nouns.singular</T></strong></label>
-                        <tr>
+                </div>
-                            <th v-if="$config.nouns.plurals"></th>
+                <div v-for="gender in genders" :key="gender" class="col-6 col-sm">
-                            <th class="text-nowrap">
+                    <label><strong><NounGenderLabel :gender="gender" /></strong></label>
-                                <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>
+                </div>
-                        </tr>
+            </div>
-                        <tr v-if="$config.nouns.plurals">
+            <div v-if="$config.nouns.plurals" class="row">
-                            <th class="text-nowrap">
+                <div class="col-12 col-md text-nowrap">
-                                <span class="d-none d-md-inline">⁖ <T>nouns.plural</T></span>
+                    <label><strong>⁖ <T>nouns.plural</T></strong></label>
-                                <span class="d-md-none">⁖ <T>nouns.pluralShort</T></span>
+                </div>
-                            </th>
+                <div v-for="gender in genders" :key="gender" class="col-6 col-sm">
-                            <td v-for="gender in genders" :key="gender">
+                    <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"
                     />
-                            </td>
+                </div>
-                        </tr>
-                    </tbody>
-                </table>
             </div>
             <div v-if="$isGranted('sources')" class="form-group">
                 <label><strong><T>sources.referenced</T><T>quotation.colon</T></strong></label>

components/NounTemplatesTable.vue

@@ -1,17 +1,8 @@
 <template>
     <Table :data="templates" :columns="3" fixed>
         <template #header>
-            <th class="text-nowrap">
+            <th v-for="gender in genders" :key="gender" class="text-nowrap">
-                <Icon v="mars" />
+                <NounGenderLabel :gender="gender" />
-                <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>
             <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) => {