From 1c03774530ac0dc8dd373fe6d3b97775a5c6073f Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Mon, 20 Dec 2021 22:17:07 +0100
Subject: [PATCH] add responsive classes

---
 components/certif/List.vue | 6 ++++--
 components/member/Card.vue | 6 +++---
 pages/hash/_hash.vue       | 6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/certif/List.vue b/components/certif/List.vue
index a35277c..c2f9e59 100644
--- a/components/certif/List.vue
+++ b/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>
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 9e70971..ab70e66 100644
--- a/components/member/Card.vue
+++ b/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>
diff --git a/pages/hash/_hash.vue b/pages/hash/_hash.vue
index c7ec3da..cbbb41b 100644
--- a/pages/hash/_hash.vue
+++ b/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>
-- 
GitLab