From 7e681923128937761558ff99f416117bf144e41b Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Wed, 11 Feb 2026 20:58:01 +0000 Subject: [PATCH] Standardise & styles and improve performance on small displays. Add inter-route linking from Junctions. --- src/app.html | 1 + src/lib/components/RouteRow.svelte | 90 +++++++++++++++---- src/lib/components/mapIcons/Crossing.svelte | 3 +- src/lib/components/mapIcons/Junction.svelte | 2 + .../components/mapIcons/RouteEndLink.svelte | 29 +++--- src/routes/map/[slug]/+page.svelte | 18 +++- 6 files changed, 101 insertions(+), 42 deletions(-) diff --git a/src/app.html b/src/app.html index 87e00bb..b45dce6 100644 --- a/src/app.html +++ b/src/app.html @@ -7,6 +7,7 @@ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> + OwlBoard Maps %sveltekit.head% diff --git a/src/lib/components/RouteRow.svelte b/src/lib/components/RouteRow.svelte index bd92df9..8647f9c 100644 --- a/src/lib/components/RouteRow.svelte +++ b/src/lib/components/RouteRow.svelte @@ -1,12 +1,19 @@ @@ -18,9 +25,10 @@
- +
+
{#if feature.name}
{feature.name}
@@ -29,18 +37,31 @@
{feature.description}
{/if}
+ {#if isLinkable} +
+ +
+ {/if} + + + diff --git a/src/lib/components/mapIcons/Crossing.svelte b/src/lib/components/mapIcons/Crossing.svelte index 49ce309..6b7ede2 100644 --- a/src/lib/components/mapIcons/Crossing.svelte +++ b/src/lib/components/mapIcons/Crossing.svelte @@ -9,10 +9,9 @@ $: type = feature.kind.toLowerCase(); $: isFoot = type === 'foot'; - $: filterCategory = isFoot ? 'foot' : type === 'uwc' ? 'uwc' : 'level-crossing'; - + {#if type === 'foot'} diff --git a/src/lib/components/mapIcons/Junction.svelte b/src/lib/components/mapIcons/Junction.svelte index b748354..9bbbc39 100644 --- a/src/lib/components/mapIcons/Junction.svelte +++ b/src/lib/components/mapIcons/Junction.svelte @@ -6,6 +6,8 @@ direction: 'up' | 'down'; diverges: 'left' | 'right' | 'both'; elecBranch?: string; + goto?: string; + entryPoint?: string; }; export let activeElec: any; export let reversed: boolean = false; diff --git a/src/lib/components/mapIcons/RouteEndLink.svelte b/src/lib/components/mapIcons/RouteEndLink.svelte index 8b8df6b..a60e143 100644 --- a/src/lib/components/mapIcons/RouteEndLink.svelte +++ b/src/lib/components/mapIcons/RouteEndLink.svelte @@ -1,4 +1,5 @@
- - - +
@@ -69,12 +61,14 @@ font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; + font-family: "urwgothic"; color: #64748b; } .route-id-chip { font-size: 0.6rem; font-weight: 800; + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f5f9; color: #475569; padding: 2px 6px; @@ -83,6 +77,7 @@ } .main-text { + font-family: "urwgothic"; font-size: 1rem; font-weight: 800; color: #0f172a; @@ -92,16 +87,15 @@ } .icon-circle { - width: 40px; - height: 40px; display: flex; align-items: center; justify-content: center; - background: #f8fafc; - border-radius: 50%; - color: #94a3b8; + + color: #e1ebeb; + background-color: #3c6f79; + padding: 4px 4px; + border-radius: 999px; transition: all 0.3s ease; - margin-left: 12px; } .wide-button:hover { @@ -111,8 +105,7 @@ } .wide-button:hover .icon-circle { - background: #4f46e5; - color: #ffffff; + background-color: #404c55; transform: rotate(-45deg); } diff --git a/src/routes/map/[slug]/+page.svelte b/src/routes/map/[slug]/+page.svelte index f49fb8d..04a78b7 100644 --- a/src/routes/map/[slug]/+page.svelte +++ b/src/routes/map/[slug]/+page.svelte @@ -22,7 +22,8 @@ electrificationChange: true, siteof: true, junction: true, - tunnel: true + tunnel: true, + crossing: true, }; let showFilters = false; @@ -75,7 +76,8 @@ {reversed ? data.route.routeEnd : data.route.routeStart} - to {reversed ? data.route.routeStart : data.route.routeEnd} + + to {reversed ? data.route.routeStart : data.route.routeEnd} {/if} @@ -186,6 +188,8 @@ height: 52px; padding-left: 0; margin-left: 15px; + margin-right: 0; + padding-right: 0; flex-shrink: 0; transition: all 0.3s ease; } @@ -208,8 +212,14 @@ .route-stack { display: flex; + font-family: "urwgothic"; flex-direction: column; min-width: 0; + margin-left: 0; + } + + .route-stack-to { + text-transform: lowercase; } .primary-station { @@ -225,7 +235,7 @@ .secondary-station { font-size: 0.7rem; color: #cce9e9; - text-transform: uppercase; + text-transform: capitalize; font-weight: 600; } @@ -365,7 +375,7 @@ transition: all 0.3s ease; } - @media (max-width: 350px) { + @media (max-width: 390px) { .icon-btn { padding: 0.3rem 0.3rem; }