improve display for smartphones in CertifList

components/certif/List.vue

@@ -57,6 +57,7 @@
 				</th>
 				<th class="position-relative" @click="sort('expires_on')">
 					<BtnSort
+						class="justify-content-end"
 						:title="$t('expire')"
 						fieldName="expires_on"
 						:currentSort="currentSort"
@@ -78,15 +79,13 @@
 					<th scope="row" class="py-1">
 						<div>
 							<span v-if="$favourites.list.includes(certif.uid)">★&nbsp;</span>
-							{{ certif.uid }}
+							<div class="uid inline-block text-truncate">{{ certif.uid }}</div>
 							<BadgeDanger
 								:limitDate="certif.received_certifications.limit"
 								:memberStatus="certif.status" />
 							<BadgeQuality
 								:quality="certif.quality.ratio"
 								v-if="certif.status != 'REVOKED'" />
-						</div>
-						<div>
 							<BadgeStatus :membre="certif" />
 							<BadgeDispo
 								:isDispo="certif.minDatePassed"
@@ -96,7 +95,7 @@
 						</div>
 					</th>
 					<td class="text-right py-1">
-						<BadgeDate :date="certif.expires_on" styleDate="long" />
+						<BadgeDate :date="certif.expires_on" styleDate="short" />
 					</td>
 				</tr>
 			</tbody>
@@ -186,4 +185,16 @@ thead th:last-child {
 	padding-right: 1.5rem;
 	text-align: right;
 }
+
+.uid {
+	max-width: 130px;
+
+	@media (min-width: 576px) {
+		max-width: 255px;
+	}
+
+	@media (min-width: 992px) {
+		max-width: 205px;
+	}
+}
 </style>

graphql/queries.js

@@ -107,6 +107,10 @@ export const SEARCH_MEMBERS = gql`
 					__typename
 					limit
 				}
+				sent_certifications {
+					__typename
+					pending
+				}
 			}
 		}
 	}

i18n/locales/dateTimeFormats.js

 const objTime = {
 	short: {
-		day: "numeric",
-		month: "short",
+		day: "2-digit",
+		month: "2-digit",
 		year: "2-digit"
 	},
 	long: {

i18n/locales/en.json

@@ -73,7 +73,7 @@
 		"desc": "Cryptocurrency software using a blockchain, compliant with the Relative Theory of Money (RTM) and using the web of trust for the identification of the co-producing members of the currency",
 		"title": "Duniter"
 	},
-	"expire": "Expires",
+	"expire": "Expiry",
 	"favoris": {
 		"enregistre": "Saved to favorites !",
 		"none": "You don't have any favorites yet",

i18n/locales/es.json

@@ -73,7 +73,7 @@
 		"desc": "Software de criptomonedas que utiliza una cadena de bloques, que cumple con la Teoría Relativa del Dinero (TRD) y utiliza la red de confianza para la identificación de los miembros coproductores de la moneda",
 		"title": "Duniter"
 	},
-	"expire": "Expira el",
+	"expire": "Expiración",
 	"favoris": {
 		"enregistre": "¡Guardado en favoritos!",
 		"none": "Aún no tienes favoritos",

i18n/locales/fr.json

@@ -73,7 +73,7 @@
 		"desc": "Logiciel de crypto-monnaie utilisant une blockchain, conforme à la Théorie Relative de la Monnaie (TRM) et utilisant la toile de confiance pour l'identification des membres co-producteurs de la monnaie",
 		"title": "Duniter"
 	},
-	"expire": "Expire le",
+	"expire": "Expiration",
 	"favoris": {
 		"enregistre": "Enregistré dans les favoris !",
 		"none": "Vous n'avez pas encore de favoris",

pages/membre.vue

@@ -15,7 +15,7 @@
 				</div>
 				<div class="container">
 					<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
-						<div class="col-sm-10 col-md-7 col-lg-5 mb-3 mx-auto">
+						<div class="col-sm-10 col-md-8 col-lg-5 mb-3 mx-auto">
 							<h3
 								class="h4 text-center"
 								:class="{
@@ -41,7 +41,7 @@
 								type="received" />
 						</div>
 						<div
-							class="col-sm-10 col-md-7 col-lg-5 mx-auto"
+							class="col-sm-10 col-md-8 col-lg-5 mx-auto"
 							v-if="['MISSING', 'MEMBER'].includes(idFromHash.status)">
 							<h3 class="h4 text-center">
 								{{ $t("certification.envoyees") }} ({{ nbCertifsSent