fix display of tables

assets/css/style.scss

@@ -53,6 +53,8 @@ $info: #0a8299;
 }
 
 .table {
+	table-layout: fixed;
+
 	&.sortable thead {
 		tr {
 			border-left: 1px solid var(--text-primary-color);
@@ -71,6 +73,10 @@ $info: #0a8299;
 	&-hover tbody tr {
 		cursor: pointer;
 	}
+
+	.td-date {
+		width: 160px;
+	}
 }
 
 .list-group-item {
@@ -97,20 +103,6 @@ $info: #0a8299;
 	}
 }
 
-.uid {
-	@extend .text-truncate;
-	display: inline-block;
-	max-width: 200px;
-
-	@media (min-width: 576px) {
-		max-width: 255px;
-	}
-
-	@media (min-width: 992px) {
-		max-width: 205px;
-	}
-}
-
 .icon {
 	width: 1.15rem;
 }

components/badge/Danger.vue

 <template>
 	<span
-		class="danger font-weight-normal"
 		:class="classWarning"
 		:title="title"
 		v-if="

components/btn/Search.vue

@@ -12,6 +12,7 @@
 				:value="value"
 				autocomplete="off"
 				@input="$emit('input', $event.target.value)"
+				@keyup="$emit('keyup', $event.keyCode)"
 				:placeholder="$t('recherche.title')"
 				:aria-label="$t('recherche.title')"
 				aria-describedby="rechHelp" />

components/btn/Sort.vue

 <template>
 	<div class="btn-sort px-2" tabindex="0">
-		{{ title }}
+		<span>{{ title }}</span>
 		<outline-sort-ascending-icon
-			class="ml-2 icon"
+			class="ml-2 icon flex-shrink-0"
 			v-if="currentSortDir == 'desc' && currentSort == fieldName" />
 		<outline-sort-descending-icon
-			class="ml-2 icon"
+			class="ml-2 icon flex-shrink-0"
 			v-if="currentSortDir == 'asc' && currentSort == fieldName" />
 	</div>
 </template>

components/certif/List.vue

 <template>
 	<div class="table-responsive" v-if="certifs.length > 0">
-		<input
-			type="text"
-			v-if="certifs.length > 5"
-			v-model="search"
-			class="form-control w-75 mx-auto my-2"
-			:placeholder="$t('recherche.title')" />
+		<BtnSearch v-model="search" class="col" v-if="certifs.length > 5" />
 		<table class="table table-striped table-hover sortable">
 			<thead class="thead-light">
 				<tr>
@@ -16,7 +11,7 @@
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
-					<th class="p-0" @click="sort('expires_on')">
+					<th class="p-0 td-date" @click="sort('expires_on')">
 						<BtnSort
 							class="justify-content-end"
 							:title="$t('expire')"
@@ -39,30 +34,25 @@
 						)
 					">
 					<th scope="row" class="py-1">
-						<div>
-							<div class="d-flex">
-								<div class="uid inline-block">
-									<span v-if="$favourites.list.includes(certif.uid)"
-										>★&nbsp;</span
-									>{{ certif.uid }}
-								</div>
-								&nbsp;
-								<BadgeDanger
-									:limitDate="certif.received_certifications.limit"
-									:memberStatus="certif.status" />
-							</div>
-							<BadgeStatus :membre="certif" />
-							<BadgeQuality
-								:quality="certif.quality.ratio"
-								v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
-							<BadgeDispo
-								:isDispo="certif.minDatePassed"
-								:dateDispo="certif.minDate"
-								:certifs="certif.sent_certifications"
-								v-if="certif.status == 'MEMBER'" />
+						<div class="d-flex">
+							<span v-if="$favourites.list.includes(certif.uid)">★&nbsp;</span>
+							<div class="text-truncate">{{ certif.uid }}</div>
+							&nbsp;
+							<BadgeDanger
+								:limitDate="certif.received_certifications.limit"
+								:memberStatus="certif.status" />
 						</div>
+						<BadgeStatus :membre="certif" />
+						<BadgeQuality
+							:quality="certif.quality.ratio"
+							v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
+						<BadgeDispo
+							:isDispo="certif.minDatePassed"
+							:dateDispo="certif.minDate"
+							:certifs="certif.sent_certifications"
+							v-if="certif.status == 'MEMBER'" />
 					</th>
-					<td class="text-right py-1">
+					<td class="text-right py-1 td-date">
 						<BadgeDate :date="certif.expires_on" styleDate="short" />
 						<small class="d-block" v-if="certif.pending">
 							<span class="badge badge-secondary">{{ $t("traitement") }}</span>

components/member/List.vue

@@ -28,7 +28,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none d-sm-table-cell p-0"
+						class="td-date d-none d-sm-table-cell p-0"
 						@click="sort('date_membership')"
 						v-if="['adhesion', 'favoris', 'search'].includes(type)">
 						<BtnSort
@@ -43,7 +43,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none p-0"
+						class="td-date d-none p-0"
 						:class="{
 							'd-sm-table-cell': type == 'certif',
 							'd-md-table-cell': type != 'certif'
@@ -60,31 +60,27 @@
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
-					<th v-if="type == 'favoris'"></th>
+					<th v-if="type == 'favoris'" style="width: 60px"></th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr v-for="member in membersSorted" :key="member.uid">
 					<th scope="row" @click="redirect(member.hash)">
 						<div class="d-flex justify-content-center">
-							<div class="uid inline-block">
-								<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
-								>{{ member.uid }}
-							</div>
+							<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span>
+							<div class="text-truncate">{{ member.uid }}</div>
 							&nbsp;
 							<BadgeDanger
-								:limitDate="
-									Math.min(
-										Math.max(member.received_certifications.limit, 1),
-										member.limitDate
-									)
-								"
+								:limitDate="member.received_certifications.limit"
 								:memberStatus="member.status" />
 						</div>
 						<div v-if="['adhesion', 'certif'].includes(type)" class="d-sm-none">
-							<BadgeDate :date="getDate(member)" styleDate="long" />
+							<BadgeDate :date="getDate(member)" styleDate="short" />
 						</div>
 						<BadgeStatus :membre="member" />
+						<BadgeQuality
+							:quality="member.quality.ratio"
+							v-if="!['REVOKED', 'NEWCOMER'].includes(member.status)" />
 						<BadgeDispo
 							:isDispo="member.minDatePassed"
 							:dateDispo="member.minDate"
@@ -98,13 +94,13 @@
 						{{ member.pubkey.substring(0, 10) }}
 					</td>
 					<td
-						class="d-none d-sm-table-cell"
+						class="td-date d-none d-sm-table-cell"
 						v-if="['adhesion', 'favoris', 'search'].includes(type)"
 						@click="redirect(member.hash)">
-						<BadgeDate :date="member.limitDate" styleDate="long" />
+						<BadgeDate :date="member.limitDate" styleDate="short" />
 					</td>
 					<td
-						class="d-none"
+						class="td-date d-none"
 						:class="{
 							'd-sm-table-cell': type == 'certif',
 							'd-md-table-cell': type != 'certif'
@@ -113,9 +109,9 @@
 						@click="redirect(member.hash)">
 						<BadgeDate
 							:date="member.received_certifications.limit"
-							styleDate="long" />
+							styleDate="short" />
 					</td>
-					<td class="py-1" v-if="type == 'favoris'">
+					<td class="py-1" v-if="type == 'favoris'" style="width: 60px">
 						<button
 							class="btn btn-danger"
 							v-if="$favourites.list.includes(member.uid)"

graphql/queries.js

@@ -32,6 +32,10 @@ export const LAST_EVENTS = gql`
 					minDatePassed
 					minDate
 					limitDate
+					quality {
+						__typename
+						ratio
+					}
 					history {
 						__typename
 						in
@@ -103,6 +107,10 @@ export const SEARCH_MEMBERS = gql`
 				minDatePassed
 				hash
 				limitDate
+				quality {
+					__typename
+					ratio
+				}
 				received_certifications {
 					__typename
 					limit
@@ -224,6 +232,10 @@ export const FAVORIS = gql`
 		limitDate
 		minDatePassed
 		minDate
+		quality {
+			__typename
+			ratio
+		}
 		received_certifications {
 			__typename
 			limit
@@ -247,6 +259,10 @@ export const NEXT_EXITS = gql`
 			minDatePassed
 			minDate
 			limitDate
+			quality {
+				__typename
+				ratio
+			}
 			received_certifications {
 				__typename
 				limit
@@ -281,6 +297,10 @@ export const NEXT_LOOSE_CERTS = gql`
 				minDatePassed
 				minDate
 				limitDate
+				quality {
+					__typename
+					ratio
+				}
 				received_certifications {
 					__typename
 					limit

pages/membre.vue

@@ -17,7 +17,7 @@
 					<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
 						<div class="col-sm-10 col-md-8 col-lg-5 mb-3 mx-auto">
 							<h3
-								class="h4 text-center"
+								class="h5 text-center"
 								:class="{
 									'text-success':
 										['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
@@ -43,7 +43,7 @@
 						<div
 							class="col-sm-10 col-md-8 col-lg-5 mx-auto"
 							v-if="['MISSING', 'MEMBER'].includes(idFromHash.status)">
-							<h3 class="h4 text-center">
+							<h3 class="h5 text-center">
 								{{ $t("certification.envoyees") }} ({{ nbCertifsSent
 								}}<span v-if="nbCertifsPendingSent != 0">{{
 									"&nbsp;+&nbsp;" + nbCertifsPendingSent

pages/membres/index.vue

@@ -3,7 +3,7 @@
 		<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
 		<div class="row mb-4">
 			<div class="col-sm-8 col-md-6 col-lg-5 m-auto">
-				<BtnSearch v-model="param" :help="$t('recherche.desc')" />
+				<BtnSearch v-model="param" :help="$t('recherche.desc')" @keyup="save" />
 			</div>
 		</div>
 		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />