evol: refonte visuelle trajets/disponibilités conducteur + font Poppins

web/layouts/organized_carpool/_partials/driver_availabilities.html

@@ -8,50 +8,45 @@
   <div class="px-4 py-5 sm:px-6">
     <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Trajets</h2>
   </div>
-  <div class="border-t border-gray-200 px-4">
-    <div class="">
+  <div class="border-t border-gray-200 px-4 py-4 space-y-3">
       {{ range .ViewState.trips }}
       {{$departure := index .Features 0}}
       {{$destination := index .Features 1}}
-      <div class="my-10">
-      <div class="flex flex-row my-2">
-        {{range .ExtraMembers.properties.schedules}}
-        <span class="p-1 text-xs mr-2 bg-co-blue text-white rounded-lg">
-        {{ if eq .day "SUN"}}Dimanche
-        {{ else if eq .day "MON"}}Lundi
-        {{ else if eq .day "TUE"}}Mardi
-        {{ else if eq .day "WED"}}Mercredi
-        {{ else if eq .day "THU"}}Jeudi
-        {{ else if eq .day "FRI"}}Vendredi
-        {{ else if eq .day "SAT"}}Samedi
-        {{ end }}
-        {{.time_of_day}}
-
-        </span>
-        {{end}}
-      </div>
-      <div class="flex flex-row">
-        <div class="flex-1 text-sm">
-          {{$departure.Properties.label}}
+      {{$schedules := .ExtraMembers.properties.schedules}}
+      {{$firstSchedule := index $schedules 0}}
+      <div class="border border-gray-200 rounded-2xl p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex gap-2">
+            {{range $schedules}}
+            <span class="inline-flex items-center justify-center w-8 h-8 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none">{{ if eq .day "MON"}}Lu{{ else if eq .day "TUE"}}Ma{{ else if eq .day "WED"}}Me{{ else if eq .day "THU"}}Je{{ else if eq .day "FRI"}}Ve{{ else if eq .day "SAT"}}Sa{{ else if eq .day "SUN"}}Di{{ end }}</span>
+            {{end}}
+          </div>
+          <span class="text-sm font-bold text-gray-900">{{$firstSchedule.time_of_day}}</span>
         </div>
-        <div>
-          {{$.IconSet.Icon "hero:outline/chevron-right" "h-5 w-5 mr-3"}}
+        <div class="relative ml-2">
+          <div class="absolute left-[5px] top-[10px] bottom-[10px] w-0.5 bg-co-blue"></div>
+          <div class="relative flex items-center gap-3 mb-2">
+            <div class="w-3 h-3 rounded-full bg-co-blue shrink-0 z-10"></div>
+            <p class="text-sm text-gray-900 truncate" title="{{$departure.Properties.label}}">{{$departure.Properties.label}}</p>
+          </div>
+          <div class="relative flex items-center gap-3">
+            <div class="w-3 h-3 rounded-full border-2 border-co-blue bg-white shrink-0 z-10"></div>
+            <p class="text-sm text-gray-500 truncate" title="{{$destination.Properties.label}}">{{$destination.Properties.label}}</p>
+          </div>
         </div>
-        <div class="flex-1 text-sm text-right">
-          {{$destination.Properties.label}}
+        <div class="mt-3 flex justify-end">
+          <a class="text-xs text-gray-400 hover:text-co-red transition-colors" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a>
         </div>
       </div>
-      <div>
-        <div class="flex-none text-sm text-right"><a class="text-co-blue" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a></div>
-      </div>
-      </div>
       {{ end }}
+  </div>
+    <div class="px-4 py-4 text-center">
+      <button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
+        class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
+        {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
+        Ajouter un trajet
+      </button>
     </div>
-    <button type="button" @click="availabilitiesdialog = !availabilitiesdialog" 
-      class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue my-4 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
-      {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
-      Ajouter un trajet
-    </button>
   </div>
   <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
        x-show="availabilitiesdialog">

web/layouts/solidarity_transport/_partials/driver_availabilities.html

@@ -7,28 +7,25 @@
   <div class="px-4 py-5 sm:px-6">
     <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Disponibilités</h2>
   </div>
-  <div class="border-t border-gray-200 px-4">
-    <div class="py-4">
+  <div class="border-t border-gray-200 px-4 py-4 space-y-3">
       {{ range .ViewState.availabilities }}
-      <div class="flex flex-row">
-        <div class="flex-none">
-        {{ if eq .Day 0}}Dimanche
-        {{ else if eq .Day 1}}Lundi
-        {{ else if eq .Day 2}}Mardi
-        {{ else if eq .Day 3}}Mercredi
-        {{ else if eq .Day 4}}Jeudi
-        {{ else if eq .Day 5}}Vendredi
-        {{ else if eq .Day 6}}Samedi
-        {{ end }}
-        {{.StartTime}} - {{ .EndTime }}
+      <div class="border border-gray-200 rounded-2xl p-3">
+        <div class="flex items-center gap-2.5">
+          <span class="inline-flex items-center justify-center w-9 h-9 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none shrink-0">{{ if eq .Day 0}}Di{{ else if eq .Day 1}}Lu{{ else if eq .Day 2}}Ma{{ else if eq .Day 3}}Me{{ else if eq .Day 4}}Je{{ else if eq .Day 5}}Ve{{ else if eq .Day 6}}Sa{{ end }}</span>
+          <div class="min-w-0">
+            <p class="text-xs font-semibold text-gray-900">{{ if eq .Day 0}}Dimanche{{ else if eq .Day 1}}Lundi{{ else if eq .Day 2}}Mardi{{ else if eq .Day 3}}Mercredi{{ else if eq .Day 4}}Jeudi{{ else if eq .Day 5}}Vendredi{{ else if eq .Day 6}}Samedi{{ end }} <span class="font-normal text-gray-500">{{.StartTime}} — {{.EndTime}}</span></p>
+            {{if .Address}}<p class="text-[11px] text-gray-400 leading-tight mt-0.5" title="{{.Address.Properties.label}}">{{.Address.Properties.label}}</p>{{end}}
+          </div>
+        </div>
+        <div class="mt-1.5 flex justify-end">
+          <a class="text-[10px] text-gray-400 hover:text-co-red transition-colors" href="/app/solidarity-transport/drivers/{{$.ViewState.driver.ID}}/availabilities/{{.ID}}/delete">Supprimer</a>
         </div>
-        <div class="flex-auto">&nbsp;</div>
-        <div class="flex-none text-sm"><a class="text-co-blue" href="/app/solidarity-transport/drivers/{{$.ViewState.driver.ID}}/availabilities/{{.Id}}/delete">Supprimer</a></div>
       </div>
       {{ end }}
-    </div>
-    <button type="button" @click="availabilitiesdialog = !availabilitiesdialog" 
-      class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue my-4 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto">
+  </div>
+  <div class="px-4 py-4 text-center">
+    <button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
+      class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
       {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
       Ajouter une disponibilité
     </button>