TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-13 01:28:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

[editor] clearer separation between sections

Browse Source
This commit is contained in:
Andrea Vos 2021-08-28 21:52:08 +02:00
parent 90278d4d58
commit e7c3e62a5e
2 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/ButtonList.vue
View File

@ -14,7 +14,7 @@
</li>
</draggable>
<div class="input-group py-1">
<input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
<input v-model="search" class="form-control" :placeholder="$t('crud.search')"/>
<button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
<Icon v="times"/>
</button>

59
routes/profileEditor.vue
View File

@ -56,15 +56,15 @@
<OpinionLegend/>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="signature"/>
<T>profile.names</T>
</h3>
<OpinionListInput v-model="names"/>
</div>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="link"/>
<T>profile.pronouns</T>
@ -74,17 +74,17 @@
</p>
<OpinionListInput v-model="pronouns" :validation="validatePronoun"/>
<Answer question="custom-pronouns" small/>
</div>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="comment-edit"/>
<T>profile.description</T>
</h3>
<textarea class="form-control form-control-sm" v-model="description" maxlength="256" rows="4"/>
</div>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="flag"/>
<T>profile.flags</T>
@ -95,20 +95,20 @@
<ButtonList v-model="flags" :options="allFlags" v-slot="s">
<Flag :name="s.desc.split('|')[0]" :alt="s.desc.split('|')[1]" :img="`/flags/${s.v}.png`"/>
</ButtonList>
</div>
<details class="form-group border rounded" :open="Object.keys(customFlags).length > 0">
<summary class="px-3 py-2">
<T>profile.flagsCustom</T>
</summary>
<div class="border-top">
<ImageWidgetRich v-model="customFlags" sizes="flag"/>
</div>
</details>
<details class="form-group border rounded" :open="Object.keys(customFlags).length > 0">
<summary class="px-3 py-2">
<T>profile.flagsCustom</T>
</summary>
<div class="border-top">
<ImageWidgetRich v-model="customFlags" sizes="flag"/>
</div>
</details>
<Answer question="flags" small/>
<Answer question="flags" small/>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="link"/>
<T>profile.links</T>
@ -125,9 +125,9 @@
</a>
😉
</p>
</div>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="birthday-cake"/>
<T>profile.birthday</T>
@ -141,9 +141,9 @@
<Icon v="times"/>
</button>
</div>
</div>
</section>
<div class="form-group">
<section class="form-group">
<h3 class="h4">
<Icon v="scroll-old"/>
<T>profile.words</T>
@ -154,12 +154,14 @@
</h4>
<OpinionListInput v-model="words[i]" group="words"/>
</template>
</div>
</section>
<button class="btn btn-primary w-100" type="submit">
<Icon v="save"/>
<T>profile.editor.save</T>
</button>
<section>
<button class="btn btn-primary w-100" type="submit">
<Icon v="save"/>
<T>profile.editor.save</T>
</button>
</section>
</form>
</div>
</template>
@ -355,4 +357,7 @@
.saving {
opacity: .5;
}
section.form-group {
margin-bottom: 5rem;
}
</style>