UI fixes (#741)

* fix initial flyto bbox * preserve ui state when returning from connectiondetail * fix display of walking connections
motis-project · Feb 15, 2025 · 9e0a37c · 9e0a37c
1 parent 34e33b9
commit 9e0a37c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/ui/src/app.css b/ui/src/app.css
@@ -109,3 +109,7 @@
 .maplibregl-ctrl-group .maplibregl-ctrl-geolocate {
 	display: none;
 }
+
+.hide {
+	display: none;
+}
diff --git a/ui/src/lib/ConnectionDetail.svelte b/ui/src/lib/ConnectionDetail.svelte
@@ -63,7 +63,7 @@
 		<span class="ml-6">
 			{formatDurationSec(l.duration)}
 			{getModeName(l)}
-			{formatDistanceMeters(Math.round(l.distance!))}
+			{formatDistanceMeters(l.distance)}
 		</span>
 		{#if l.rental && l.rental.systemName}
 			<span class="ml-6">
@@ -88,7 +88,7 @@
 		{#if l.routeShortName}
 			<div class="w-full flex justify-between items-center space-x-1">
 				<Route {onClickTrip} {l} />
-				{#if pred && (pred.from.track || pred.duration !== 0)}
+				{#if pred && (pred.from.track || pred.duration !== 0) && (i != 1 || pred.routeShortName)}
 					<div class="border-t h-0 grow shrink"></div>
 					<div class="text-sm text-muted-foreground leading-none px-2">
 						{#if pred.from.track}

diff --git a/ui/src/lib/formatDuration.ts b/ui/src/lib/formatDuration.ts
@@ -10,7 +10,8 @@ export const formatDurationSec = (t: number): string => {
 	return str;
 };
 
-export const formatDistanceMeters = (m: number): string => {
+export const formatDistanceMeters = (m: number | undefined): string => {
+	if (!m) return '';
 	const kilometers = Math.floor(m / 1000);
 	const meters = kilometers > 5 ? 0 : Math.ceil(m - kilometers * 1000);
 	const str = [kilometers !== 0 ? kilometers + ' km' : '', meters !== 0 ? meters + ' m' : '']

diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
@@ -201,7 +201,7 @@
 				bottom: 96,
 				left: isSmallScreen ? 96 : 640
 			};
-			map.flyTo({ ...map.cameraForBounds(box), padding });
+			map.flyTo({ ...map.cameraForBounds(box, { padding }) });
 		}
 	};
 
@@ -299,27 +299,31 @@
 		</Control>
 	{/if}
 
-	{#if !isSmallScreen || (!page.state.selectedItinerary && !page.state.selectedStop)}
-		<Control position="top-left">
-			<Card class="w-[520px] overflow-y-auto overflow-x-hidden bg-background rounded-lg">
-				<SearchMask
-					bind:from
-					bind:to
-					bind:time
-					bind:timeType
-					bind:wheelchair
-					bind:bikeRental
-					bind:bikeCarriage
-					bind:selectedModes={selectedTransitModes}
-				/>
-			</Card>
-		</Control>
-	{/if}
+	<Control
+		position="top-left"
+		class={isSmallScreen && (page.state.selectedItinerary || page.state.selectedStop) ? 'hide' : ''}
+	>
+		<Card class="w-[520px] overflow-y-auto overflow-x-hidden bg-background rounded-lg">
+			<SearchMask
+				bind:from
+				bind:to
+				bind:time
+				bind:timeType
+				bind:wheelchair
+				bind:bikeRental
+				bind:bikeCarriage
+				bind:selectedModes={selectedTransitModes}
+			/>
+		</Card>
+	</Control>
 
 	<LevelSelect {bounds} {zoom} bind:level />
 
-	{#if !page.state.selectedItinerary && routingResponses.length !== 0}
-		<Control position="top-left" class="min-h-0 md:mb-2">
+	{#if routingResponses.length !== 0}
+		<Control
+			position="top-left"
+			class="min-h-0 md:mb-2 {page.state.selectedItinerary ? 'hide' : ''}"
+		>
 			<Card
 				class="w-[520px] h-full md:max-h-[70vh] overflow-y-auto overflow-x-hidden bg-background rounded-lg"
 			>