From ba4edb0ecd3244cd30ed32a5d3dc67b6b1dd042a Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Thu, 21 Jan 2021 18:56:08 +0100
Subject: [PATCH] mobile design improvements

---
 components/ScrollButton.vue |  1 +
 components/Table.vue        | 18 +++++++++++++++++-
 routes/profile.vue          | 14 +++++++++++---
 routes/team.vue             |  8 +++++++-
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/components/ScrollButton.vue b/components/ScrollButton.vue
index f588f350..3ffc8b51 100644
--- a/components/ScrollButton.vue
+++ b/components/ScrollButton.vue
@@ -43,5 +43,6 @@
         bottom: $spacer;
         right: $spacer;
         transition: all .5s ease-in-out;
+        z-index: 1030;
     }
 </style>
diff --git a/components/Table.vue b/components/Table.vue
index 9b011e57..018fcc10 100644
--- a/components/Table.vue
+++ b/components/Table.vue
@@ -2,6 +2,22 @@
     <section class="table-responsive">
         <table :class="['table table-striped table-hover', fixed ? 'table-fixed-' + columns : '']">
             <thead ref="thead">
+            <tr>
+                <td :colspan="columns + 1">
+                    <nav v-if="pages > 1">
+                        <ul class="pagination pagination-sm justify-content-center mb-0">
+                            <li v-for="p in pagesRange" :class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']">
+                                <a v-if="p.enabled" class="page-link" href="#" @click.prevent="page = p.page">
+                                    {{p.text}}
+                                </a>
+                                <span v-else class="page-link">
+                                    {{p.text}}
+                                </span>
+                            </li>
+                        </ul>
+                    </nav>
+                </td>
+            </tr>
             <tr v-if="count">
                 <td :colspan="columns">
                     <T>table.count</T>:
@@ -31,7 +47,7 @@
             </tbody>
             <tfoot>
             <tr>
-                <td :colspan="columns">
+                <td :colspan="columns + 1">
                     <nav v-if="pages > 1">
                         <ul class="pagination pagination-sm justify-content-center">
                             <li v-for="p in pagesRange" :class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']">
diff --git a/routes/profile.vue b/routes/profile.vue
index c6403465..7236cf08 100644
--- a/routes/profile.vue
+++ b/routes/profile.vue
@@ -14,16 +14,17 @@
                         <T>profile.edit</T>
                     </nuxt-link>
                 </div>
-                <div class="list-group" v-if="Object.keys(profiles).length > 1">
+                <div v-if="Object.keys(profiles).length > 1" class="locale-list">
                     <a :href="`https://pronouns.page/@${username}`" v-if="$user() && $user().username === username"
-                       class="list-group-item list-group-item-action small px-4 py-2 text-center"
+                       class="btn btn-outline-secondary btn-sm mb-1 mr-1"
                     >
                         <Icon v="external-link"/>
                         pronouns.page/@{{username}}
                     </a>
+                    <br/>
                     <LocaleLink v-for="(options, locale) in locales" :key="locale" v-if="profiles[locale] !== undefined"
                                 :locale="locale" :link="`/@${username}`"
-                                :class="['list-group-item list-group-item-action small px-4 py-2 text-center', locale === config.locale ? 'active disabled' : '']">
+                                :class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-1 mr-1']">
                         {{options.name}}
                     </LocaleLink>
                 </div>
@@ -231,4 +232,11 @@
             padding-left: calc(#{$list-group-item-padding-x} - 2px);
         }
     }
+
+    @include media-breakpoint-up('md', $grid-breakpoints) {
+        .locale-list {
+            max-width: 16rem;
+            text-align: right;
+        }
+    }
 </style>
diff --git a/routes/team.vue b/routes/team.vue
index 377aba08..bc0ab7b3 100644
--- a/routes/team.vue
+++ b/routes/team.vue
@@ -56,7 +56,7 @@
                     </a>
                 </h4>
                 <ul class="list-unstyled member-list">
-                    <li v-for="member in members" class="mb-2 d-flex">
+                    <li v-for="member in members" class="mb-3 d-flex">
                         <a :href="`https://pronouns.page/@${member.username}`">
                             <Avatar :user="member" dsize="4rem"/>
                         </a>
@@ -109,6 +109,12 @@
             font-size: $small-font-size;
         }
     }
+    @include media-breakpoint-down('md', $grid-breakpoints) {
+        figure {
+            float: none !important;
+            margin: 0 auto;
+        }
+    }
 
     .bigger {
         font-size: 2rem;