improve UI

components/member/Card.vue

 <template>
 <div class="card member">
     <div class="card-body">
-        <h2 class="card-title">
+        <h2 class="card-title text-center">
             {{ hash.uid }}
             <BadgeStatus :membre="hash" />
         </h2>
-        <div class="card-subtitle mb-2 text-muted">{{ hash.pubkey }}</div>
+        <div class="card-subtitle mb-2 text-muted text-center">{{ hash.pubkey }}</div>
         <table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
         <tbody>
             <tr v-if="hash.status == 'MEMBER'">
@@ -73,4 +73,8 @@ export default {
 .member
   th
     text-align: right
+
+.table
+    width: auto
+    margin: auto
 </style>
\ No newline at end of file

components/navigation/Bar.vue

@@ -29,7 +29,7 @@ export default {
   },
   mounted() {
     this.isOpen = localStorage.getItem("menu-open")
-    if (this.isOpen) {
+    if (this.isOpen == 'true') {
       document.querySelector('.app').classList.add('open')
     }
   }

components/navigation/menu/Sidebar.vue

 <template>
     <aside class="menu shadow position-fixed">
         <div class="nav_header pb-3 mb-5">
-
-
             <nuxt-link :to="localePath('/')" class="d-flex">
                 <div><img src="@/assets/img/logo.png" alt="Accueil" class="logo"></div>
                 <div><h1 class="h2">Wotwizard</h1><small class="text-muted">{{ $t('slogan') }}</small></div>
             </nuxt-link>
-
             <button type="button" class="close position-absolute d-xl-none" aria-label="Close" @click="toggleMenu">
                 <span aria-hidden="true">&times;</span>
             </button>

pages/index.vue

@@ -8,11 +8,11 @@
   <transition name="fade">
     <div class="result" v-if="newMembers">
       <div class="row text-center">
-        <div class="col-lg-4">
+        <div class="col-md-6 col-lg-4">
           <h2 class="h4 text-success">{{ $t('bienvenue') }}</h2>
           <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
         </div>
-        <div class="col-lg-4">
+        <div class="col-md-6 col-lg-4">
           <h2 class="h4 text-danger">{{ $t('aurevoir') }}</h2>
           <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
         </div>

pages/membres/_hash.vue

@@ -7,13 +7,13 @@
     <transition name="fade">
       <div v-if="idFromHash">
         <div class="row">
-          <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
+          <div class="mx-auto mt-3">
             <MemberCard :hash="idFromHash" />
           </div>
         </div>
         <div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
-          <div class="col-sm-8 col-lg-5 mb-3 mx-auto">
-            <h3 class="h4" :class="{
+          <div class="col-md-8 col-lg-5 mb-3 mx-auto">
+            <h3 class="h4 text-center" :class="{
               'text-success' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length>=5,
               'text-danger' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length<5,
             }">{{ $t('certifications.recues') }} ({{ idFromHash.received_certifications.certifications.length }})
@@ -21,8 +21,8 @@
             </h3>
             <CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
           </div>
-          <div class="col-sm-8 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
-            <h3 class="h4">{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
+          <div class="col-md-8 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
+            <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
             <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
           </div>
         </div>

pages/previsions/futurs_membres.vue

@@ -41,8 +41,8 @@
                     </th>
                     <td class="p-0">
                       <div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date">
-                        <div>{{ $d(new Date(date.date*1000), 'long') }} {{ $t('time.a') }} {{ $d(new Date(date.date*1000), 'hour') }}</div>
-                        <div>{{ date.proba * 100 }} %</div>
+                        <div class="forecast_date mr-3">{{ $d(new Date(date.date*1000), 'short') }} {{ $t('time.a') }} {{ $d(new Date(date.date*1000), 'hour').replace(" ", "&nbsp;") }}</div>
+                        <div>{{ date.proba * 100 }}&nbsp;%</div>
                       </div>
                     </td>
                   </tr>
@@ -56,12 +56,12 @@
               <table class="table table-striped">
                 <tbody>
                   <tr v-for="forecast in wwResult.forecastsByDates" :key="forecast.date">
-                    <th scope="row">{{ $d(new Date(forecast.date*1000), 'long') }} {{ $t('time.a') }} {{ $d(new Date(forecast.date*1000), 'hour') }}</th>
+                    <th scope="row" class="forecast_date">{{ $d(new Date(forecast.date*1000), 'short') }} {{ $t('time.a') }} {{ $d(new Date(forecast.date*1000), 'hour') }}</th>
                     <td class="p-0">
                       <div class="list-group rounded-0">
                         <nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="localePath('/membres/' + member.member.hash)" v-for="member in forecast.forecasts" :key="member.member.uid">
-                          <div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
-                          <div>{{ member.proba * 100 }} %</div>
+                          <div class="mr-3">{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
+                          <div>{{ member.proba * 100 }}&nbsp;%</div>
                         </nuxt-link>
                       </div>
                     </td>
@@ -190,4 +190,8 @@ export default {
     color: var(--text-primary-color);
   }
 }
+
+.forecast_date {
+  min-width: 150px;
+}
 </style>
\ No newline at end of file