diff --git a/assets/css/style.scss b/assets/css/style.scss index b2a4637c840dda3ef206693c3994621ceba205c6..55699531c9ed08cde34ab647e3824569b6044b2a 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -87,3 +87,17 @@ thead.sortable th { } } } + +.uid { + @extend .text-truncate; + display: inline-block; + max-width: 200px; + + @media (min-width: 576px) { + max-width: 255px; + } + + @media (min-width: 992px) { + max-width: 205px; + } +} diff --git a/components/certif/List.vue b/components/certif/List.vue index 32dfa1b9511fe508711a4cab03bb599e43a9443b..d4d7f62b714060a15ee195ea8346857f5ca073b3 100644 --- a/components/certif/List.vue +++ b/components/certif/List.vue @@ -39,7 +39,7 @@ <th scope="row" class="py-1"> <div> <div class="d-flex"> - <div class="uid inline-block text-truncate"> + <div class="uid inline-block"> <span v-if="$favourites.list.includes(certif.uid)" >★ </span >{{ certif.uid }} @@ -140,16 +140,4 @@ 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/components/member/Card.vue b/components/member/Card.vue index 0b4d0edc85f5f189fc57125126d992c5cd9b7179..819ee135cc5f3e31a3f9483eac213d0e63b40321 100644 --- a/components/member/Card.vue +++ b/components/member/Card.vue @@ -1,9 +1,12 @@ <template> <div class="card member"> <div class="card-body"> - <div class="uid d-flex align-items-center justify-content-between mb-4"> + <div + class="uid-wrapper d-flex align-items-center justify-content-between mb-4"> <h2 class="card-title text-center"> - {{ hash.uid }} + <span class="text-truncate d-inline-block"> + {{ hash.uid }} + </span> <BadgeStatus :membre="hash" /> </h2> <button @@ -143,9 +146,13 @@ export default { </script> <style lang="scss"> -.uid { +.uid-wrapper { flex-direction: column; + .text-truncate { + max-width: 300px; + } + @media (min-width: 576px) { flex-direction: row; } diff --git a/components/member/List.vue b/components/member/List.vue index 56a25b6886036dc6c844ebe7b9f27a1d459753ea..f2181291b8a5f3b104703bb17d74e808e6a00b2b 100644 --- a/components/member/List.vue +++ b/components/member/List.vue @@ -1,7 +1,7 @@ <template> <div class="table-responsive pb-3"> <table class="table table-striped table-hover text-center"> - <thead class="thead-light sortable" v-if="displayHead"> + <thead class="thead-light sortable"> <tr> <th class="position-relative" scope="col" @click="sort('uid')"> <BtnSort @@ -14,7 +14,7 @@ scope="col" class="d-none d-md-table-cell position-relative" @click="sort('pubkey')" - v-if="displayPubkey"> + v-if="['search', 'favoris'].includes(type)"> <BtnSort fieldName="pubkey" :title="$t('cle.publique.title')" @@ -24,11 +24,22 @@ <th scope="col" class="d-none d-sm-table-cell position-relative" - @click="sort('date_sortie')" - v-if="displayDate"> + @click="sort('date_membership')" + v-if="['adhesion', 'favoris'].includes(type)"> <BtnSort - fieldName="date_sortie" - :title="getTitleDate" + fieldName="date_membership" + :title="$t('membre.datelimpertestatut')" + :currentSort="currentSort" + :currentSortDir="currentSortDir" /> + </th> + <th + scope="col" + class="d-none d-lg-table-cell position-relative" + @click="sort('date_certs')" + v-if="['certif', 'favoris'].includes(type)"> + <BtnSort + fieldName="date_certs" + :title="$t('membre.datemanquecertifs')" :currentSort="currentSort" :currentSortDir="currentSortDir" /> </th> @@ -38,9 +49,12 @@ <tbody> <tr v-for="member in membersSorted" :key="member.uid"> <th scope="row" @click="redirect(member.hash)"> - <div> - <span v-if="$favourites.list.includes(member.uid)">★ </span - >{{ member.uid }} + <div class="d-flex justify-content-center"> + <div class="uid inline-block"> + <span v-if="$favourites.list.includes(member.uid)">★ </span + >{{ member.uid }} + </div> + <BadgeDanger :limitDate=" Math.min( @@ -51,7 +65,7 @@ :memberStatus="member.status" /> </div> <div v-if="['adhesion', 'certif'].includes(type)" class="d-sm-none"> - <BadgeDate :date="date(member)" styleDate="long" /> + <BadgeDate :date="getDate(member)" styleDate="long" /> </div> <BadgeStatus :membre="member" /> <BadgeDispo @@ -62,15 +76,23 @@ </th> <td class="d-none d-md-table-cell" - v-if="displayPubkey" + v-if="['search', 'favoris'].includes(type)" @click="redirect(member.hash)"> {{ member.pubkey.substring(0, 10) }} </td> <td class="d-none d-sm-table-cell" - v-if="displayDate" + v-if="['adhesion', 'favoris'].includes(type)" + @click="redirect(member.hash)"> + <BadgeDate :date="member.limitDate" styleDate="long" /> + </td> + <td + class="d-none d-lg-table-cell" + v-if="['certif', 'favoris'].includes(type)" @click="redirect(member.hash)"> - <BadgeDate :date="date(member)" styleDate="long" /> + <BadgeDate + :date="member.received_certifications.limit" + styleDate="long" /> </td> <td class="py-1"> <button @@ -106,23 +128,15 @@ export default { type: Array, required: true }, - displayHead: { - type: Boolean, - default: true - }, - displayPubkey: { - type: Boolean, - default: true - }, - displayDate: { - type: Boolean, - default: true - }, type: { type: String, default: "default", validator: function (value) { - return ["adhesion", "certif", "default"].indexOf(value) !== -1 + return ( + ["adhesion", "certif", "favoris", "search", "default"].indexOf( + value + ) !== -1 + ) } }, defaultSortDir: { @@ -144,7 +158,7 @@ export default { } this.currentSort = s }, - date(member) { + getDate(member) { if (this.type == "adhesion") return member.limitDate if (this.type == "certif") return member.received_certifications.limit return Math.min(member.limitDate, member.received_certifications.limit) @@ -173,26 +187,14 @@ export default { b["pubkey"].toLowerCase(), modifier ) - } else if (this.currentSort == "date_sortie") { - if (this.type == "adhesion") { - return this.getOrder(a["limitDate"], b["limitDate"], modifier) - } else if (this.type == "certif") { - return this.getOrder( - a["received_certifications"]["limit"], - b["received_certifications"]["limit"], - modifier - ) - } else { - let minA = Math.min( - a["limitDate"], - a["received_certifications"]["limit"] - ) - let minB = Math.min( - b["limitDate"], - b["received_certifications"]["limit"] - ) - return this.getOrder(minA, minB, modifier) - } + } else if (this.currentSort == "date_membership") { + return this.getOrder(a["limitDate"], b["limitDate"], modifier) + } else if (this.currentSort == "date_certs") { + return this.getOrder( + a["received_certifications"]["limit"], + b["received_certifications"]["limit"], + modifier + ) } return 0 }) @@ -201,13 +203,6 @@ export default { let end = this.currentPage * this.pageSize if (index >= start && index < end) return true }) - }, - getTitleDate() { - if (["adhesion", "certif"].includes(this.type)) { - return this.$t("date") - } else { - return this.$t("membre.datelimpertestatut") - } } } } diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json index 97d51c64a528b4b2463049ecd592392408838e2b..200a2e874b32c7fcad60ab95c068913298f5674f 100644 --- a/i18n/locales/fr.json +++ b/i18n/locales/fr.json @@ -96,7 +96,7 @@ "title": "Membre calculant" }, "datelimadhesion": "Date limite d'adhésion", - "datelimpertestatut": "Perte du statut de membre", + "datelimpertestatut": "Perte d'adhesion", "datelimrevoc": "Date limite avant révocation ", "datemanquecertifs": "Date avant de manquer de certifs", "desc": "Individu dont l'adhésion est en cours et ayant reçu les 5 certifications nécessaires lui permettant de respecter la règle de distance. Ce qui lui permet d'être co-créateur de la monnaie via son Dividende Universel", diff --git a/pages/favoris.vue b/pages/favoris.vue index a43d7c3752a37f169028509d97be5fe208fab448..f07c11bedc6d7edb5cdf942794eaecf4d7c2e65d 100644 --- a/pages/favoris.vue +++ b/pages/favoris.vue @@ -11,8 +11,9 @@ </transition> <transition name="fade"> <MemberList - defaultSort="date_sortie" + defaultSort="date_membership" :members="favoris" + type="favoris" v-if=" !$apollo.queries.favoris.loading && favoris && favoris.length != 0 " /> diff --git a/pages/index.vue b/pages/index.vue index 69a87c44724f2e3a18eb6663bf07fd2a172e1509..30983f4d69a549898c1a5ef94aa86f1846fa1f17 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -10,27 +10,15 @@ <div class="row text-center"> <div class="col-md-6 col-lg-4"> <h2 class="h4 text-success">{{ $t("bienvenue") }}</h2> - <MemberList - :members="newMembers['entrees']" - :displayPubkey="false" - :displayHead="false" - :displayDate="false" /> + <MemberList :members="newMembers['entrees']" /> </div> <div class="col-md-6 col-lg-4"> <h2 class="h4 text-danger">{{ $t("aurevoir") }}</h2> - <MemberList - :members="newMembers['sorties']" - :displayPubkey="false" - :displayHead="false" - :displayDate="false" /> + <MemberList :members="newMembers['sorties']" /> </div> <div class="col-lg-4"> <h2 class="h4 text-info">{{ $t("revoila") }}</h2> - <MemberList - :members="newMembers['renew']" - :displayPubkey="false" - :displayHead="false" - :displayDate="false" /> + <MemberList :members="newMembers['renew']" /> </div> </div> </div> diff --git a/pages/membres/index.vue b/pages/membres/index.vue index 28c4d5c047eadd2c3563f7e48d153a5b0ba8d4e7..a0374ce0df944187d595d3dc46edadbc399e2669 100644 --- a/pages/membres/index.vue +++ b/pages/membres/index.vue @@ -28,7 +28,7 @@ idSearch && param.length > 2 && !$apollo.queries.idSearch.loading "> <div class="col-lg-9 col-xl-8 m-auto"> - <MemberList :members="idSearch.ids" /> + <MemberList :members="idSearch.ids" type="search" /> </div> </div> </transition> diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue index 6202bafaf0a30500fc3e11a959a1ea4e4c230c9b..1c5b77e1ea4587c171fa56b12cfe78d9a8cce7b9 100644 --- a/pages/previsions/futures_sorties.vue +++ b/pages/previsions/futures_sorties.vue @@ -22,7 +22,6 @@ <MemberList defaultSort="date_sortie" :members="memEnds" - :displayPubkey="false" type="adhesion" /> </div> <div class="col-lg-6" v-if="certEnds"> @@ -32,7 +31,6 @@ <MemberList defaultSort="date_sortie" :members="certEnds" - :displayPubkey="false" type="certif" /> </div> </div>