#76 [nouns][pl] change order

This commit is contained in:
Avris 2020-10-16 12:57:03 +02:00
parent c73d0c0be6
commit bc6bc2695f
3 changed files with 259 additions and 254 deletions

View File

@ -1,3 +1,6 @@
<template> <template>
<Separator icon="book-open"/> <div>
<Separator icon="book-open"/>
<slot></slot>
</div>
</template> </template>

View File

@ -1,83 +1,65 @@
<template> <template>
<div> <div>
<div class="btn-group btn-block"> <div class="btn-group btn-block">
<a :href="'#' + $t('nouns.personNouns.id')" class="btn btn-outline-primary"> <a :href="'#' + $t('nouns.neuterNouns.id')" class="btn btn-outline-primary">
<Icon v="atom-alt"/> <Icon v="atom-alt"/>
<T>nouns.personNouns.header</T> <T>nouns.neuterNouns.header</T>
</a> </a>
<a :href="'#' + $t('nouns.dukajNouns.id')" class="btn btn-outline-primary"> <a :href="'#' + $t('nouns.dukajNouns.id')" class="btn btn-outline-primary">
<Icon v="atom-alt"/> <Icon v="atom-alt"/>
<T>nouns.dukajNouns.header</T> <T>nouns.dukajNouns.header</T>
</a> </a>
<a :href="'#' + $t('nouns.neuterNouns.id')" class="btn btn-outline-primary"> <a :href="'#' + $t('nouns.personNouns.id')" class="btn btn-outline-primary">
<Icon v="atom-alt"/> <Icon v="atom-alt"/>
<T>nouns.neuterNouns.header</T> <T>nouns.personNouns.header</T>
</a> </a>
</div> </div>
<Separator icon="atom-alt"/> <Separator icon="atom-alt"/>
<h3 :id="$t('nouns.personNouns.id')"> <h3 :id="$t('nouns.neuterNouns.id')">
<T>nouns.personNouns.header</T> <T>nouns.neuterNouns.header</T>
<small><NormativeBadge/></small>
</h3> </h3>
<T>nouns.personNouns.info</T> <T>nouns.neuterNouns.info</T>
<details class="border mb-3"> <details class="border mb-3">
<summary class="bg-light p-3"> <summary class="bg-light p-3">
<h4 class="h5 d-inline"><T>nouns.examples</T></h4> <h4 class="h5 d-inline"><T>nouns.neuterNouns.alt.header</T></h4>
</summary> </summary>
<div class="border-top table-responsive"> <div class="border-top">
<table class="table table-striped table-hover table-fixed-3"> <div class="p-4 pb-0">
<thead> <T>nouns.neuterNouns.alt.info</T>
<tr> </div>
<th class="text-nowrap"> <div class="table-responsive">
<Icon v="mars"/> <table class="table table-striped table-hover table-fixed-3">
<T>nouns.masculine</T> <thead>
</th> <tr>
<th class="text-nowrap"> <th v-for="templates in neuterAltDeclensionTemplates" class="text-nowrap">
<Icon v="venus"/> <ul class="list-inline mb-0">
<T>nouns.feminine</T> <li v-for="template in templates" class="list-inline-item">
</th> <nuxt-link :to="'/' + template">
<th class="text-nowrap"> {{ template }}
<Icon v="neuter"/> </nuxt-link>
<T>nouns.personNouns.label</T> </li>
</th> </ul>
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr v-for="noun in personNouns" :key="noun.id"> <tbody>
<td> <tr v-for="(declensions, word) in neuterAltDeclension" :key="word">
<ul class="list-singular"> <td v-for="declension in declensions">
<li v-for="w in noun.masc">{{ w }}</li> <Declension :word="word" :template="declension" open condense/>
</ul> </td>
<ul class="list-plural"> </tr>
<li v-for="w in noun.mascPl">{{ w }}</li> </tbody>
</ul> </table>
</td> </div>
<td>
<ul class="list-singular">
<li v-for="w in noun.fem">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.femPl">{{ w }}</li>
</ul>
</td>
<td>
<ul class="list-singular">
<li v-for="w in noun.neutr">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.neutrPl">{{ w }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div> </div>
</details> </details>
<slot></slot>
<Separator icon="atom-alt"/> <Separator icon="atom-alt"/>
<h3 :id="$t('nouns.dukajNouns.id')"> <h3 :id="$t('nouns.dukajNouns.id')">
@ -149,44 +131,64 @@
<Separator icon="atom-alt"/> <Separator icon="atom-alt"/>
<h3 :id="$t('nouns.neuterNouns.id')"> <h3 :id="$t('nouns.personNouns.id')">
<T>nouns.neuterNouns.header</T> <T>nouns.personNouns.header</T>
<small><NormativeBadge/></small>
</h3> </h3>
<T>nouns.neuterNouns.info</T> <T>nouns.personNouns.info</T>
<details class="border mb-3"> <details class="border mb-3">
<summary class="bg-light p-3"> <summary class="bg-light p-3">
<h4 class="h5 d-inline"><T>nouns.neuterNouns.alt.header</T></h4> <h4 class="h5 d-inline"><T>nouns.examples</T></h4>
</summary> </summary>
<div class="border-top"> <div class="border-top table-responsive">
<div class="p-4 pb-0"> <table class="table table-striped table-hover table-fixed-3">
<T>nouns.neuterNouns.alt.info</T> <thead>
</div> <tr>
<div class="table-responsive"> <th class="text-nowrap">
<table class="table table-striped table-hover table-fixed-3"> <Icon v="mars"/>
<thead> <T>nouns.masculine</T>
<tr> </th>
<th v-for="templates in neuterAltDeclensionTemplates" class="text-nowrap"> <th class="text-nowrap">
<ul class="list-inline mb-0"> <Icon v="venus"/>
<li v-for="template in templates" class="list-inline-item"> <T>nouns.feminine</T>
<nuxt-link :to="'/' + template"> </th>
{{ template }} <th class="text-nowrap">
</nuxt-link> <Icon v="neuter"/>
</li> <T>nouns.personNouns.label</T>
</ul> </th>
</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr v-for="noun in personNouns" :key="noun.id">
<tr v-for="(declensions, word) in neuterAltDeclension" :key="word"> <td>
<td v-for="declension in declensions"> <ul class="list-singular">
<Declension :word="word" :template="declension" open condense/> <li v-for="w in noun.masc">{{ w }}</li>
</td> </ul>
</tr> <ul class="list-plural">
</tbody> <li v-for="w in noun.mascPl">{{ w }}</li>
</table> </ul>
</div> </td>
<td>
<ul class="list-singular">
<li v-for="w in noun.fem">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.femPl">{{ w }}</li>
</ul>
</td>
<td>
<ul class="list-singular">
<li v-for="w in noun.neutr">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.neutrPl">{{ w }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div> </div>
</details> </details>
</div> </div>

View File

@ -11,181 +11,181 @@
<Share :title="$t('nouns.headerLong')"/> <Share :title="$t('nouns.headerLong')"/>
</section> </section>
<NounsExtra/> <NounsExtra>
<details class="border mb-3" ref="dictionary">
<summary class="bg-light p-3" @click="loadNouns">
<h4 class="h5 d-inline">
<Icon v="book"/>
<T>nouns.dictionary</T>
</h4>
</summary>
<div class="border-top">
<Loading :value="nounsRaw">
<section v-if="$admin()" class="px-3">
<div class="alert alert-info">
<strong>{{ nounsCountApproved() }}</strong> <T>nouns.approved</T>,
<strong>{{ nounsCountPending() }}</strong> <T>nouns.pending</T>.
</div>
</section>
<details class="border mb-3" ref="dictionary"> <section class="sticky-top">
<summary class="bg-light p-3" @click="loadNouns"> <div class="input-group mb-3 bg-white">
<h4 class="h5 d-inline"> <div class="input-group-prepend">
<Icon v="book"/>
<T>nouns.dictionary</T>
</h4>
</summary>
<div class="border-top">
<Loading :value="nounsRaw">
<section v-if="$admin()" class="px-3">
<div class="alert alert-info">
<strong>{{ nounsCountApproved() }}</strong> <T>nouns.approved</T>,
<strong>{{ nounsCountPending() }}</strong> <T>nouns.pending</T>.
</div>
</section>
<section class="sticky-top">
<div class="input-group mb-3 bg-white">
<div class="input-group-prepend">
<span class="input-group-text"> <span class="input-group-text">
<Icon v="filter"/> <Icon v="filter"/>
</span> </span>
</div> </div>
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/> <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
<div class="input-group-append" v-if="filter"> <div class="input-group-append" v-if="filter">
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()"> <button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/> <Icon v="times"/>
</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
<Icon v="plus-circle"/>
<T>nouns.submit.action</T>
</button>
</div>
</div>
</section>
<section class="table-responsive">
<table :class="'table table-striped table-hover table-fixed-' + ($admin() ? 4 : 3)">
<thead>
<tr>
<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>
<th v-if="$admin()"></th>
</tr>
</thead>
<tbody>
<template v-if="visibleNouns().length">
<tr v-for="noun in visibleNouns()" :class="{'mark-left': !noun.approved}" :key="noun.id">
<td>
<ul class="list-singular">
<li v-for="w in noun.masc">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.mascPl">{{ w }}</li>
</ul>
<small v-if="noun.base && nouns[noun.base]">
<p><strong><T>nouns.edited</T>:</strong></p>
<ul class="list-singular">
<li v-for="w in nouns[noun.base].masc">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in nouns[noun.base].mascPl">{{ w }}</li>
</ul>
</small>
<button v-if="!$admin()" class="btn btn-outline-primary btn-sm m-1 hover-show" @click="edit(noun)">
<Icon v="pen"/>
<T>nouns.edit</T>
</button> </button>
</td> </div>
<td> <div class="input-group-append">
<ul class="list-singular"> <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
<li v-for="w in noun.fem">{{ w }}</li> <Icon v="plus-circle"/>
</ul> <T>nouns.submit.action</T>
<ul class="list-plural"> </button>
<li v-for="w in noun.femPl">{{ w }}</li> </div>
</ul> </div>
</section>
<small v-if="noun.base && nouns[noun.base]"> <section class="table-responsive">
<p><strong><T>nouns.edited</T>:</strong></p> <table :class="'table table-striped table-hover table-fixed-' + ($admin() ? 4 : 3)">
<ul class="list-singular"> <thead>
<li v-for="w in nouns[noun.base].fem">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in nouns[noun.base].femPl">{{ w }}</li>
</ul>
</small>
</td>
<td>
<ul class="list-singular">
<li v-for="w in noun.neutr">
<Declension :word="w"/>
</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.neutrPl">
<Declension :word="w" plural :singularOptions="noun.neutr"/>
</li>
</ul>
<small v-if="noun.base && nouns[noun.base]">
<p><strong><T>nouns.edited</T>:</strong></p>
<ul class="list-singular">
<li v-for="w in nouns[noun.base].neutr">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in nouns[noun.base].neutrPl">{{ w }}</li>
</ul>
</small>
</td>
<td v-if="$admin()">
<ul class="list-unstyled">
<li v-if="!noun.approved">
<button class="btn btn-success btn-sm m-1" @click="approve(noun)">
<Icon v="check"/>
<T>crud.approve</T>
</button>
</li>
<li v-else @click="hide(noun)">
<button class="btn btn-outline-secondary btn-sm m-1">
<Icon v="times"/>
<T>crud.hide</T>
</button>
</li>
<li>
<button class="btn btn-outline-danger btn-sm m-1" @click="remove(noun)">
<Icon v="trash"/>
<T>crud.remove</T>
</button>
</li>
<li>
<button class="btn btn-outline-primary btn-sm m-1" @click="edit(noun)">
<Icon v="pen"/>
<T>crud.edit</T>
</button>
</li>
</ul>
</td>
</tr>
</template>
<template v-else>
<tr> <tr>
<td :colspan="$admin() ? 4 : 3" class="text-center"> <th class="text-nowrap">
<Icon v="search"/> <Icon v="mars"/>
<T>nouns.empty</T> <T>nouns.masculine</T>
</td> </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 v-if="$admin()"></th>
</tr> </tr>
</template> </thead>
</tbody> <tbody>
</table> <template v-if="visibleNouns().length">
</section> <tr v-for="noun in visibleNouns()" :class="{'mark-left': !noun.approved}" :key="noun.id">
<td>
<ul class="list-singular">
<li v-for="w in noun.masc">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.mascPl">{{ w }}</li>
</ul>
<Separator icon="plus"/> <small v-if="noun.base && nouns[noun.base]">
<p><strong><T>nouns.edited</T>:</strong></p>
<ul class="list-singular">
<li v-for="w in nouns[noun.base].masc">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in nouns[noun.base].mascPl">{{ w }}</li>
</ul>
</small>
<div class="px-3"> <button v-if="!$admin()" class="btn btn-outline-primary btn-sm m-1 hover-show" @click="edit(noun)">
<NounSubmitForm ref="form"/> <Icon v="pen"/>
</div> <T>nouns.edit</T>
</Loading> </button>
</div> </td>
</details> <td>
<ul class="list-singular">
<li v-for="w in noun.fem">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.femPl">{{ w }}</li>
</ul>
<small v-if="noun.base && nouns[noun.base]">
<p><strong><T>nouns.edited</T>:</strong></p>
<ul class="list-singular">
<li v-for="w in nouns[noun.base].fem">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in nouns[noun.base].femPl">{{ w }}</li>
</ul>
</small>
</td>
<td>
<ul class="list-singular">
<li v-for="w in noun.neutr">
<Declension :word="w"/>
</li>
</ul>
<ul class="list-plural">
<li v-for="w in noun.neutrPl">
<Declension :word="w" plural :singularOptions="noun.neutr"/>
</li>
</ul>
<small v-if="noun.base && nouns[noun.base]">
<p><strong><T>nouns.edited</T>:</strong></p>
<ul class="list-singular">
<li v-for="w in nouns[noun.base].neutr">{{ w }}</li>
</ul>
<ul class="list-plural">
<li v-for="w in nouns[noun.base].neutrPl">{{ w }}</li>
</ul>
</small>
</td>
<td v-if="$admin()">
<ul class="list-unstyled">
<li v-if="!noun.approved">
<button class="btn btn-success btn-sm m-1" @click="approve(noun)">
<Icon v="check"/>
<T>crud.approve</T>
</button>
</li>
<li v-else @click="hide(noun)">
<button class="btn btn-outline-secondary btn-sm m-1">
<Icon v="times"/>
<T>crud.hide</T>
</button>
</li>
<li>
<button class="btn btn-outline-danger btn-sm m-1" @click="remove(noun)">
<Icon v="trash"/>
<T>crud.remove</T>
</button>
</li>
<li>
<button class="btn btn-outline-primary btn-sm m-1" @click="edit(noun)">
<Icon v="pen"/>
<T>crud.edit</T>
</button>
</li>
</ul>
</td>
</tr>
</template>
<template v-else>
<tr>
<td :colspan="$admin() ? 4 : 3" class="text-center">
<Icon v="search"/>
<T>nouns.empty</T>
</td>
</tr>
</template>
</tbody>
</table>
</section>
<Separator icon="plus"/>
<div class="px-3">
<NounSubmitForm ref="form"/>
</div>
</Loading>
</div>
</details>
</NounsExtra>
</div> </div>
</template> </template>