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

[design][profile] remove the clusterfuck of buttons, replace with an aside menu

This commit is contained in:
Andrea 2022-01-08 11:49:18 +01:00
parent 520ee3b7ef
commit 5579086d2c
20 changed files with 224 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/style.scss
View File

@ -61,13 +61,13 @@ main {
.container {
margin: 0 auto;
width: 100%;
max-width: min(90vw, 920px);
max-width: min(90vw, #{$container-width});
}
.container-wide {
margin: 0 auto;
width: 100%;
max-width: min(90vw, 1300px);
max-width: min(90vw, #{$container-wide-width});
}
section {

3
assets/variables.scss
View File

@ -13,6 +13,9 @@ $link-hover-decoration: underline;
$header-height: 80px;
$header-margin: $header-height + 36px;
$container-width: 920px;
$container-wide-width: 1300px;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

3
components/Share.vue
View File

@ -4,10 +4,11 @@
<Icon v="share"/>
<T>share</T><T>quotation.colon</T>
</p>
<button :class="['btn btn-primary m-1', shareApiSeparate ? 'd-block' : '']" v-if="hasShareApi" @click="shareApi">
<button class="btn btn-primary m-1" v-if="hasShareApi" @click="shareApi">
<Icon v="share"/>
<span class="d-none d-md-inline"><T>share</T></span>
</button>
<br v-if="hasShareApi && shareApiSeparate"/>
<SquareButton v-for="network in networks" :key="network" :link="link(network)" :colour="colour(network)" :aria-label="network">
<Icon :v="icon(network)" set="b"/>
</SquareButton>

8
locale/_base/translations.suml
View File

@ -590,6 +590,14 @@ profile:
generate: 'Generate'
generating: 'Generation in progress… It could take a few minutes.'
empty: 'This person hasn''t created any cards yet.'
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Share'

9
locale/de/translations.suml
View File

@ -480,6 +480,15 @@ profile:
generate: 'Generatieren'
generating: 'Generatierung läuft…'
empty: 'Diese Person hat noch keine Visitenkarte erstellt.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Teilen'

6
locale/en/translations.suml
View File

@ -614,6 +614,12 @@ profile:
generate: 'Generate'
generating: 'Generation in progress… It could take a few minutes.'
empty: 'This person hasn''t created any cards yet.'
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
share: 'Share'

9
locale/eo/translations.suml
View File

@ -575,6 +575,15 @@ profile:
generate: 'Generate'
generating: 'Generation in progress… It could take a few minutes.'
empty: 'This person hasn''t created any cards yet.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Konigi'

9
locale/es/translations.suml
View File

@ -498,6 +498,15 @@ profile:
generate: 'Generar'
generating: 'Generando…'
empty: 'Esta persona todavía no ha creado ninguna tarjeta.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Compartir'

9
locale/fr/translations.suml
View File

@ -489,6 +489,15 @@ profile:
generate: 'Générer'
generating: 'En cours de création...'
empty: 'Cette personne n''a pas encore créé de carte'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Partager'

9
locale/gl/translations.suml
View File

@ -498,6 +498,15 @@ profile:
generate: 'Gerar'
generating: 'Gerando a imagem…'
empty: 'Essa pessoa ainda não especificou suas informações pessoais'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Compartilhar'

9
locale/ja/translations.suml
View File

@ -515,6 +515,15 @@ profile:
link: 'カードの映像'
generating: '生成中…'
empty: 'この人はまだカードを作っていません。'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: '共有'

9
locale/lad/translations.suml
View File

@ -494,6 +494,15 @@ profile:
generate: 'Jenerar'
generating: 'Jenerando…'
empty: 'Esta persona ainda no tiene kreado ninguna karta.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Partajar'

9
locale/nl/translations.suml
View File

@ -490,6 +490,15 @@ profile:
generate: 'Genereer'
generating: 'Je kaartbeeld wordt gegenereerd …'
empty: 'Deze person heeft nog geen kaarten gegenereerd.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Deel'

9
locale/no/translations.suml
View File

@ -495,6 +495,15 @@ profile:
generate: 'Generer'
generating: 'Genererer, vennligst vent'
empty: 'Denne personen har ikke laget noen kort enda.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Del'

6
locale/pl/translations.suml
View File

@ -1323,6 +1323,12 @@ census:
replies: 'odpowiedzi'
writein: 'Jeśli Twojej odpowiedzi nie ma powyżej, możesz ją wpisać tutaj.'
leave: 'Czy na pewno chcesz wyjść? Twoje dotychczasowe odpowiedzi nie zostaną zapisane!'
personal:
header: 'Osobiste'
description: 'Tylko Ty widzisz tę sekcję'
language:
header: 'Język'
description: 'Ta wizytówka jest dostępna w następujących językach'
share: 'Udostępnij'

9
locale/pt/translations.suml
View File

@ -494,6 +494,15 @@ profile:
generate: 'Gerar'
generating: 'Gerando a imagem…'
empty: 'Essa pessoa ainda não especificou suas informações pessoais'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Compartilhar'

9
locale/ru/translations.suml
View File

@ -524,6 +524,15 @@ profile:
generate: 'Сгенерировать'
generating: 'Карточка создаётся'
empty: 'Ни одной карточки пока не создано.'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Поделиться'

9
locale/yi/translations.suml
View File

@ -495,6 +495,15 @@ profile:
generate: 'Generate' # TODO
generating: 'Generation in progress…'
empty: 'This person hasn''t created any cards yet.' # TODO
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: 'Share'

9
locale/zh/translations.suml
View File

@ -475,6 +475,15 @@ profile:
generating: '生成中……'
empty: '此用戶還沒有創造任何名片'
loginRequired: '{/account=登入}以提交項目'
# TODO
personal:
header: 'Personal'
description: 'Only you can see this section'
language:
header: 'Language'
description: '@%username%''s card is also available in the following languages'
# if your language has declension and it's hard to fit the username in that sentence,
# just make is 'This card is…'
share: '這裡'

108
routes/profile.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="profile">
<div v-if="profile" class="position-relative">
<section v-if="$isGranted('users') && user.bannedReason">
<div class="alert alert-warning">
<p class="h4">
@ -10,32 +10,32 @@
</div>
</section>
<Profile :user="user" :profile="profile" :terms="terms">
<div v-if="Object.keys(user.profiles).length > 1">
<LocaleLink v-for="(options, locale) in locales" :key="locale" v-if="user.profiles[locale] !== undefined"
:locale="locale" :link="`/@${user.username}`"
:class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-2 mx-1']">
{{options.name}}
</LocaleLink>
</div>
<div v-if="$user() && $user().username === user.username" class="alert alert-info">
<div class="mb-2">
<nuxt-link to="/editor" class="btn btn-primary btn-sm mx-1">
<Icon v="edit"/>
<T>profile.edit</T>
</nuxt-link>
<a :href="`https://pronouns.page/@${user.username}`" v-if="Object.keys(user.profiles).length > 1"
class="btn btn-outline-secondary btn-sm mx-1"
>
<Icon v="external-link"/>
pronouns.page/@{{user.username}}
</a>
<Profile :user="user" :profile="profile" :terms="terms"/>
<aside class="row">
<div v-if="$user() && $user().username === user.username" class="list-group list-group-flare my-2 col-12 col-lg-4 col-xxl-12">
<div class="list-group-item pt-3">
<h5>
<Icon v="user"/>
<T>profile.personal.header</T>
</h5>
<small><T>profile.personal.description</T></small>
</div>
<div>
<small>
<nuxt-link to="/editor" class="list-group-item list-group-item-action list-group-item-hoverable">
<Icon v="edit"/>
<T>profile.edit</T>
</nuxt-link>
<a v-if="!cardMenuVisible && !(profile.card === '' || profile.cardDark === '')" href="#" class="list-group-item list-group-item-action list-group-item-hoverable" @click.prevent="cardMenuVisible = true">
<p class="small mb-0">
<Icon v="id-card"/>
<T>profile.card.link</T>
</p>
</a>
<div v-else class="list-group-item">
<p class="small">
<Icon v="id-card"/>
<T>profile.card.link</T><T>quotation.colon</T>
</small>
</p>
<small v-if="profile.card === null && profile.cardDark === null">
<button class="btn btn-outline-success btn-sm" @click="generateCard(false)">
<Icon v="sun"/>
@ -71,15 +71,47 @@
</span>
</div>
</div>
</Profile>
<div v-if="Object.keys(user.profiles).length > 1" class="list-group list-group-flare my-2 col-12 col-lg-4 col-xxl-12">
<div class="list-group-item pt-3">
<h5>
<Icon v="language"/>
<T>profile.language.header</T>
</h5>
<small><T :params="{username: user.username}">profile.language.description</T><T>quotation.colon</T></small>
</div>
<LocaleLink v-for="(options, locale) in locales" :key="locale" v-show="user.profiles[locale] !== undefined"
:locale="locale" :link="`/@${user.username}`"
:class="['list-group-item list-group-item-action list-group-item-hoverable small', locale === config.locale ? 'list-group-item-active' : '']">
{{options.name}}
</LocaleLink>
<a :href="`https://pronouns.page/@${user.username}`" v-if="Object.keys(user.profiles).length > 1"
class="list-group-item list-group-item-action list-group-item-hoverable small"
>
<span class="badge bg-primary text-white">
<Icon v="link"/>
pronouns.page/@{{user.username}}
</span>
</a>
</div>
<div class="list-group list-group-flare my-2 col-12 col-lg-4 col-xxl-12">
<div class="list-group-item pt-3">
<h5>
<Icon v="share"/>
<T>share</T>
</h5>
</div>
<div class="list-group-item small p-2 text-center">
<Share nolabel shareApiSeparate/>
</div>
</div>
</aside>
<Ban :user="user"/>
<Separator icon="heart"/>
<Support/>
<section>
<Share/>
</section>
</div>
<div v-else-if="user.username" class="my-md-5 pt-md-2">
<h2 class="text-nowrap mb-3">
@ -124,6 +156,7 @@
return {
terms: [],
cardCheckHandle: null,
cardMenuVisible: false,
}
},
async asyncData({ app, route }) {
@ -239,4 +272,23 @@
padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
}
}
.list-group-item-active {
color: $primary;
border-inline-start: 3px solid $primary;
padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
}
$aside-margin: 2 * $spacer;
@include media-breakpoint-up('xxl') {
aside {
position: absolute;
top: 0;
left: calc(100% + #{$aside-margin});
width: min(300px, calc((100vw - #{$container-width}) / 2 - #{$aside-margin}));
}
}
.list-group-flare > :first-child {
border-top: 3px solid $primary;
}
</style>