💄 Trip: collapsible days on fullscreen map

src/src/app/components/trip/trip.component.html

@@ -530,22 +530,32 @@
 </div>
 
 <div
-  class="fixed bottom-4 left-2 bg-white shadow rounded dark:bg-surface-900 min-w-32 max-w-48 max-h-96 overflow-y-auto"
+  class="fixed bottom-6 left-6 z-40 w-40 md:w-60 max-h-[50vh] bg-white/90 dark:bg-surface-900/90 backdrop-blur-lg shadow-xl rounded-md overflow-hidden"
   [class.prettyprint]="isPrinting">
-  <div class="pr-4 py-4 grid gap-4">
-    <h2 class="pl-4 font-semibold text-md">Days</h2>
-    @for (day of trip?.days; track day.id) {
-    <div (click)="toggleTripDayHighlight(day.id)" class="flex gap-4 items-center cursor-pointer min-w-0 border-l-4 pl-2"
-      [ngClass]="{'border-transparent': tripMapAntLayerDayID != day.id, 'border-blue-400': tripMapAntLayerDayID == day.id}">
-      <span
-        class="w-10 text-center bg-blue-100 text-blue-800 text-sm px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-blue-100/85">{{
-        day.items.length }}</span>
-      <div class="truncate">
+  @if (isMapFullscreenDays) {
+  <div animate.enter="expand" animate.leave="collapse" class="overflow-y-auto max-h-[calc(30vh-5rem)] p-2 space-y-1">
+    @for(day of trip?.days; track day.id) {
+    <button (click)="toggleTripDayHighlight(day.id)"
+      [ngClass]="tripMapAntLayerDayID === day.id ? 'shadow-md bg-blue-500' : 'hover:bg-blue-50 dark:hover:bg-blue-950/20'"
+      class="w-full flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all">
+      <span class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-lg font-semibold text-sm"
+        [ngClass]="tripMapAntLayerDayID === day.id ? 'bg-white text-blue-600' : 'bg-blue-100 text-blue-800 dark:bg-blue-900'">
+        {{ day.items.length }}
+      </span>
+      <span class="flex-1 text-left text-sm font-medium truncate"
+        [ngClass]="tripMapAntLayerDayID === day.id ? 'text-white' : 'text-gray-900 dark:text-gray-50'">
         {{ day.label }}
-      </div>
-    </div>
+      </span>
+    </button>
     }
   </div>
+  }
+
+  <div [ngClass]="isMapFullscreenDays ? 'border-t border-gray-200 dark:border-surface-700' : ''"
+    class="px-4 py-3 cursor-pointer select-none flex justify-between items-center" (click)="toggleMapFullscreenDays()">
+    <h2 class="font-semibold text-sm">Days</h2>
+    <i [ngClass]="isMapFullscreenDays ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" class="text-gray-500"></i>
+  </div>
 </div>
 }
 

src/src/app/components/trip/trip.component.ts

@@ -101,6 +101,7 @@ export class TripComponent implements AfterViewInit {
   isPrinting = false;
 
   isMapFullscreen = false;
+  isMapFullscreenDays = false;
   totalPrice = 0;
   collapsedTripDays = false;
   collapsedTripPlaces = false;
@@ -549,6 +550,10 @@ export class TripComponent implements AfterViewInit {
     }, 10);
   }
 
+  toggleMapFullscreenDays() {
+    this.isMapFullscreenDays = !this.isMapFullscreenDays;
+  }
+
   updateTotalPrice(n?: number) {
     if (n) {
       this.totalPrice += n;
@@ -562,7 +567,7 @@ export class TripComponent implements AfterViewInit {
 
   resetPlaceHighlightMarker() {
     if (this.tripMapHoveredElement) {
-      this.tripMapHoveredElement.classList.remove("listHover");
+      this.tripMapHoveredElement.classList.remove("list-hover");
       this.tripMapHoveredElement = undefined;
     }
 
@@ -610,7 +615,7 @@ export class TripComponent implements AfterViewInit {
     const markerElement = marker.getElement() as HTMLElement; // search for Marker. If 'null', is inside Cluster
     if (markerElement) {
       // marker, not clustered
-      markerElement.classList.add("listHover");
+      markerElement.classList.add("list-hover");
       this.tripMapHoveredElement = markerElement;
       targetLatLng = marker.getLatLng();
     } else {
@@ -621,7 +626,7 @@ export class TripComponent implements AfterViewInit {
       if (parentCluster) {
         const clusterEl = parentCluster.getElement();
         if (clusterEl) {
-          clusterEl.classList.add("listHover");
+          clusterEl.classList.add("list-hover");
           this.tripMapHoveredElement = clusterEl;
         }
         targetLatLng = parentCluster.getLatLng();

src/src/styles.scss

@@ -258,3 +258,19 @@ html {
 .a-slide-y {
   animation: slide-y 0.3s both reverse;
 }
+
+.expand {
+  height: auto;
+  opacity: 1;
+  transition:
+    height 300ms ease-out,
+    opacity 300ms ease-out;
+}
+
+.collapse {
+  height: 0;
+  opacity: 0;
+  transition:
+    height 300ms ease-in,
+    opacity 300ms ease-in;
+}