improve previsions page

components/badge/Dispo.vue

@@ -7,16 +7,15 @@
 		}">
 		<span v-if="isDispo">{{ $t("membre.dispo") }}</span>
 		<span v-else
-			>⏱&nbsp;
-			{{
+			>⏱&nbsp;{{
 				dateDispo == null
 					? "N/A"
 					: nbPendingCertifs +
 					  " (&nbsp;" +
 					  $d(new Date(dateDispo * 1000), "short") +
 					  ")"
-			}}</span
-		>
+			}}
+		</span>
 	</span>
 </template>
 

components/member/List.vue

@@ -89,7 +89,7 @@
 			<tbody>
 				<tr v-for="member in membersSorted" :key="member.uid">
 					<td @click="redirect(member.hash)">
-						<div class="d-flex uid-content">
+						<div class="d-flex">
 							<div
 								class="d-flex flex-column align-items-center justify-content-evenly flex-grow-1">
 								<div class="d-flex justify-content-center mw-100">

pages/previsions/index.vue

@@ -59,33 +59,36 @@
 													})
 												)
 											">
-											<th scope="row">
-												<span
-													v-if="$favourites.list.includes(forecast.member.uid)"
-													>★&nbsp;</span
-												>
-												{{ forecast.member.uid }}
-												<BadgeStatus :membre="forecast.member" />
-											</th>
-											<td class="p-0">
+											<td class="td-uid">
+												<span class="text-truncate mw-100 d-inline-block">
+													<span
+														v-if="
+															$favourites.list.includes(forecast.member.uid)
+														"
+														>★&nbsp;</span
+													>{{ forecast.member.uid }}
+												</span>
+											</td>
+											<td>
 												<div
-													class="d-flex justify-content-between p-3"
+													class="p-date d-flex justify-content-evenly gap-1 align-items-center"
 													v-for="date in forecast.forecasts"
 													:key="date.date">
 													<div
-														class="forecast_date me-3"
+														class="text-center"
 														v-if="date.date < 9999999999">
 														{{ $d(new Date(date.date * 1000), "short") }}
-														{{ $t("time.a") }}
-														{{
+														{{ $t("time.a") }}&nbsp;{{
 															$d(new Date(date.date * 1000), "hour").replace(
 																" ",
 																"&nbsp;"
 															)
 														}}
 													</div>
-													<div class="forecast_date me-3" v-else>N/A</div>
-													<div>{{ Math.round(date.proba * 100) }}&nbsp;%</div>
+													<div class="text-center" v-else>N/A</div>
+													<div class="badge bg-info">
+														{{ Math.round(date.proba * 100) }}&nbsp;%
+													</div>
 												</div>
 											</td>
 										</tr>
@@ -101,35 +104,37 @@
 										<tr
 											v-for="forecast in wwResult.forecastsByDates"
 											:key="forecast.date">
-											<th
-												scope="row"
-												class="forecast_date"
-												v-if="forecast.date < 9999999999">
+											<td class="text-center" v-if="forecast.date < 9999999999">
 												{{ $d(new Date(forecast.date * 1000), "short") }}
-												{{ $t("time.a") }}
-												{{ $d(new Date(forecast.date * 1000), "hour") }}
-											</th>
-											<th scope="row" class="forecast_date" v-else>N/A</th>
-											<td class="p-0">
-												<div class="list-group rounded-0">
+												{{ $t("time.a") }}&nbsp;{{
+													$d(new Date(forecast.date * 1000), "hour").replace(
+														" ",
+														"&nbsp;"
+													)
+												}}
+											</td>
+											<td v-else>N/A</td>
+											<td class="p-0 td-uid">
+												<div class="list-group">
 													<nuxt-link
-														class="list-group-item list-group-item-action border-0 d-flex justify-content-between p-3"
+														class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center"
 														:to="
 															localePath('/membre/?hash=' + member.member.hash)
 														"
 														v-for="member in forecast.forecasts"
 														:key="member.member.uid">
-														<div class="me-3">
-															<span
-																v-if="
-																	$favourites.list.includes(member.member.uid)
-																"
-																>★&nbsp;</span
-															>
-															{{ member.member.uid }}
-															<BadgeStatus :membre="member.member" />
+														<div class="mw-100 text-center">
+															<span class="text-truncate d-inline-block mw-100">
+																<span
+																	v-if="
+																		$favourites.list.includes(member.member.uid)
+																	"
+																	>★&nbsp;</span
+																>
+																{{ member.member.uid }}
+															</span>
 														</div>
-														<div>
+														<div class="badge bg-info">
 															{{ Math.round(member.proba * 100) }}&nbsp;%
 														</div>
 													</nuxt-link>
@@ -271,15 +276,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.p-date,
+.list-group-item {
+	flex-direction: column;
+
+	&:not(:last-child) {
+		border-bottom: 1px solid var(--border-color) !important;
+	}
+}
+
 .list-group-item {
 	background: transparent;
+
 	&:hover {
 		background: var(--bg-secondary-color);
 		color: var(--txt-primary-color);
 	}
 }
 
-.forecast_date {
-	min-width: 150px;
+.td-uid {
+	width: 50%;
+}
+
+@media (min-width: 576px) {
+	.p-date,
+	.list-group-item {
+		flex-direction: row;
+		padding: 0.5rem;
+	}
 }
 </style>