diff --git a/assets/css/style.scss b/assets/css/style.scss index a2855b36da97931503fc9d34a30c603ee97cad1f..66d32e45ee5035a0deb16be56f4f587fe673cc32 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -47,15 +47,3 @@ $mark-bg: yellow; thead.sortable th { cursor: pointer; } - -.up, -.down { - line-height: 10px; - font-size: 1.1rem; - transform: scale(1.5, 1); - opacity: 0.3; -} - -.sorted { - opacity: 1; -} diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue index c0609aad9fa2b5c93848bc891f69bffad1e24072..8c061a95128dc72c3cd6655fae28c682ca7c66c6 100644 --- a/components/btn/Sort.vue +++ b/components/btn/Sort.vue @@ -1,26 +1,34 @@ <template> - <div class="d-inline-block position-absolute ml-2"> - <div - class="up" - :class="{ - sorted: currentSortDir == 'desc' && currentSort == fieldName, - invisible: currentSortDir == 'asc' && currentSort == fieldName - }"> - â–² - </div> - <div - class="down" - :class="{ - sorted: currentSortDir == 'asc' && currentSort == fieldName, - invisible: currentSortDir == 'desc' && currentSort == fieldName - }"> - â–¼ + <div class="d-flex align-items-center"> + <div style="width: fit-content">{{ title }}</div> + <div class="ml-2"> + <div + class="up" + :class="{ + sorted: currentSortDir == 'desc' && currentSort == fieldName, + invisible: currentSortDir == 'asc' && currentSort == fieldName + }"> + â–² + </div> + <div + class="down" + :class="{ + sorted: currentSortDir == 'asc' && currentSort == fieldName, + invisible: currentSortDir == 'desc' && currentSort == fieldName + }"> + â–¼ + </div> </div> </div> </template> + <script> export default { props: { + title: { + type: String, + required: true + }, fieldName: { type: String, required: true @@ -42,3 +50,17 @@ export default { } } </script> + +<style lang="scss" scoped> +.up, +.down { + line-height: 10px; + font-size: 1.1rem; + transform: scale(1.5, 1); + opacity: 0.3; +} + +.sorted { + opacity: 1; +} +</style> diff --git a/components/certif/List.vue b/components/certif/List.vue index 9e498f594b071f92c39054c77a6ca60e443a0c47..e48244a50d1ed24e1155c71ac2f255747867556e 100644 --- a/components/certif/List.vue +++ b/components/certif/List.vue @@ -48,15 +48,15 @@ v-if="certifsTriees.length > 0"> <thead class="thead-light sortable"> <th class="position-relative" @click="sort('uid')"> - {{ $t("membres") }} <BtnSort + :title="$t('membres')" fieldName="uid" :currentSort="currentSort" :currentSortDir="currentSortDir" /> </th> <th class="position-relative" @click="sort('expires_on')"> - {{ $t("expire") }} <BtnSort + :title="$t('expire')" fieldName="expires_on" :currentSort="currentSort" :currentSortDir="currentSortDir" /> diff --git a/components/member/List.vue b/components/member/List.vue index a35ff113e5cb0e30805db32d06bfd5c9f099049d..5cf66caaa4fccf508d5e96abc48ebd748fb7b155 100644 --- a/components/member/List.vue +++ b/components/member/List.vue @@ -4,9 +4,9 @@ <thead class="thead-light sortable" v-if="displayHead"> <tr> <th class="position-relative" scope="col" @click="sort('uid')"> - UID <BtnSort - fieldName="uid" + fieldName="date_sortie" + title="UID" :currentSort="currentSort" :currentSortDir="currentSortDir" /> </th> @@ -15,9 +15,9 @@ class="d-none d-md-table-cell position-relative" @click="sort('pubkey')" v-if="displayPubkey"> - {{ $t("cle.publique.title") }} <BtnSort - fieldName="pubkey" + fieldName="date_sortie" + :title="$t('cle.publique.title')" :currentSort="currentSort" :currentSortDir="currentSortDir" /> </th> @@ -26,9 +26,9 @@ class="d-none d-sm-table-cell position-relative" @click="sort('date_sortie')" v-if="displayDate"> - {{ $t("membre.datelimpertestatut") }} <BtnSort fieldName="date_sortie" + :title="$t('membre.datelimpertestatut')" :currentSort="currentSort" :currentSortDir="currentSortDir" /> </th> diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue index 41c10694c961c691dd6f2b4b047e48703a5936aa..864725a017fe8e1905c4e79cfcd9b1ccdb966211 100644 --- a/pages/previsions/futures_sorties.vue +++ b/pages/previsions/futures_sorties.vue @@ -32,13 +32,7 @@ <transition name="fade"> <div v-if="wwResult && !$apollo.queries.wwResult.loading"> <div class="row"> - <div class="col-md-6 col-lg-6"> - <h2 class="h4 text-danger text-center">{{ $t("statut.renew") }}</h2> - <MemberList - :members="wwResult['membership']" - :displayPubkey="false" /> - </div> - <div class="col-md-6 col-lg-6"> + <div class="col-lg-6"> <h2 class="h4 text-danger text-center"> {{ $t("statut.bientotmanquecertif") }} </h2> @@ -46,6 +40,12 @@ :members="wwResult['outOfCerts']" :displayPubkey="false" /> </div> + <div class="col-lg-6"> + <h2 class="h4 text-danger text-center">{{ $t("statut.renew") }}</h2> + <MemberList + :members="wwResult['membership']" + :displayPubkey="false" /> + </div> </div> </div> </transition>