(Mobile) UI improvements (#705)

* ui: move components to lib * ui: make components more responsive * ui: more compact layout * ui: i18n fixes * ui: make toggle button state more visible * ui: error handling, avoid repeated effect triggering * ui: more small screen adjustments * ui: url state handling * ui: show backend error msgs, compact transfer display
motis-project · Jan 19, 2025 · 945ebef · 945ebef
1 parent 3c361bb
commit 945ebef
Show file tree

Hide file tree

Showing 26 changed files with 328 additions and 205 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -18,7 +18,7 @@
 		"@hey-api/openapi-ts": "^0.53.11",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/kit": "^2.12.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@types/eslint": "^8.56.0",
 		"@types/polyline": "^0.1.32",

diff --git a/ui/src/app.css b/ui/src/app.css
@@ -97,3 +97,11 @@
 .maplibregl-popup-content {
 	background-color: hsl(var(--background)) !important;
 }
+
+.maplibregl-control-container .maplibregl-ctrl-top-left {
+	max-width: 100%;
+	bottom: 1rem;
+	display: flex;
+	flex-direction: column;
+	z-index: 3;
+}
diff --git a/ui/src/app.d.ts b/ui/src/app.d.ts
@@ -1,11 +1,19 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import type { Itinerary } from '$lib/openapi';
+
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
-		// interface PageState {}
+		interface PageState {
+			selectedItinerary?: Itinerary;
+			selectedStop?: { name: string; stopId: string; time: Date };
+			stopArriveBy?: boolean;
+			tripId?: string;
+		}
 		// interface Platform {}
 	}
 }

diff --git a/ui/src/routes/ConnectionDetail.svelte → ui/src/lib/ConnectionDetail.svelte b/ui/src/routes/ConnectionDetail.svelte → ui/src/lib/ConnectionDetail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ArrowRight from 'lucide-svelte/icons/arrow-right';
 	import type { Itinerary, Leg } from '$lib/openapi';
-	import Time from '../lib/Time.svelte';
+	import Time from '$lib/Time.svelte';
 	import { routeBorderColor, routeColor } from '$lib/modeStyle';
 	import { formatDurationSec, formatDistanceMeters } from '$lib/formatDuration';
 	import { Button } from '$lib/components/ui/button';
@@ -31,15 +31,21 @@
 )}
 	<Time
 		variant="schedule"
-		class="font-semibold mr-2"
+		class="font-semibold w-16"
+		{isRealtime}
+		{timestamp}
+		{scheduledTimestamp}
+	/>
+	<Time
+		variant="realtime"
+		class="font-semibold w-16"
 		{isRealtime}
 		{timestamp}
 		{scheduledTimestamp}
 	/>
-	<Time variant="realtime" class="font-semibold" {isRealtime} {timestamp} {scheduledTimestamp} />
 	{#if stopId}
 		<Button
-			class="col-span-5 mr-6 text-lg justify-normal text-wrap text-left"
+			class="text-[length:inherit] leading-none justify-normal text-wrap text-left"
 			variant="link"
 			onclick={() => {
 				onClickStop(name, stopId, new Date(timestamp));
@@ -48,7 +54,7 @@
 			{name}
 		</Button>
 	{:else}
-		<span class="col-span-5 mr-6">{name}</span>
+		<span>{name}</span>
 	{/if}
 {/snippet}
 
@@ -83,8 +89,8 @@
 			<div class="w-full flex justify-between items-center space-x-1">
 				<Route {onClickTrip} {l} />
 				{#if pred && (pred.from.track || pred.duration !== 0)}
-					<div class="border-t w-full h-0"></div>
-					<div class="text-sm text-muted-foreground text-nowrap px-2">
+					<div class="border-t h-0 grow shrink"></div>
+					<div class="text-sm text-muted-foreground leading-none px-2">
 						{#if pred.from.track}
 							{t.arrivalOnTrack} {pred.from.track}{pred.duration ? ',' : ''}
 						{/if}
@@ -96,7 +102,7 @@
 						{/if}
 					</div>
 				{/if}
-				<div class="border-t w-full h-0"></div>
+				<div class="border-t h-0 grow shrink"></div>
 				{#if l.from.track}
 					<div class="text-nowrap border rounded-xl px-2">
 						{t.track}
@@ -106,7 +112,7 @@
 			</div>
 
 			<div class="pt-4 pl-6 border-l-4 left-4 relative" style={routeBorderColor(l)}>
-				<div class="grid gap-y-6 grid-cols-7 items-center">
+				<div class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center text-lg">
 					{@render stopTimes(
 						l.startTime,
 						l.scheduledStartTime,
@@ -115,17 +121,17 @@
 						l.from.stopId
 					)}
 				</div>
-				<div class="mt-2 flex items-center text-muted-foreground">
+				<div class="mt-2 flex items-center text-muted-foreground leading-none">
 					<ArrowRight class="stroke-muted-foreground h-4 w-4" />
 					<span class="ml-1">{l.headsign}</span>
 				</div>
 				{#if l.intermediateStops?.length === 0}
-					<div class="py-12 pl-8 flex items-center text-muted-foreground">
+					<div class="py-3 pl-8 flex items-center text-muted-foreground text-sm">
 						{t.tripIntermediateStops(0)}
 					</div>
 				{:else}
-					<details class="[&_svg]:open:-rotate-180">
-						<summary class="py-12 pl-8 flex items-center text-muted-foreground">
+					<details class="[&_svg]:open:-rotate-180 my-2">
+						<summary class="py-3 pl-8 flex items-center text-muted-foreground">
 							<svg
 								class="rotate-0 transform transition-all duration-300"
 								fill="none"
@@ -139,12 +145,14 @@
 							>
 								<polyline points="6 9 12 15 18 9"></polyline>
 							</svg>
-							<span class="ml-2 cursor-pointer">
+							<span class="ml-2 cursor-pointer text-sm">
 								{t.tripIntermediateStops(l.intermediateStops?.length ?? 0)}
 								({formatDurationSec(l.duration)})
 							</span>
 						</summary>
-						<div class="mb-6 grid gap-y-6 grid-cols-7 items-center">
+						<div
+							class="mb-1 grid gap-y-1 grid-cols-[max-content_max-content_auto] items-center text-sm"
+						>
 							{#each l.intermediateStops! as s}
 								{@render stopTimes(s.arrival!, s.scheduledArrival!, l.realTime, s.name!, s.stopId)}
 							{/each}
@@ -153,7 +161,9 @@
 				{/if}
 
 				{#if !isLast && !(isLastPred && next!.duration === 0)}
-					<div class="grid gap-y-6 grid-cols-7 items-center pb-3">
+					<div
+						class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center pb-3 text-lg"
+					>
 						{@render stopTimes(
 							l.endTime!,
 							l.scheduledEndTime!,
@@ -172,7 +182,7 @@
 		{:else if !(isLast && l.duration === 0) && ((i == 0 && l.duration !== 0) || !next || !next.routeShortName || l.mode != 'WALK' || (pred && (pred.mode == 'BIKE' || pred.mode == 'RENTAL')))}
 			<Route {onClickTrip} {l} />
 			<div class="pt-4 pl-6 border-l-4 left-4 relative" style={routeBorderColor(l)}>
-				<div class="grid gap-y-6 grid-cols-7 items-center">
+				<div class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center text-lg">
 					{@render stopTimes(
 						l.startTime,
 						l.scheduledStartTime,
@@ -183,16 +193,23 @@
 				</div>
 				{@render streetLeg(l)}
 				{#if !isLast}
-					<div class="grid gap-y-6 grid-cols-7 items-center pb-4">
+					<div
+						class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center pb-4 text-lg"
+					>
 						{@render stopTimes(l.endTime, l.scheduledEndTime, l.realTime, l.to.name, l.to.stopId)}
 					</div>
 				{/if}
 			</div>
 		{/if}
 	{/each}
-	<div class="flex">
-		<div class="relative left-[13px] w-3 h-3 rounded-full" style={routeColor(lastLeg!)}></div>
-		<div class="relative left-3 bottom-[7px] pl-6 grid gap-y-6 grid-cols-7 items-center">
+	<div class="relative pl-6 left-4">
+		<div
+			class="absolute left-[-6px] top-[0px] w-[15px] h-[15px] rounded-full"
+			style={routeColor(lastLeg!)}
+		></div>
+		<div
+			class="relative left-[4px] bottom-[7px] grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center text-lg"
+		>
 			{@render stopTimes(
 				lastLeg!.endTime,
 				lastLeg!.scheduledEndTime,

diff --git a/ui/src/lib/DateInput.svelte b/ui/src/lib/DateInput.svelte
@@ -25,7 +25,7 @@
 <input
 	type="datetime-local"
 	class={cn(
-		'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+		'flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:this={el}

diff --git a/ui/src/routes/Debug.svelte → ui/src/lib/Debug.svelte b/ui/src/routes/Debug.svelte → ui/src/lib/Debug.svelte
diff --git a/ui/src/lib/ErrorMessage.svelte b/ui/src/lib/ErrorMessage.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	let {
+		e
+	}: {
+		e: unknown;
+	} = $props();
+</script>
+
+<div class="m-4 text-red-600"><div class="min-w-0">{e}</div></div>
diff --git a/ui/src/routes/ItineraryGeoJSON.svelte → ui/src/lib/ItineraryGeoJSON.svelte b/ui/src/routes/ItineraryGeoJSON.svelte → ui/src/lib/ItineraryGeoJSON.svelte