From 0f7b159e062c12a87beef18a49f8817bc5da194f Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Mon, 31 Jan 2022 13:55:10 +0100
Subject: [PATCH] improve display for smartphones in CertifList
---
components/certif/List.vue | 19 +++++++++++++++----
graphql/queries.js | 4 ++++
i18n/locales/dateTimeFormats.js | 4 ++--
i18n/locales/en.json | 2 +-
i18n/locales/es.json | 2 +-
i18n/locales/fr.json | 2 +-
pages/membre.vue | 4 ++--
7 files changed, 26 insertions(+), 11 deletions(-)
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 42c01ac..570fd3e 100644
--- a/components/certif/List.vue
+++ b/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)">★ </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>
diff --git a/graphql/queries.js b/graphql/queries.js
index ac7d22d..d7a563c 100644
--- a/graphql/queries.js
+++ b/graphql/queries.js
@@ -107,6 +107,10 @@ export const SEARCH_MEMBERS = gql`
__typename
limit
}
+ sent_certifications {
+ __typename
+ pending
+ }
}
}
}
diff --git a/i18n/locales/dateTimeFormats.js b/i18n/locales/dateTimeFormats.js
index 5ba91d1..9ad7bcc 100644
--- a/i18n/locales/dateTimeFormats.js
+++ b/i18n/locales/dateTimeFormats.js
@@ -1,7 +1,7 @@
const objTime = {
short: {
- day: "numeric",
- month: "short",
+ day: "2-digit",
+ month: "2-digit",
year: "2-digit"
},
long: {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index abece6e..3d11593 100644
--- a/i18n/locales/en.json
+++ b/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",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 8ef0f7b..c4cd434 100644
--- a/i18n/locales/es.json
+++ b/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",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index 9ab92d4..df72ff4 100644
--- a/i18n/locales/fr.json
+++ b/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",
diff --git a/pages/membre.vue b/pages/membre.vue
index 9fcab21..c9e18ef 100644
--- a/pages/membre.vue
+++ b/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
--
GitLab