add responsive classes

components/certif/List.vue

@@ -2,13 +2,15 @@
 <div class="list-group">
     <NuxtLink
       :to="'/hash/'+getNeighbor(certif).hash"
-      class="list-group-item list-group-item-action"
+      class="list-group-item list-group-item-action d-lg-flex justify-content-between align-items-center"
       :class="'list-group-item-'+ $options.filters.dateStatus(certif.expires_on)"
       v-for="certif in certifsTriees"
       :key="getNeighbor(certif).uid">
+      <div>
         {{ getNeighbor(certif).uid }}
         <BadgeStatus :statut="getNeighbor(certif).status" />
-        <small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
+      </div>
+    <small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
     </NuxtLink>
 </div>
 </template>

components/member/Card.vue

@@ -6,7 +6,7 @@
         <BadgeStatus :statut="hash.status" />
         </h2>
         <div class="card-subtitle mb-2 text-muted">{{ hash.pubkey }}</div>
-        <table class="table table-sm" v-if="hash.status != 'REVOKED'">
+        <table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
         <tbody>
             <tr v-if="hash.status == 'MEMBER'">
                 <th scope="row">Référent :</th>
@@ -27,8 +27,8 @@
                 }">{{ Math.round(hash.distance.value.ratio*100)/100 }}</td>
             </tr>
             <tr>
-                <th scope="row">Date limite d'adhésion :</th>
-                <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.limitDate)">{{ hash.limitDate | formatDate }}</td>
+                <th scope="row">{{ hash.status != 'MISSING' ? "Date limite d'adhésion" : "Date limite avant révocation"}} :</th>
+                <td :class="hash.status != 'MISSING' ? 'list-group-item-'+ $options.filters.dateStatus(hash.limitDate) : 'list-group-item-danger'">{{ hash.limitDate | formatDate }}</td>
             </tr>
             <tr v-if="hash.status == 'MEMBER'">
                 <th scope="row">Date avant de manquer de certifs :</th>

pages/hash/_hash.vue

@@ -3,16 +3,16 @@
     <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
     <div v-if="!$apollo.queries.idFromHash.loading">
       <div class="row">
-        <div class="col-6 mx-auto mt-3">
+        <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
           <MemberCard :hash="idFromHash" />
         </div>
       </div>
       <div class="row mt-3"  v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mb-3">
           <h3>Certifications reçues</h3>
           <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6">
           <h3>Certifications envoyées</h3>
           <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
         </div>