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

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

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-06-15 12:09:49 +02:00
parent 079f346ccc
commit 271bca5c6a
4 changed files with 74 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/Dictionary.vue
View File

@ -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: {

36
components/NounGenderLabel.vue Normal file
View File

@ -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>

76
components/NounSubmitForm.vue
View File

@ -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>

20
components/NounTemplatesTable.vue
View File

@ -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) => {