OwlBoard/route-maps
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardise & styles and improve performance on small displays.

Browse Source 
Add inter-route linking from Junctions.
This commit is contained in:
Fred Boniface
2026-02-11 20:58:01 +00:00
parent e94b0e811a
commit 7e68192312
6 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@@ -7,6 +7,7 @@
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
/> />
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<title>OwlBoard Maps</title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

90
src/lib/components/RouteRow.svelte
View File

@@ -1,12 +1,19 @@
<script lang="ts"> <script lang="ts">
import { components } from '$lib/mapRegistry'; import { components } from '$lib/mapRegistry';
import type { ElecType } from '$lib/railStyles';
import { IconArrowNarrowRight } from '@tabler/icons-svelte';
export let feature: any; // Raw Object type featureType = "station" | "junction" | "crossovers" | "siteof" | "bridge" | "minorBridge" | "crossover" | "crossing" | "loop" | "loops" | "signallerChange" | "electrificationChange" | "default" | "tunnel";
export let activeElec: string; // Active Electrification Type export let feature: {name: string; type: featureType; goto?: string; entryPoint?: string; miles: number; chains: number; description?: string}; // Raw Object
export let activeElec: ElecType; // Active Electrification Type
export let reversed: boolean = false; export let reversed: boolean = false;
$: Icon = components[feature.type] || components.default; $: Icon = components[feature.type] || components.default;
// Linking Logic
$: isLinkable = !!(feature.goto && feature.entryPoint);
$: href = `/map/${feature.goto}#${feature.entryPoint}`;
const slugify = (str?: string) => const slugify = (str?: string) =>
str?.toLocaleLowerCase().trim().replace(/\s+/g, '-') ?? 'unknown'; str?.toLocaleLowerCase().trim().replace(/\s+/g, '-') ?? 'unknown';
</script> </script>
@@ -18,9 +25,10 @@
</div> </div>
<div class="icon-col"> <div class="icon-col">
<svelte:component this={Icon} {feature} {activeElec} {reversed} /> <svelte:component this={Icon} feature={feature as any} {activeElec} {reversed} />
</div> </div>
<svelte:element this={isLinkable ? 'a' : 'div'} {...(isLinkable ? { href } : {})} class="link-wrapper">
<div class="label-col"> <div class="label-col">
{#if feature.name} {#if feature.name}
<div class="feature-name">{feature.name}</div> <div class="feature-name">{feature.name}</div>
@@ -29,18 +37,31 @@
<div class="feature-desc">{feature.description}</div> <div class="feature-desc">{feature.description}</div>
{/if} {/if}
</div> </div>
{#if isLinkable}
<div class="link-indicator">
<IconArrowNarrowRight />
</div>
{/if}
</svelte:element>
</div> </div>
<style> <style>
a {
cursor: pointer;
text-decoration: none;
}
.row-container { .row-container {
display: grid; display: grid;
/* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
grid-template-columns: 3.5rem 64px 1fr; grid-template-columns: 3.5rem 64px 1fr;
width: 100%; width: 100%;
height: 64px; height: 64px;
max-height: 64px;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
} }
.mileage-col { .mileage-col {
@@ -50,7 +71,7 @@
padding-right: 12px; padding-right: 12px;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
font-size: 0.85rem; font-size: 0.85rem;
color: #64748b; /* Adjusted slightly for contrast */ color: #64748b;
} }
.miles { .miles {
@@ -62,13 +83,46 @@
font-size: 0.7rem; font-size: 0.7rem;
} }
.icon-col { .icon-col {
width: 64px; width: 64px;
height: 64px; height: 64px;
/* Ensure the icon itself is centered if the SVG is smaller than 64px */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
}
.link-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
padding: 0;
box-sizing: border-box;
}
.link-indicator {
display: flex;
align-items: center;
margin-left: 5px;
margin-right: 8px;
flex-shrink: 0;
color: #e1ebeb;
background-color: #3c6f79;
padding: 2px 2px;
border-radius: 999px;
transition: all 0.3s ease;
}
.link-wrapper:hover .link-indicator {
background-color: #404c55;
transform: rotate(-45deg);
} }
.label-col { .label-col {
@@ -76,20 +130,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
/* FIX: Allow children to manage their own wrapping */
overflow: hidden; overflow: hidden;
/* min-width: 0 is critical for flex children to allow truncation */
min-width: 0; min-width: 0;
} }
.feature-name { .feature-name {
font-weight: 700; font-weight: 700;
font-family: sans-serif;
color: #1e293b; color: #1e293b;
font-size: 0.8rem; font-size: 0.8rem;
text-transform: capitalize; text-transform: capitalize;
/* Allow the title to wrap naturally onto multiple lines */
white-space: normal; white-space: normal;
line-height: 1.2; line-height: 1.2;
margin-bottom: 2px; margin-bottom: 2px;
@@ -98,12 +148,11 @@
.feature-desc { .feature-desc {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-family: sans-serif;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden; overflow: hidden;
/* Firefox Fix: Ensure white-space is normal here too */
white-space: normal; white-space: normal;
line-height: 1.2rem; line-height: 1.2rem;
max-height: 2.4rem; max-height: 2.4rem;
font-size: 0.75rem; font-size: 0.75rem;
@@ -111,21 +160,26 @@
word-break: break-word; word-break: break-word;
} }
/* Tablet and Desktop scaling */ @media (max-width: 320px) {
.feature-desc {
display: none;
}
}
@media (min-width: 480px) { @media (min-width: 480px) {
.feature-name { .feature-name {
font-size: 1rem; /* The larger title you requested */ font-size: 1rem;
margin-bottom: 4px; margin-bottom: 4px;
} }
.feature-desc { .feature-desc {
font-size: 0.85rem; /* Slightly larger desc to match */ font-size: 0.85rem;
line-height: 1.3rem; line-height: 1.3rem;
max-height: 2.6rem; max-height: 2.6rem;
} }
.label-col { .label-col {
padding-left: 24px; /* More "breathing room" on big screens */ padding-left: 24px;
} }
} }
</style> </style>

3
src/lib/components/mapIcons/Crossing.svelte
View File

@@ -9,10 +9,9 @@
$: type = feature.kind.toLowerCase(); $: type = feature.kind.toLowerCase();
$: isFoot = type === 'foot'; $: isFoot = type === 'foot';
$: filterCategory = isFoot ? 'foot' : type === 'uwc' ? 'uwc' : 'level-crossing';
</script> </script>
<svg viewBox="0 0 64 64" width="64" height="64" class={filterCategory}> <svg viewBox="0 0 64 64" width="64" height="64">
<BaseTrack {activeElec} height={64} /> <BaseTrack {activeElec} height={64} />
{#if type === 'foot'} {#if type === 'foot'}

2
src/lib/components/mapIcons/Junction.svelte
View File

@@ -6,6 +6,8 @@
direction: 'up' | 'down'; direction: 'up' | 'down';
diverges: 'left' | 'right' | 'both'; diverges: 'left' | 'right' | 'both';
elecBranch?: string; elecBranch?: string;
goto?: string;
entryPoint?: string;
}; };
export let activeElec: any; export let activeElec: any;
export let reversed: boolean = false; export let reversed: boolean = false;

29
src/lib/components/mapIcons/RouteEndLink.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { IconArrowNarrowRight } from '@tabler/icons-svelte';
export let feature: { export let feature: {
routeName: string; routeName: string;
routeId: string; routeId: string;
@@ -17,16 +18,7 @@
</div> </div>
<div class="icon-circle"> <div class="icon-circle">
<svg viewBox="0 0 24 24" width="20" height="20"> <IconArrowNarrowRight />
<path
d="M5 12h14M12 5l7 7-7 7"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div> </div>
</a> </a>
</div> </div>
@@ -69,12 +61,14 @@
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-family: "urwgothic";
color: #64748b; color: #64748b;
} }
.route-id-chip { .route-id-chip {
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 800; font-weight: 800;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: #f1f5f9; background: #f1f5f9;
color: #475569; color: #475569;
padding: 2px 6px; padding: 2px 6px;
@@ -83,6 +77,7 @@
} }
.main-text { .main-text {
font-family: "urwgothic";
font-size: 1rem; font-size: 1rem;
font-weight: 800; font-weight: 800;
color: #0f172a; color: #0f172a;
@@ -92,16 +87,15 @@
} }
.icon-circle { .icon-circle {
width: 40px;
height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #f8fafc;
border-radius: 50%; color: #e1ebeb;
color: #94a3b8; background-color: #3c6f79;
padding: 4px 4px;
border-radius: 999px;
transition: all 0.3s ease; transition: all 0.3s ease;
margin-left: 12px;
} }
.wide-button:hover { .wide-button:hover {
@@ -111,8 +105,7 @@
} }
.wide-button:hover .icon-circle { .wide-button:hover .icon-circle {
background: #4f46e5; background-color: #404c55;
color: #ffffff;
transform: rotate(-45deg); transform: rotate(-45deg);
} }

18
src/routes/map/[slug]/+page.svelte
View File

@@ -22,7 +22,8 @@
electrificationChange: true, electrificationChange: true,
siteof: true, siteof: true,
junction: true, junction: true,
tunnel: true tunnel: true,
crossing: true,
}; };
let showFilters = false; let showFilters = false;
@@ -75,7 +76,8 @@
{reversed ? data.route.routeEnd : data.route.routeStart} {reversed ? data.route.routeEnd : data.route.routeStart}
</h1> </h1>
<span class="secondary-station"> <span class="secondary-station">
to {reversed ? data.route.routeStart : data.route.routeEnd} <span class="route-stack-to">
to</span> {reversed ? data.route.routeStart : data.route.routeEnd}
</span> </span>
{/if} {/if}
</div> </div>
@@ -186,6 +188,8 @@
height: 52px; height: 52px;
padding-left: 0; padding-left: 0;
margin-left: 15px; margin-left: 15px;
margin-right: 0;
padding-right: 0;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@@ -208,8 +212,14 @@
.route-stack { .route-stack {
display: flex; display: flex;
font-family: "urwgothic";
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
margin-left: 0;
}
.route-stack-to {
text-transform: lowercase;
} }
.primary-station { .primary-station {
@@ -225,7 +235,7 @@
.secondary-station { .secondary-station {
font-size: 0.7rem; font-size: 0.7rem;
color: #cce9e9; color: #cce9e9;
text-transform: uppercase; text-transform: capitalize;
font-weight: 600; font-weight: 600;
} }
@@ -365,7 +375,7 @@
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@media (max-width: 350px) { @media (max-width: 390px) {
.icon-btn { .icon-btn {
padding: 0.3rem 0.3rem; padding: 0.3rem 0.3rem;
} }