improve BtnSort

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;
-}

components/btn/Sort.vue

 <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>

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" />

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>

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>