Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Mobile) UI improvements #705

Merged
merged 9 commits into from
Jan 19, 2025
Prev Previous commit
Next Next commit
ui: more small screen adjustments
traines-source committed Jan 17, 2025
commit a97cd0cf3b9fe41f151b278ebbef3e315e41b8da
6 changes: 3 additions & 3 deletions ui/src/lib/ConnectionDetail.svelte
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@
<Time variant="realtime" class="font-semibold w-16" {isRealtime} {timestamp} {scheduledTimestamp} />
{#if stopId}
<Button
class="text-[length:inherit] leading-tight 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));
@@ -115,7 +115,7 @@
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>
@@ -124,7 +124,7 @@
{t.tripIntermediateStops(0)}
</div>
{:else}
<details class="[&_svg]:open:-rotate-180">
<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"
2 changes: 1 addition & 1 deletion ui/src/lib/ItineraryList.svelte
Original file line number Diff line number Diff line change
@@ -73,7 +73,7 @@
{/if}

{#if r.itineraries.length !== 0}
<div class="flex flex-col space-y-8 px-4 py-8">
<div class="flex flex-col space-y-6 px-4 py-8">
{#each routingResponses as r, rI}
{#await r}
<div class="flex items-center justify-center w-full">
3 changes: 2 additions & 1 deletion ui/src/lib/RailViz.svelte
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@
import { Button } from '$lib/components/ui/button';
import Palette from 'lucide-svelte/icons/palette';
import Rss from 'lucide-svelte/icons/rss';
import { browser } from '$app/environment'
let {
map,
@@ -296,7 +297,7 @@
});
</script>

<Control position="top-right">
<Control position={browser && window.innerWidth < 600 ? 'bottom-left' : 'top-right'} class="pb-2">
<Button
size="icon"
variant={colorMode ? 'default' : 'outline'}
2 changes: 1 addition & 1 deletion ui/src/lib/map/Control.svelte
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@

<div
class:hidden={!initialized}
class={cn('clear-both pointer-events-auto pt-2 md:pt-4 px-2 md:pt-4 max-w-full', className)}
class={cn('clear-both pointer-events-auto pt-2 md:pt-4 px-2 md:px-4 max-w-full', className)}
bind:this={el}
>
{#if children}
15 changes: 9 additions & 6 deletions ui/src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@
const urlParams = browser ? new URLSearchParams(window.location.search) : undefined;
const hasDebug = urlParams && urlParams.has('debug');
const hasDark = urlParams && urlParams.has('dark');
const isSmallScreen = browser && window.innerWidth < 600;
let theme: 'light' | 'dark' =
(hasDark ? 'dark' : undefined) ??
@@ -164,7 +165,7 @@
box.extend(x);
});
});
const padding = { top: 96, right: 96, bottom: 96, left: 640 };
const padding = { top: 96, right: 96, bottom: 96, left: isSmallScreen ? 96 : 640 };
map.flyTo({ ...map.cameraForBounds(box), padding });
}
});
@@ -230,11 +231,13 @@
</Control>
{/if}

<Control position="top-left">
<Card class="w-[500px] overflow-y-auto overflow-x-hidden bg-background rounded-lg">
<SearchMask bind:from bind:to bind:time bind:timeType bind:wheelchair bind:bikeRental />
</Card>
</Control>
{#if !isSmallScreen || !selectedItinerary && !selectedStop}
<Control position="top-left">
<Card class="w-[500px] overflow-y-auto overflow-x-hidden bg-background rounded-lg">
<SearchMask bind:from bind:to bind:time bind:timeType bind:wheelchair bind:bikeRental />
</Card>
</Control>
{/if}

<LevelSelect {bounds} {zoom} bind:level />