francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Trip: collapsible days on fullscreen map

Browse Source
This commit is contained in:
itskovacs 2025-10-06 18:43:58 +02:00
parent 545fd666b6
commit e5116e9d4d
3 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/src/app/components/trip/trip.component.html
View File

@ -530,21 +530,31 @@
</div> </div>
<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"> [class.prettyprint]="isPrinting">
<div class="pr-4 py-4 grid gap-4"> @if (isMapFullscreenDays) {
<h2 class="pl-4 font-semibold text-md">Days</h2> <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) { @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" <button (click)="toggleTripDayHighlight(day.id)"
[ngClass]="{'border-transparent': tripMapAntLayerDayID != day.id, 'border-blue-400': tripMapAntLayerDayID == day.id}"> [ngClass]="tripMapAntLayerDayID === day.id ? 'shadow-md bg-blue-500' : 'hover:bg-blue-50 dark:hover:bg-blue-950/20'"
<span class="w-full flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all">
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">{{ <span class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-lg font-semibold text-sm"
day.items.length }}</span> [ngClass]="tripMapAntLayerDayID === day.id ? 'bg-white text-blue-600' : 'bg-blue-100 text-blue-800 dark:bg-blue-900'">
<div class="truncate"> {{ 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 }} {{ day.label }}
</div> </span>
</button>
}
</div> </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>
</div> </div>
} }

11
src/src/app/components/trip/trip.component.ts
View File

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

16
src/src/styles.scss
View File

@ -258,3 +258,19 @@ html {
.a-slide-y { .a-slide-y {
animation: slide-y 0.3s both reverse; 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;
}