diff --git a/components/badge/Dispo.vue b/components/badge/Dispo.vue index 2c8e22718b00bbdcdbb2c366aee2116238a2eb93..3d808e5fa7f8f6996f912858c5c6eee68d6a40ff 100644 --- a/components/badge/Dispo.vue +++ b/components/badge/Dispo.vue @@ -7,16 +7,15 @@ }"> <span v-if="isDispo">{{ $t("membre.dispo") }}</span> <span v-else - >Ⱡ- {{ + >Ⱡ{{ dateDispo == null ? "N/A" : nbPendingCertifs + " ( " + $d(new Date(dateDispo * 1000), "short") + ")" - }}</span - > + }} + </span> </span> </template> diff --git a/components/member/List.vue b/components/member/List.vue index 7743b7ef032450b3237d925a057710270dcd4d54..1e2c213115d3ba0ec69e5500377c626a32ae85f4 100644 --- a/components/member/List.vue +++ b/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"> diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue index e855c73345695f1d44418b251cbd6cb580fb8246..b9c9c58f9ac6698bb35b0058f6efe3fdc133419c 100644 --- a/pages/previsions/index.vue +++ b/pages/previsions/index.vue @@ -59,33 +59,36 @@ }) ) "> - <th scope="row"> - <span - v-if="$favourites.list.includes(forecast.member.uid)" - >★ </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) + " + >★ </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") }} {{ $d(new Date(date.date * 1000), "hour").replace( " ", " " ) }} </div> - <div class="forecast_date me-3" v-else>N/A</div> - <div>{{ Math.round(date.proba * 100) }} %</div> + <div class="text-center" v-else>N/A</div> + <div class="badge bg-info"> + {{ Math.round(date.proba * 100) }} % + </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") }} {{ + $d(new Date(forecast.date * 1000), "hour").replace( + " ", + " " + ) + }} + </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) - " - >★ </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) + " + >★ </span + > + {{ member.member.uid }} + </span> </div> - <div> + <div class="badge bg-info"> {{ Math.round(member.proba * 100) }} % </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>