From 33d20a19991745e6aca6ab217bdb0dcda1f400db Mon Sep 17 00:00:00 2001 From: paidge <paidge_cs@hotmail.com> Date: Mon, 20 Dec 2021 06:48:27 +0100 Subject: [PATCH] =?UTF-8?q?encore=20des=20am=C3=A9liorations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/style.scss | 1 - components/certif/List.vue | 12 +++---- components/navigation/Bar.vue | 6 +++- layouts/default.vue | 4 +-- pages/hash/_hash.vue | 55 +++++++++++++++++++++------------ pages/{soin.vue => membres.vue} | 2 +- 6 files changed, 49 insertions(+), 31 deletions(-) rename pages/{soin.vue => membres.vue} (97%) diff --git a/assets/css/style.scss b/assets/css/style.scss index 5a6a721..bef49d0 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -22,7 +22,6 @@ $breadcrumb-divider-color: var(--text-primary-color); // List-groups $list-group-bg: var(--background-color-primary); $list-group-action-active-bg: transparent; -$list-group-hover-bg: transparent; $list-group-action-color: var(--text-primary-color); @import 'font'; diff --git a/components/certif/List.vue b/components/certif/List.vue index 81a1875..63b4e29 100644 --- a/components/certif/List.vue +++ b/components/certif/List.vue @@ -1,10 +1,10 @@ <template> -<ul class="list-group"> - <li class="list-group-item" v-for="certif in certifs"> - <div>{{ getNeighbor(certif) }}</div> +<div class="list-group"> + <NuxtLink :to="'/hash/'+getNeighbor(certif).hash" class="list-group-item list-group-item-action" v-for="certif in certifs" :key="getNeighbor(certif).uid"> + {{ getNeighbor(certif).uid }} <small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small> - </li> -</ul> + </NuxtLink> +</div> </template> <script> @@ -22,7 +22,7 @@ export default { }, methods : { getNeighbor(certif) { - return this.type == "recieved" ? certif.from.uid : certif.to.uid + return this.type == "recieved" ? certif.from : certif.to } } } diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue index 70f17e5..91047c7 100644 --- a/components/navigation/Bar.vue +++ b/components/navigation/Bar.vue @@ -103,7 +103,10 @@ nav.breadcrumb { h1 {color: var(--text-primary-color);} - .list-group-item div { + .list-group-item { + &-action:not(.active):hover {background: transparent;} + + div { transition: left .3s ease-in-out; left: 0; @@ -117,6 +120,7 @@ nav.breadcrumb { left: .5em; } } + } .open & { left: 0; diff --git a/layouts/default.vue b/layouts/default.vue index 6ea2fbb..b6f799f 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,7 +1,7 @@ <template> <div class="app"> <NavigationBar :breadcrumb="breadcrumb" :menus="menus" /> - <Nuxt /> + <Nuxt keep-alive /> </div> </template> @@ -16,7 +16,7 @@ export default { items : [ {path: '/appolo',title: 'Appolo'}, {path: '/chartjs',title: 'ChartJS'}, - {path: '/soin',title: 'Prendre soin de ses contacts'} + {path: '/membres',title: 'Prendre soin de ses contacts'} ]}, { title: 'Un menu', diff --git a/pages/hash/_hash.vue b/pages/hash/_hash.vue index 9621541..a563c0f 100644 --- a/pages/hash/_hash.vue +++ b/pages/hash/_hash.vue @@ -1,29 +1,26 @@ <template> <main class="content container"> - <div - class="spinner-border text-primary mx-auto d-block mb-3" - role="status" - v-if="$apollo.queries.idFromHash.loading"> - <span class="sr-only">Loading...</span> - </div> + <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="card"> <div class="card-body"> <h2 class="card-title">{{ idFromHash.uid }} <small><span class="badge badge-secondary">{{ idFromHash.status }}</span></small></h2> - <div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div> - <div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div> - <div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div> - <div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div> - <div> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div> - <div> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div> - <div> Nbre de certifs disponibles : {{ 100-idFromHash.sent_certifications.length }}</div> + <div v-if="idFromHash.status != 'REVOKED'"> + <div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div> + <div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div> + <div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div> + <div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div> + <div v-if="idFromHash.status != 'NEWCOMER'"> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div> + <div v-if="idFromHash.status != 'NEWCOMER'"> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div> + <div> Nbre de certifs disponibles : {{ 100-idFromHash.sent_certifications.length }}</div> + </div> </div> </div> </div> </div> - <div class="row mt-3"> + <div class="row mt-3" v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'"> <div class="col-6"> <h3>Certifications reçues</h3> <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" /> @@ -43,11 +40,25 @@ import gql from "graphql-tag" export default { data() { // Variables locales - return {}; + return { + breadcrumb: [ + { + text: 'Accueil', + to: '/' + }, + { + text: 'Membres', + to: '/membres' + }, + { + text: '', + active: true + } + ] + }; }, // Fonctions locales methods: { - }, apollo: { idFromHash: { @@ -102,15 +113,19 @@ export default { }, }, }, - mounted() { - // Mise à jour du fil d'ariane au chargement - $nuxt.$emit("changeRoute", this.breadcrumb); - }, computed: { isReferent () { const nb_certifs_referent = 5 return this.idFromHash.received_certifications.certifications.length > nb_certifs_referent && this.idFromHash.sent_certifications.length > nb_certifs_referent } + }, + watch: { + idFromHash: { + handler(n,o) { + this.breadcrumb[2].text = this.idFromHash.uid + $nuxt.$emit("changeRoute", this.breadcrumb); + } + } } }; </script> diff --git a/pages/soin.vue b/pages/membres.vue similarity index 97% rename from pages/soin.vue rename to pages/membres.vue index e8d99b8..520968f 100644 --- a/pages/soin.vue +++ b/pages/membres.vue @@ -1,6 +1,6 @@ <template> <main class="content"> - <h2 class="display-2 text-center mb-5">Prendre soin de ses contacts</h2> + <h2 class="display-2 text-center mb-5">Membres</h2> <div class="row mb-4"> <div class="col-6 m-auto text-center"> <label for="rech" class="form-label">Votre recherche</label> -- GitLab