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

assets/style.scss

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

assets/variables.scss

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

components/Share.vue

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

locale/_base/translations.suml

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

locale/de/translations.suml

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

locale/en/translations.suml

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

locale/eo/translations.suml

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

locale/es/translations.suml

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

locale/fr/translations.suml

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

locale/gl/translations.suml

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

locale/ja/translations.suml

@@ -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: '共有'
 

locale/lad/translations.suml

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

locale/nl/translations.suml

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

locale/no/translations.suml

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

locale/pl/translations.suml

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

locale/pt/translations.suml

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

locale/ru/translations.suml

@@ -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: 'Поделиться'
 

locale/yi/translations.suml

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

locale/zh/translations.suml

@@ -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: '這裡'
 

routes/profile.vue

@@ -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">
+        <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"
+        <aside class="row">
-                            :locale="locale" :link="`/@${user.username}`"
+            <div v-if="$user() && $user().username === user.username" class="list-group list-group-flare my-2 col-12 col-lg-4 col-xxl-12">
-                            :class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-2 mx-1']">
+                <div class="list-group-item pt-3">
-                    {{options.name}}
+                    <h5>
-                </LocaleLink>
+                        <Icon v="user"/>
-            </div>
+                        <T>profile.personal.header</T>
-            <div v-if="$user() && $user().username === user.username" class="alert alert-info">
+                    </h5>
-                <div class="mb-2">
+                    <small><T>profile.personal.description</T></small>
-                    <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>
                 </div>
-                <div>
+                <nuxt-link to="/editor" class="list-group-item list-group-item-action list-group-item-hoverable">
-                    <small>
+                    <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>