From e872b6c4af4afcd0d8e4d73f01cafa23f325e0c2 Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Tue, 25 Jan 2022 17:37:26 +0100
Subject: [PATCH] improve BtnSort
---
assets/css/style.scss | 12 -------
components/btn/Sort.vue | 54 +++++++++++++++++++---------
components/certif/List.vue | 4 +--
components/member/List.vue | 10 +++---
pages/previsions/futures_sorties.vue | 14 ++++----
5 files changed, 52 insertions(+), 42 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
index a2855b3..66d32e4 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 c0609aa..8c061a9 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 9e498f5..e48244a 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 a35ff11..5cf66ca 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 41c1069..864725a 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>
--
GitLab