KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

#169 Bootstrap 5 [wip]

This commit is contained in:
Avris 2021-01-22 23:54:24 +01:00
parent 6ff3ea64d2
commit 49563e8f9f
40 changed files with 229 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/style.scss
View File

@ -6,7 +6,7 @@
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/code";
//@import "~bootstrap/scss/containers";
//@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@ -14,18 +14,17 @@
//@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
//TODO @import "~bootstrap/scss/input-group";
//TODO @import "~bootstrap/scss/custom-forms";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/accordion";
//@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/toasts";
@ -34,8 +33,9 @@
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
//@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";
$fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@ -91,7 +91,13 @@ img.icon {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizes {
@each $size, $length in (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
) {
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
}
}
@ -115,6 +121,11 @@ blockquote {
font-size: 1.1em;
}
[dir="rtl"] {
text-align: right;
.form-group {
margin-bottom: $spacer;
}
/* RTL fix */
.list-group, .list-unstyled {
padding-right: 0;
}

4
assets/variables.scss
View File

@ -4,8 +4,12 @@ $headings-font-family: Quicksand, -apple-system, BlinkMacSystemFont, "Segoe UI",
$primary: #C71585;
$alert-border-level: -3;
$link-decoration: none;
$link-hover-decoration: underline;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import '~@fortawesome/fontawesome-pro/scss/variables';

32
components/Account.vue
View File

@ -29,7 +29,7 @@
<ImageUploader small @uploaded="uploaded"/>
</div>
<p v-if="$isGranted('panel') || $isGranted('users')">
<nuxt-link to="/admin" class="badge badge-primary"><T>user.account.admin</T></nuxt-link>
<nuxt-link to="/admin" class="badge bg-primary"><T>user.account.admin</T></nuxt-link>
</p>
</div>
<div class="mx-2 flex-grow-1">
@ -47,11 +47,9 @@
<div class="input-group mb-3">
<input type="text" class="form-control" v-model="username"
required minlength="4" maxlength="16"/>
<div class="input-group-append">
<button class="btn btn-outline-primary">
<T>user.account.changeUsername.action</T>
</button>
</div>
<button class="btn btn-outline-primary">
<T>user.account.changeUsername.action</T>
</button>
</div>
</form>
@ -59,11 +57,9 @@
<h3 class="h6"><T>user.account.changeEmail.header</T></h3>
<div v-if="!changeEmailAuthId" class="input-group mb-3">
<input type="email" class="form-control" v-model="email" required/>
<div class="input-group-append">
<button class="btn btn-outline-primary">
<T>user.account.changeEmail.action</T>
</button>
</div>
<button class="btn btn-outline-primary">
<T>user.account.changeEmail.action</T>
</button>
</div>
<div v-else class="input-group mb-3">
<input type="text" class="form-control text-center" v-model="code"
@ -71,12 +67,10 @@
inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code"
ref="code"
/>
<div class="input-group-append">
<button class="btn btn-outline-primary">
<Icon v="key"/>
<T>user.code.action</T>
</button>
</div>
<button class="btn btn-outline-primary">
<Icon v="key"/>
<T>user.code.action</T>
</button>
</div>
</form>
</div>
@ -107,12 +101,12 @@
</Loading>
<section>
<a href="#" class="badge badge-light border" @click.prevent="logout">
<a href="#" class="badge bg-light text-dark border" @click.prevent="logout">
<Icon v="sign-out"/>
<T>user.logout</T>
</a>
<a href="#" class="badge badge-light border" @click.prevent="deleteAccount">
<a href="#" class="badge bg-light text-dark border" @click.prevent="deleteAccount">
<Icon v="trash-alt"/>
<T>user.deleteAccount</T>
</a>

2
components/Authors.vue
View File

@ -13,7 +13,7 @@
<li v-for="author in authors" class="mb-2">
<Icon v="user"/>
{{ author.footerName }}
<nuxt-link :to="`/@${author.username}`" class="badge badge-light border">
<nuxt-link :to="`/@${author.username}`" class="badge bg-light text-dark border">
@{{author.username}}
</nuxt-link>
<br/>

24
components/ButtonList.vue
View File

@ -3,7 +3,7 @@
<draggable tag="ul" v-model="iVal" ghostClass="ghost" @end="$emit('input', iVal)" :group="ulid"
class="list-inline border rounded drop-empty px-3 py-2">
<li v-for="val in iVal" v-if="options[val]" class="list-inline-item py-1">
<a href="#" class="badge badge-light border p-2" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
<a href="#" class="badge bg-light text-dark border p-2" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
<slot v-bind:v="val" v-bind:desc="options[val]">
{{ val }}
</slot>
@ -15,23 +15,21 @@
</draggable>
<div class="input-group py-1">
<input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
<div class="input-group-append">
<button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
<Icon v="times"/>
</button>
<button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
<Icon v="times"/>
</button>
<button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
<Icon v="caret-up"/>
</button>
<button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
<Icon v="caret-down"/>
</button>
</div>
<button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
<Icon v="caret-up"/>
</button>
<button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
<Icon v="caret-down"/>
</button>
</div>
<draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid">
<li v-for="val in remainingOptions" v-if="(all && !search) || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1">
<a href="#" class="badge badge-light p-2" @click.prevent="$emit('input', [...iVal, val])">
<a href="#" class="badge bg-light text-dark p-2" @click.prevent="$emit('input', [...iVal, val])">
<slot v-bind:v="val" v-bind:desc="options[val]">
{{ val }}
</slot>

26
components/Dictionary.vue
View File

@ -9,23 +9,17 @@
<section class="sticky-top">
<div class="input-group mb-3 bg-white">
<div class="input-group-prepend">
<span class="input-group-text">
<Icon v="filter"/>
</span>
</div>
<span class="input-group-text">
<Icon v="filter"/>
</span>
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
<div class="input-group-append" v-if="filter">
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<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>
<button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
<button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
<Icon v="plus-circle"/>
<T>nouns.submit.action</T>
</button>
</div>
</section>

8
components/Header.vue
View File

@ -53,7 +53,7 @@
</div>
</div>
<div class="d-block d-md-none">
<div class="btn-group-vertical btn-block nav-custom mb-2">
<div class="btn-group-vertical d-flex nav-custom mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon"/>
{{ link.textLong || link.text }}
@ -67,7 +67,7 @@
<Icon v="bars"/>
</button>
<div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']">
<div class="btn-group-vertical btn-block nav-custom nav-custom-left mb-2">
<div class="btn-group-vertical d-flex nav-custom nav-custom-left mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon"/>
{{ link.textLong || link.text }}
@ -76,7 +76,7 @@
</div>
</div>
<div class="d-none d-md-block">
<div class="btn-group btn-block nav-custom mb-2">
<div class="btn-group d-flex nav-custom mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon" size="1.6"/>
<br/>
@ -270,7 +270,7 @@
<style lang="scss" scoped>
@import "assets/variables";
@include media-breakpoint-down('sm', $grid-breakpoints) {
@include media-breakpoint-down('md', $grid-breakpoints) {
h1 {
font-size: 2rem;
}

30
components/InclusiveDictionary.vue
View File

@ -9,23 +9,17 @@
<section class="sticky-top">
<div class="input-group mb-3 bg-white">
<div class="input-group-prepend">
<span class="input-group-text">
<Icon v="filter"/>
</span>
</div>
<span class="input-group-text">
<Icon v="filter"/>
</span>
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
<div class="input-group-append" v-if="filter">
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<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>
<button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
<button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
<Icon v="plus-circle"/>
<T>nouns.submit.action</T>
</button>
</div>
</section>
@ -54,7 +48,7 @@
<ul class="list-inline">
<li v-for="category in s.el.categories" class="list-inline-item">
<span class="badge badge-primary">
<span class="badge bg-primary">
{{category}}
</span>
</li>
@ -68,7 +62,7 @@
<ul class="list-inline">
<li v-for="category in entries[s.el.base].categories" class="list-inline-item">
<span class="badge badge-primary">
<span class="badge bg-primary">
{{category}}
</span>
</li>

6
components/InclusiveSubmitForm.vue
View File

@ -49,7 +49,7 @@
<div class="form-group">
<label><strong><T>nouns.inclusive.categories</T>:</strong></label>
<a v-for="category in config.nouns.inclusive.categories"
href="#" :class="['badge border mx-2', form.categories.includes(category) ? 'badge-primary' : 'badge-light']"
href="#" :class="['badge border mx-2', form.categories.includes(category) ? 'bg-primary' : 'bg-light']"
@click.prevent="form.categories = form.categories.includes(category) ? form.categories.filter(c => c !== category) : [...form.categories, category]"
>
{{ category }}
@ -66,12 +66,12 @@
<div class="alert alert-info" v-if="form.base">
<Icon v="info-circle"/>
<T>nouns.editing</T>
<button class="btn btn-sm float-right" @click="form.base = null">
<button class="btn btn-sm float-end" @click="form.base = null">
<Icon v="times"/>
</button>
</div>
<button class="btn btn-primary btn-block" :disabled="submitting">
<button class="btn btn-primary w-100" :disabled="submitting">
<template v-if="submitting">
<Icon v="circle-notch fa-spin"/>
</template>

2
components/Link.vue
View File

@ -1,7 +1,7 @@
<template>
<li class="my-2">
<Icon :v="link.icon" :set="link.iconSet || 'l'"/>
<span v-for="lang in link.lang || []" class="badge badge-light border">{{lang}}</span>
<span v-for="lang in link.lang || []" class="badge bg-light text-dark border">{{lang}}</span>
<a :href="link.url" target="_blank" rel="noopener">
<LinkedText :text="link.headline"/>
</a>

14
components/LinkInput.vue
View File

@ -1,14 +1,12 @@
<template>
<div class="input-group my-2">
<input class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')" id="link" ref="link">
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
<Icon v="clipboard"/>
</button>
<a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
<Icon v="external-link"/>
</a>
</div>
<button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
<Icon v="clipboard"/>
</button>
<a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
<Icon v="external-link"/>
</a>
</div>
</template>

18
components/ListInput.vue
View File

@ -2,24 +2,20 @@
<draggable tag="ul" v-model="iVal" handle=".handle" ghostClass="ghost" @end="$emit('input', iVal)" class="list-unstyled" :group="group">
<li v-for="(v, i) in iVal" ref="items">
<div class="input-group input-group-sm mb-1">
<div class="input-group-prepend">
<button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
<Icon v="bars"/>
</button>
</div>
<button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
<Icon v="bars"/>
</button>
<slot v-bind:val="iVal[i]" v-bind:update="curry(update)(i)">
<input v-model="iVal[i]" type="text" class="form-control" required/>
</slot>
<div class="input-group-append">
<button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
<Icon v="times"/>
</button>
</div>
<button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
<Icon v="times"/>
</button>
</div>
</li>
<li slot="footer">
<button class="btn btn-outline-success btn-block btn-sm" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
<button class="btn btn-outline-success w-100 btn-sm" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
<Icon v="plus"/>
</button>
</li>

22
components/Login.vue
View File

@ -11,14 +11,12 @@
<div class="input-group mb-3">
<input type="text" class="form-control" v-model="usernameOrEmail"
:placeholder="$t('user.login.placeholder')" autofocus required/>
<div class="input-group-append">
<button class="btn btn-primary">
<Icon v="sign-in"/>
<T>user.login.action</T>
</button>
</div>
<button class="btn btn-primary">
<Icon v="sign-in"/>
<T>user.login.action</T>
</button>
</div>
<div class="btn-group btn-block mb-3">
<div class="btn-group w-100 mb-3">
<a :href="`/api/connect/${provider}`" v-for="(providerOptions, provider) in socialProviders" class="btn btn-outline-primary">
<Icon :v="providerOptions.icon || provider" set="b"/>
{{ providerOptions.name }}
@ -49,12 +47,10 @@
inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code"
ref="code"
/>
<div class="input-group-append">
<button class="btn btn-primary">
<Icon v="key"/>
<T>user.code.action</T>
</button>
</div>
<button class="btn btn-primary">
<Icon v="key"/>
<T>user.code.action</T>
</button>
</div>
</form>
</div>

2
components/NameCount.vue
View File

@ -6,7 +6,7 @@
{{version}}
<small v-if="ordinalDesc">({{ ordinalDesc }})</small>:
</strong>
<span v-for="(icon, key) in config.names.countSex" :key="key" class="badge badge-light badge-big border mx-1">
<span v-for="(icon, key) in config.names.countSex" :key="key" class="badge bg-light text-dark badge-big border mx-1">
<Icon :v="icon"/>
{{ count(version, key, ordinal) }}
</span>

2
components/NormativeBadge.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="badge badge-secondary toggle-hover">
<span class="badge bg-secondary toggle-hover">
<Icon v="book-open"/>
<span class="togglable"><T>pronouns.normative</T></span>
</span>

10
components/NounForm.vue
View File

@ -2,14 +2,12 @@
<div>
<div v-for="(synonym, i) in val" :key="i" class="input-group input-group-sm p-1">
<input type="text" class="form-control" v-model="val[i]" required ref="inp" :maxlength="maxlength">
<div v-if="i || !required" class="input-group-append">
<button type="button" class="btn btn-outline-danger btn-sm" @click="remove(i)">
<Icon v="times"/>
</button>
</div>
<button v-if="i || !required" type="button" class="btn btn-outline-danger btn-sm" @click="remove(i)">
<Icon v="times"/>
</button>
</div>
<div class="p-1">
<button type="button" class="btn btn-outline-success btn-sm btn-block" @click="add">
<button type="button" class="btn btn-outline-success btn-sm w-100" @click="add">
<Icon v="plus"/>
</button>
</div>

6
components/NounSubmitForm.vue
View File

@ -75,13 +75,13 @@
<div class="alert alert-info" v-if="form.base">
<Icon v="info-circle"/>
<T>nouns.editing</T>
<button class="btn btn-sm float-right" @click="form.base = null">
<button class="btn btn-sm float-end" @click="form.base = null">
<Icon v="times"/>
</button>
</div>
<template v-if="config.nouns.templates">
<a v-if="!templateVisible" href="#" @click.prevent="templateVisible = true" class="btn btn-outline-primary btn-block">
<a v-if="!templateVisible" href="#" @click.prevent="templateVisible = true" class="btn btn-outline-primary w-100">
<Icon v="copy"/>
<T>nouns.template</T>
</a>
@ -105,7 +105,7 @@
</div>
</template>
<button class="btn btn-primary btn-block" :disabled="submitting">
<button class="btn btn-primary w-100" :disabled="submitting">
<template v-if="submitting">
<Icon v="circle-notch fa-spin"/>
</template>

60
components/OpinionListInput.vue
View File

@ -1,38 +1,34 @@
<template>
<ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s" :group="group">
<div class="input-group-prepend">
<button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.yes')"
:title="$t('profile.opinion.yes')"
@click="s.update({key: s.val.key, value: 1})">
<Icon v="heart"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.jokingly')"
:title="$t('profile.opinion.jokingly')"
@click="s.update({key: s.val.key, value: 2})">
<Icon v="grin-tongue"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.meh')"
:title="$t('profile.opinion.meh')"
@click="s.update({key: s.val.key, value: 0})">
<Icon v="thumbs-up"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.no')"
:title="$t('profile.opinion.no')"
@click="s.update({key: s.val.key, value: -1})">
<Icon v="thumbs-down"/>
</button>
</div>
<button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.yes')"
:title="$t('profile.opinion.yes')"
@click="s.update({key: s.val.key, value: 1})">
<Icon v="heart"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.jokingly')"
:title="$t('profile.opinion.jokingly')"
@click="s.update({key: s.val.key, value: 2})">
<Icon v="grin-tongue"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.meh')"
:title="$t('profile.opinion.meh')"
@click="s.update({key: s.val.key, value: 0})">
<Icon v="thumbs-up"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.no')"
:title="$t('profile.opinion.no')"
@click="s.update({key: s.val.key, value: -1})">
<Icon v="thumbs-down"/>
</button>
<input v-model="s.val.key" class="form-control mw-input" @keyup="s.update(s.val)" required/>
<div v-if="validation && s.val.key" class="input-group-append">
<small v-if="validation(s.val.key)" class="input-group-text bg-danger text-white">
<Icon v="exclamation-triangle"/>
<span class="ml-1">{{$t(validation(s.val.key))}}</span>
</small>
</div>
<small v-if="validation && s.val.key && validation(s.val.key)" class="input-group-text bg-danger text-white">
<Icon v="exclamation-triangle"/>
<span class="ml-1">{{$t(validation(s.val.key))}}</span>
</small>
</ListInput>
</template>

8
components/ProfileOverview.vue
View File

@ -2,21 +2,21 @@
<div class="d-flex justify-content-between align-items-center">
{{ locales[locale].name }}
<span v-if="profile">
<LocaleLink :locale="locale" :link="`/@${profile.username}`" class="badge badge-primary">
<LocaleLink :locale="locale" :link="`/@${profile.username}`" class="badge bg-primary">
<Icon v="id-card"/>
<T>profile.show</T>
</LocaleLink>
<LocaleLink :locale="locale" link="/editor" class="badge badge-light border">
<LocaleLink :locale="locale" link="/editor" class="badge bg-light text-dark border">
<Icon v="edit"/>
<T>profile.edit</T>
</LocaleLink>
<Spinner v-if="deleting"/>
<a v-else href="#" class="badge badge-light" @click.prevent="removeProfile(locale)" :aria-label="$t('profile.delete')">
<a v-else href="#" class="badge bg-light text-dark" @click.prevent="removeProfile(locale)" :aria-label="$t('profile.delete')">
<Icon v="trash-alt"/>
</a>
</span>
<span v-else>
<LocaleLink :locale="locale" link="/editor" class="badge badge-light border">
<LocaleLink :locale="locale" link="/editor" class="badge bg-light text-dark border">
<Icon v="plus-circle"/>
<T>profile.init</T>
</LocaleLink>

2
components/Roles.vue
View File

@ -12,7 +12,7 @@
</form>
<ul v-else class="list-unstyled">
<li v-for="role in user.roles.split('|')">
<span class="badge badge-primary">{{role}}</span>
<span class="badge bg-primary">{{role}}</span>
</li>
</ul>
</template>

2
components/Separator.vue
View File

@ -60,7 +60,7 @@
}
> span {
box-shadow:0 2px 4px $value;
background: theme-color-level($color, $alert-bg-level);
// FIXME background: theme-color-level($color, $alert-bg-level);
color: $value;
}
}

6
components/SocialConnection.vue
View File

@ -5,7 +5,7 @@
{{ providerOptions.name }}
</span>
<span v-if="connection === undefined">
<a :href="`/api/connect/${provider}`" class="badge badge-light border">
<a :href="`/api/connect/${provider}`" class="badge bg-light text-dark border">
<Icon v="link"/>
<T>user.socialConnection.connect</T>
</a>
@ -18,12 +18,12 @@
{{connection.name}}
</span>
<br class="d-md-none"/>
<a :href="`/api/connect/${provider}`" class="badge badge-light border">
<a :href="`/api/connect/${provider}`" class="badge bg-light text-dark border">
<Icon v="sync"/>
<T>user.socialConnection.refresh</T>
</a>
<Spinner v-if="disconnecting"/>
<a v-else href="#" class="badge badge-light" @click.prevent="disconnect">
<a v-else href="#" class="badge bg-light text-dark" @click.prevent="disconnect">
<Icon v="unlink"/>
<T>user.socialConnection.disconnect</T>
</a>

16
components/Source.vue
View File

@ -6,14 +6,14 @@
</h3>
<ul class="list-inline" v-if="manage && $isGranted('sources')">
<li v-if="!source.approved" class="list-inline-item">
<span class="badge badge-danger">
<span class="badge bg-danger">
<Icon v="map-marker-question"/>
<T>nouns.pending</T>
</span>
</li>
<!--
<li v-if="source.submitter" class="list-inline-item">
<nuxt-link :to="`/@${source.submitter}`" class="badge badge-light border btn-sm m-1">
<nuxt-link :to="`/@${source.submitter}`" class="badge bg-light text-dark border btn-sm m-1">
<Icon v="user"/>
<span class="btn-label">
<T>crud.author</T>:
@ -23,25 +23,25 @@
</li>
-->
<li v-if="!source.approved" class="list-inline-item">
<a href="#" class="badge badge-success btn-sm m-1" @click.prevent="approve()">
<a href="#" class="badge bg-success btn-sm m-1" @click.prevent="approve()">
<Icon v="check"/>
<span class="btn-label"><T>crud.approve</T></span>
</a>
</li>
<li v-else class="list-inline-item">
<a href="#" class="badge badge-light border border-secondary btn-sm m-1" @click.prevent="hide()">
<a href="#" class="badge bg-light text-dark border border-secondary btn-sm m-1" @click.prevent="hide()">
<Icon v="times"/>
<span class="btn-label"><T>crud.hide</T></span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="badge badge-light border border-danger btn-sm m-1" @click.prevent="remove()">
<a href="#" class="badge bg-light text-dark border border-danger btn-sm m-1" @click.prevent="remove()">
<Icon v="trash"/>
<span class="btn-label"><T>crud.remove</T></span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="badge badge-light border border-primary btn-sm m-1" @click.prevent="$emit('edit-source', source)">
<a href="#" class="badge bg-light text-dark border border-primary btn-sm m-1" @click.prevent="$emit('edit-source', source)">
<Icon v="pen"/>
<span class="btn-label">
<T>crud.edit</T>
@ -49,12 +49,12 @@
</a>
</li>
<li class="list-inline-item">
<span v-for="p in source.pronouns" :class="['badge', pronounLibrary.isCanonical(p) ? 'badge-success' : 'badge-danger']">
<span v-for="p in source.pronouns" :class="['badge', pronounLibrary.isCanonical(p) ? 'bg-success' : 'bg-danger', 'm-1']">
{{p}}
</span>
</li>
<li class="list-inline-item" v-if="source.key">
<span class="badge badge-primary">
<span class="badge bg-primary">
<T>sources.submit.key</T>: {{source.key}}
</span>
</li>

14
components/SourceSubmitForm.vue
View File

@ -59,12 +59,10 @@
</p>
<ListInput v-model="form.pronouns" v-slot="s">
<input v-model="s.val" type="text" class="form-control" @keyup="s.update(s.val)" required maxlength="24"/>
<div v-if="s.val && !pronounLibrary.isCanonical(s.val)" class="input-group-append">
<small class="input-group-text bg-danger text-white">
<Icon v="exclamation-triangle"/>
<span class="ml-1"><T>profile.pronounsNotFound</T></span>
</small>
</div>
<small v-if="s.val && !pronounLibrary.isCanonical(s.val)" class="input-group-text bg-danger text-white">
<Icon v="exclamation-triangle"/>
<span class="ml-1"><T>profile.pronounsNotFound</T></span>
</small>
</ListInput>
</div>
<div class="form-group">
@ -90,11 +88,11 @@
<div class="alert alert-info" v-if="form.base">
<Icon v="info-circle"/>
<T>nouns.editing</T>
<button class="btn btn-sm float-right" @click="form.base = null">
<button class="btn btn-sm float-end" @click="form.base = null">
<Icon v="times"/>
</button>
</div>
<button class="btn btn-success btn-block" :disabled="submitting">
<button class="btn btn-success w-100" :disabled="submitting">
<Icon v="plus-circle"/>
<T>sources.submit.action</T>
</button>

30
components/TermsDictionary.vue
View File

@ -9,23 +9,17 @@
<section class="sticky-top">
<div class="input-group mb-3 bg-white">
<div class="input-group-prepend">
<span class="input-group-text">
<Icon v="filter"/>
</span>
</div>
<span class="input-group-text">
<Icon v="filter"/>
</span>
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
<div class="input-group-append" v-if="filter">
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<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>
<button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
<button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
<Icon v="plus-circle"/>
<T>nouns.submit.action</T>
</button>
</div>
</section>
@ -43,7 +37,7 @@
– {{s.el.definition}}
<template v-if="s.el.category">
<br/>
<span class="badge badge-primary">
<span class="badge bg-primary">
{{s.el.category}}
</span>
</template>
@ -63,7 +57,7 @@
– {{s.el.definition}}
<template v-if="s.el.category">
<br/>
<span class="badge badge-primary">
<span class="badge bg-primary">
{{s.el.category}}
</span>
</template>

4
components/TermsSubmitForm.vue
View File

@ -63,12 +63,12 @@
<div class="alert alert-info" v-if="form.base">
<Icon v="info-circle"/>
<T>nouns.editing</T>
<button class="btn btn-sm float-right" @click="form.base = null">
<button class="btn btn-sm float-end" @click="form.base = null">
<Icon v="times"/>
</button>
</div>
<button class="btn btn-primary btn-block" :disabled="submitting">
<button class="btn btn-primary w-100" :disabled="submitting">
<template v-if="submitting">
<Icon v="circle-notch fa-spin"/>
</template>

2
layouts/default.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="d-flex flex-column vh-100" :dir="config.dir || 'ltr'">
<div class="d-flex flex-column vh-100">
<div class="flex-grow-1">
<Header/>
<Nuxt/>

4
locale/pl/nouns/NounsNav.vue
View File

@ -1,6 +1,6 @@
<template>
<section>
<div class="d-none d-md-inline-flex btn-group btn-block mb-2">
<div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
<router-link v-for="{name, icon, route} in links" :key="name"
:to="buildRoute(route)"
:class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
@ -8,7 +8,7 @@
<T>nouns.{{name}}.header</T>
</router-link>
</div>
<div class="d-block d-md-none btn-group-vertical btn-block mb-2">
<div class="d-block d-md-none btn-group-vertical btn-block mb-2 w-100">
<router-link v-for="{name, icon, route} in links" :key="name"
:to="buildRoute(route)"
:class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">

3
nuxt.config.js
View File

@ -53,6 +53,9 @@ const buildFlags = () => {
export default {
target: 'server',
head: {
htmlAttrs: {
dir: config.dir || 'ltr',
},
title: title,
meta: [
{ charset: 'utf-8' },

2
package.json
View File

@ -45,7 +45,7 @@
"devDependencies": {
"@fortawesome/fontawesome-pro": "git+ssh://git@gitlab.com:Avris/FontAwesomePro.git",
"avris-daemonise": "^0.0.2",
"bootstrap": "^4.5.0",
"bootstrap": "^5.0.0-beta1",
"clipboard": "^2.0.6",
"csv-loader": "^3.0.3",
"sass": "^1.26.10",

22
routes/admin.vue
View File

@ -16,18 +16,16 @@
<div class="border-top">
<div class="input-group mt-4">
<input class="form-control" v-model="userFilter" :placeholder="$t('crud.filterLong')"/>
<span class="input-group-append">
<button :class="['btn', adminsFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="adminsFilter = !adminsFilter"
>
Only admins
</button>
<button :class="['btn', localeFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="localeFilter = !localeFilter"
>
Only this version
</button>
</span>
<button :class="['btn', adminsFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="adminsFilter = !adminsFilter"
>
Only admins
</button>
<button :class="['btn', localeFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="localeFilter = !localeFilter"
>
Only this version
</button>
</div>
<Table :data="visibleUsers" :columns="4">
<template v-slot:header>

4
routes/api.vue
View File

@ -13,9 +13,9 @@
<ul>
<li v-for="([method, path, queryString], endpoint) in group.endpoints" class="my-3">
<p>
<span class="badge badge-primary">{{method}}</span>
<span class="badge bg-primary">{{method}}</span>
<code>{{path}}</code>
<a v-for="example in config.api.examples[endpoint]" :href="$base + example" class="badge badge-light border mx-1" target="_blank" rel="noopener">
<a v-for="example in config.api.examples[endpoint]" :href="$base + example" class="badge bg-light text-dark border mx-1" target="_blank" rel="noopener">
<Icon v="cog"/>
<T>api.example</T>
</a>

4
routes/census.vue
View File

@ -94,7 +94,7 @@
</div>
</form>
<div class="btn-group btn-block">
<div class="btn-group w-100">
<button class="btn btn-outline-primary" :disabled="q === 0" @click="q--">
<Icon v="arrow-alt-left"/>
<T>census.prev</T>
@ -105,7 +105,7 @@
</button>
</div>
<div v-if="$user() && $user().username === 'andrea'" class="mt-4 btn-group btn-block">
<div v-if="$user() && $user().username === 'andrea'" class="mt-4 btn-group w-100">
<button v-for="(question, i) in questions" :class="['btn', q === i ? 'btn-primary' : 'btn-outline-primary']" :disabled="q === i" @click="q = i">
{{i}}
</button>

12
routes/homepage.vue
View File

@ -41,7 +41,7 @@
<em v-html="config.pronouns.multiple.description"></em>
</div>
<SimplePronounList :pronouns="config.pronouns.multiple.examples" class="mb-3"/>
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-block">
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary w-100">
<Icon v="sliders-h-square"/>
<T>pronouns.alt.button</T>
</a>
@ -101,7 +101,7 @@
<p>
<T>home.generator.description</T>
</p>
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary btn-block">
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary w-100">
<Icon v="sliders-h-square"/>
<T>home.generator.button</T>
</a>
@ -310,11 +310,11 @@
.form-input {
text-align: center;
&.active {
@include alert-variant(
/*@include alert-variant(
theme-color-level('primary', $alert-bg-level),
theme-color-level('primary', $alert-border-level),
theme-color-level('primary', $alert-color-level)
);
);FIXME*/
}
&.form-control {
width: auto;
@ -325,9 +325,9 @@
}
}
@include media-breakpoint-up('md', $grid-breakpoints) {
/*@include media-breakpoint-up('md', $grid-breakpoints) {
.btn-md-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}
}
}*/
</style>

16
routes/names.vue
View File

@ -11,17 +11,13 @@
<section class="sticky-top">
<div class="input-group mb-3 bg-white">
<div class="input-group-prepend">
<span class="input-group-text">
<Icon v="filter"/>
</span>
</div>
<span class="input-group-text">
<Icon v="filter"/>
</span>
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
<div class="input-group-append" v-if="filter">
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
</div>
<button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
</div>
</section>

6
routes/profile.vue
View File

@ -16,7 +16,7 @@
</div>
<div v-if="Object.keys(profiles).length > 1" class="locale-list">
<a :href="`https://pronouns.page/@${username}`" v-if="$user() && $user().username === username"
class="btn btn-outline-secondary btn-sm mb-1 mr-1"
class="btn btn-outline-secondary btn-sm mb-1 me-1"
>
<Icon v="external-link"/>
pronouns.page/@{{username}}
@ -24,7 +24,7 @@
<br/>
<LocaleLink v-for="(options, locale) in locales" :key="locale" v-if="profiles[locale] !== undefined"
:locale="locale" :link="`/@${username}`"
:class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-1 mr-1']">
:class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-1 me-1']">
{{options.name}}
</LocaleLink>
</div>
@ -89,7 +89,7 @@
</h3>
<div>
<div v-for="group in profile.words" v-if="Object.keys(profile.words).length" class="float-left w-50 w-md-25">
<div v-for="group in profile.words" v-if="Object.keys(profile.words).length" class="float-start w-50 w-md-25">
<ul class="list-unstyled">
<li v-for="(opinion, word) in group"><Opinion :word="word" :opinion="opinion"/></li>
</ul>

2
routes/profileEditor.vue
View File

@ -130,7 +130,7 @@
</template>
</div>
<button class="btn btn-primary btn-block" type="submit">
<button class="btn btn-primary w-100" type="submit">
<Icon v="save"/>
<T>profile.editor.save</T>
</button>

22
routes/sources.vue
View File

@ -14,7 +14,7 @@
</section>
<section v-if="config.sources.submit">
<button v-if="!submitShown" class="btn btn-outline-success btn-block" @click="submitShown = true">
<button v-if="!submitShown" class="btn btn-outline-success w-100" @click="submitShown = true">
<Icon v="plus-circle"/>
<T>sources.submit.header</T>
</button>
@ -22,7 +22,7 @@
</section>
<section>
<button v-if="!tocShown" class="btn btn-outline-primary btn-block" @click="tocShown = true">
<button v-if="!tocShown" class="btn btn-outline-primary w-100" @click="tocShown = true">
<Icon v="list"/>
<T>sources.toc</T>
</button>
@ -77,20 +77,16 @@
<section class="sticky-top bg-white">
<div class="input-group mb-1 bg-white">
<div class="input-group-prepend">
<span class="input-group-text">
<Icon v="filter"/>
</span>
</div>
<span class="input-group-text">
<Icon v="filter"/>
</span>
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
<div class="input-group-append" v-if="filter">
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
</div>
<button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
<Icon v="times"/>
</button>
</div>
<div class="btn-group btn-block">
<div class="btn-group w-100">
<button v-for="(icon, type) in sourceTypes"
:class="['btn btn-sm', type === filterType ? 'btn-primary' : 'btn-outline-primary']"
@click="filterType = type"

6
routes/team.vue
View File

@ -5,7 +5,7 @@
<T>contact.team.name</T>
</h2>
<figure class="float-right border rounded">
<figure class="float-end border rounded">
<img src="/img/collective-logo.svg" alt=""/>
<figcaption>
<p><T>contact.team.logo</T></p>
@ -60,10 +60,10 @@
<a :href="`https://pronouns.page/@${member.username}`">
<Avatar :user="member" dsize="4rem"/>
</a>
<span class="ml-2">
<span class="ms-2">
{{ member.teamName }}
<br/>
<a :href="`https://pronouns.page/@${member.username}`" class="badge badge-light border">
<a :href="`https://pronouns.page/@${member.username}`" class="badge bg-light text-dark border">
@{{member.username}}
</a>
</span>

8
yarn.lock
View File

@ -2172,10 +2172,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
bootstrap@^5.0.0-beta1:
version "5.0.0-beta1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta1.tgz#18135001a452b3ec38b344ac638a1f9549285ee7"
integrity sha512-UrHApw/WRmT7l2rlDdn5iXr7Jps/LlMZtJlLn9G41aGDfss48hyDeYyHtX1C6NHKVcmdUarGG+ve0LZB5iHyTQ==
boxen@^4.2.0:
version "4.2.0"