diff --git a/scripts/parse-maps.js b/scripts/parse-maps.js index bd85601..4236e20 100644 --- a/scripts/parse-maps.js +++ b/scripts/parse-maps.js @@ -5,12 +5,12 @@ import path from 'path'; const inputDir = '../static/mapFiles/yaml'; const outputDir = '../static/mapFiles/json'; -if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, {recursive: true}); +if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true }); -fs.readdirSync(inputDir).forEach(file => { - if (file.endsWith('.yaml')) { - const content = yaml.load(fs.readFileSync(path.join(inputDir, file), 'utf8')); - const fileName = file.replace('.yaml', '.json'); - fs.writeFileSync(path.join(outputDir, fileName), JSON.stringify(content)); - } -}) \ No newline at end of file +fs.readdirSync(inputDir).forEach((file) => { + if (file.endsWith('.yaml')) { + const content = yaml.load(fs.readFileSync(path.join(inputDir, file), 'utf8')); + const fileName = file.replace('.yaml', '.json'); + fs.writeFileSync(path.join(outputDir, fileName), JSON.stringify(content)); + } +}); diff --git a/src/app.html b/src/app.html index a5f9b76..001eb8f 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,10 @@ - + %sveltekit.head% diff --git a/src/lib/components/RouteRow.svelte b/src/lib/components/RouteRow.svelte index 59f272b..09a27dc 100644 --- a/src/lib/components/RouteRow.svelte +++ b/src/lib/components/RouteRow.svelte @@ -1,133 +1,128 @@
-
- {feature.miles + "m" || "" } - {feature.chains + "ch" || "" } -
+
+ {feature.miles + 'm' || ''} + {feature.chains + 'ch' || ''} +
-
- -
+
+ +
-
- {#if feature.name} -
{feature.name}
- {/if} - {#if feature.description} -
{feature.description}
- {/if} -
+
+ {#if feature.name} +
{feature.name}
+ {/if} + {#if feature.description} +
{feature.description}
+ {/if} +
\ No newline at end of file + /* Firefox Fix: Ensure white-space is normal here too */ + white-space: normal; + + line-height: 1.2rem; + max-height: 2.4rem; + font-size: 0.75rem; + color: #64748b; + word-break: break-word; + } + + /* Tablet and Desktop scaling */ + @media (min-width: 480px) { + .feature-name { + font-size: 1rem; /* The larger title you requested */ + margin-bottom: 4px; + } + + .feature-desc { + font-size: 0.85rem; /* Slightly larger desc to match */ + line-height: 1.3rem; + max-height: 2.6rem; + } + + .label-col { + padding-left: 24px; /* More "breathing room" on big screens */ + } + } + diff --git a/src/lib/components/mapIcons/BaseTrack.svelte b/src/lib/components/mapIcons/BaseTrack.svelte index 67b4e70..8e3f22d 100644 --- a/src/lib/components/mapIcons/BaseTrack.svelte +++ b/src/lib/components/mapIcons/BaseTrack.svelte @@ -1,22 +1,27 @@ - + \ No newline at end of file + svg { + display: block; + width: 100%; + height: 100%; + } + diff --git a/src/lib/components/mapIcons/Bridge.svelte b/src/lib/components/mapIcons/Bridge.svelte index 931e0b4..5d741ba 100644 --- a/src/lib/components/mapIcons/Bridge.svelte +++ b/src/lib/components/mapIcons/Bridge.svelte @@ -1,74 +1,80 @@ - {#if !isOver} - - - - - {:else} - - - - - - - - - - - - + {#if !isOver} + + + + + {:else} + - {#if feature.roadName} - 20 ? "10" : "8"} - style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;" - > - {feature.roadName} - - {/if} - {/if} + + + + + + + + + + + + {#if feature.roadName} + 20 ? '10' : '8'} + style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;" + > + {feature.roadName} + + {/if} + {/if} \ No newline at end of file + svg { + display: block; + overflow: visible; + } + text { + user-select: none; + } + diff --git a/src/lib/components/mapIcons/Crossing.svelte b/src/lib/components/mapIcons/Crossing.svelte index 9212cd8..49ce309 100644 --- a/src/lib/components/mapIcons/Crossing.svelte +++ b/src/lib/components/mapIcons/Crossing.svelte @@ -1,45 +1,57 @@ - + - {#if type === 'foot'} - + {#if type === 'foot'} + + {:else if type === 'uwc'} + + + + + UWC + {:else} + - {:else if type === 'uwc'} - - - - - UWC - - {:else} - - - {type.toUpperCase()} - {/if} + + + + {type.toUpperCase()} + {/if} \ No newline at end of file + svg { + display: block; + overflow: visible; + } + .label-right { + text-anchor: start; /* Align to the left of the start point */ + dominant-baseline: central; + font-family: sans-serif; + font-weight: bold; + font-size: 9px; + fill: #1e293b; + } + diff --git a/src/lib/components/mapIcons/Crossover.svelte b/src/lib/components/mapIcons/Crossover.svelte index d0a2c66..6ad78bb 100644 --- a/src/lib/components/mapIcons/Crossover.svelte +++ b/src/lib/components/mapIcons/Crossover.svelte @@ -1,18 +1,18 @@ - - - - + + + + - - \ No newline at end of file + + diff --git a/src/lib/components/mapIcons/ElectrificationChange.svelte b/src/lib/components/mapIcons/ElectrificationChange.svelte index 7956b22..21e3978 100644 --- a/src/lib/components/mapIcons/ElectrificationChange.svelte +++ b/src/lib/components/mapIcons/ElectrificationChange.svelte @@ -1,49 +1,59 @@ - - + + - {#if showFromEco || showToEco} - + {#if showFromEco || showToEco} + - - {#if showFromEco} - - ECO: {feature.from.eco} - - {/if} - - {#if showToEco} - - ECO: {feature.to.eco} - - {/if} - - {/if} + + {#if showFromEco} + + ECO: {feature.from.eco} + + {/if} - + {#if showToEco} + + ECO: {feature.to.eco} + + {/if} + + {/if} + + \ No newline at end of file + svg { + display: block; + overflow: visible; + } + diff --git a/src/lib/components/mapIcons/Junction.svelte b/src/lib/components/mapIcons/Junction.svelte index 29876ad..c0edf8e 100644 --- a/src/lib/components/mapIcons/Junction.svelte +++ b/src/lib/components/mapIcons/Junction.svelte @@ -1,39 +1,36 @@ - - + + \ No newline at end of file + svg { + display: block; + overflow: visible; + } + diff --git a/src/lib/components/mapIcons/Loop.svelte b/src/lib/components/mapIcons/Loop.svelte index 1bbca7b..fe7bd91 100644 --- a/src/lib/components/mapIcons/Loop.svelte +++ b/src/lib/components/mapIcons/Loop.svelte @@ -1,37 +1,36 @@ - - {#if effectivePosition === 'left' || feature.position === 'both'} - - {/if} - - {#if effectivePosition === 'right' || feature.position === 'both'} - - {/if} - + + {#if effectivePosition === 'left' || feature.position === 'both'} + + {/if} - + {#if effectivePosition === 'right' || feature.position === 'both'} + + {/if} + - \ No newline at end of file + + diff --git a/src/lib/components/mapIcons/SignallerChange.svelte b/src/lib/components/mapIcons/SignallerChange.svelte index ce9a968..ba6fdbb 100644 --- a/src/lib/components/mapIcons/SignallerChange.svelte +++ b/src/lib/components/mapIcons/SignallerChange.svelte @@ -1,26 +1,33 @@ - + - + - - - {feature.from} - - - {feature.to} - - - \ No newline at end of file + + + {feature.from} + + + {feature.to} + + + diff --git a/src/lib/components/mapIcons/SiteOf.svelte b/src/lib/components/mapIcons/SiteOf.svelte index 84d8e90..c45a46c 100644 --- a/src/lib/components/mapIcons/SiteOf.svelte +++ b/src/lib/components/mapIcons/SiteOf.svelte @@ -1,11 +1,11 @@ - - \ No newline at end of file + + diff --git a/src/lib/components/mapIcons/Station.svelte b/src/lib/components/mapIcons/Station.svelte index 1e6115d..35d9516 100644 --- a/src/lib/components/mapIcons/Station.svelte +++ b/src/lib/components/mapIcons/Station.svelte @@ -1,26 +1,19 @@ - {#if !isTerminus} - - - - {:else} - - {/if} + {#if !isTerminus} + + + + {:else} + + {/if} diff --git a/src/lib/mapRegistry.ts b/src/lib/mapRegistry.ts index 47ed86a..18e3a17 100644 --- a/src/lib/mapRegistry.ts +++ b/src/lib/mapRegistry.ts @@ -9,18 +9,17 @@ import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte'; import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte'; import SiteOf from '$lib/components/mapIcons/SiteOf.svelte'; - export const components = { - station: Station, - junction: Junction, - crossovers: Crossover, - siteof: SiteOf, - bridge: Bridge, - crossover: Crossover, - crossing: Crossing, - loop: Loop, - loops: Loop, - signallerChange: SignallerChange, - electrificationChange: ElectrificationChange, - default: BaseTrack, -} \ No newline at end of file + station: Station, + junction: Junction, + crossovers: Crossover, + siteof: SiteOf, + bridge: Bridge, + crossover: Crossover, + crossing: Crossing, + loop: Loop, + loops: Loop, + signallerChange: SignallerChange, + electrificationChange: ElectrificationChange, + default: BaseTrack +}; diff --git a/src/lib/railStyles.ts b/src/lib/railStyles.ts index 30f02dc..73ccf1d 100644 --- a/src/lib/railStyles.ts +++ b/src/lib/railStyles.ts @@ -1,11 +1,11 @@ export type ElecType = 'none' | '25kvac' | '750vdc' | '650vdc' | '1500vdc'; export const elecColours: Record = { - 'none': '#344415', - '25kvac': '#ed4444', - '750vdc': '#3b82f6', - '650vdc': '#eab308', - '1500vdc': '#f97316', + none: '#344415', + '25kvac': '#ed4444', + '750vdc': '#3b82f6', + '650vdc': '#eab308', + '1500vdc': '#f97316' }; -export const getElecColour = (type?: ElecType) => elecColours[type ?? 'none']; \ No newline at end of file +export const getElecColour = (type?: ElecType) => elecColours[type ?? 'none']; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 93f47a8..4752aac 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,116 +1,116 @@ +

Welcome to SvelteKit

Visit svelte.dev/docs/kit to read the documentation

- {#each dummyFeatures as feature} - - {/each} + {#each dummyFeatures as feature} + + {/each}
\ No newline at end of file + .map-container { + width: 100%; + max-width: 600px; + margin: 0 auto; + font-family: sans-serif; + } + diff --git a/src/routes/map/[slug]/+page.svelte b/src/routes/map/[slug]/+page.svelte index 4dba508..42edb45 100644 --- a/src/routes/map/[slug]/+page.svelte +++ b/src/routes/map/[slug]/+page.svelte @@ -1,238 +1,240 @@
-
-

{data.route.routeName}

- {data.route.routeId} -
- - -
-
+
+

{data.route.routeName}

+ {data.route.routeId} +
+ + +
+
-{#if showFilters} -
showFilters = false}>
+ {#if showFilters} +
(showFilters = false)}>
-
-
-

Visibility Filters

- -
+
+
+

Visibility Filters

+ +
-
-
- {#each Object.keys(visibleTypes) as type} - - {/each} -
-
-
-{/if} +
+
+ {#each Object.keys(visibleTypes) as type} + + {/each} +
+
+
+ {/if} -
-
- {#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)} - - {/each} -
-
+
+
+ {#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)} + + {/each} +
+
\ No newline at end of file + .filter-chip.active { + background: #1e293b; + color: white; + border-color: #1e293b; + } + diff --git a/src/routes/map/[slug]/+page.ts b/src/routes/map/[slug]/+page.ts index 00b1129..6210c48 100644 --- a/src/routes/map/[slug]/+page.ts +++ b/src/routes/map/[slug]/+page.ts @@ -2,28 +2,28 @@ import type { PageLoad } from '/$types'; import { error } from '@sveltejs/kit'; export const load: PageLoad = async ({ params, fetch }) => { - const { slug } = params; + const { slug } = params; - try { - const res = await fetch(`/mapFiles/json/${slug}.json`); + try { + const res = await fetch(`/mapFiles/json/${slug}.json`); - if (!res.ok) { - throw error(404, { - message: `Route ${slug} not found` - }); - } + if (!res.ok) { + throw error(404, { + message: `Route ${slug} not found` + }); + } - const rawData = await res.json(); + const rawData = await res.json(); - return { - route: rawData, - slug: slug, - }; - } catch (err) { - console.error(`Error loading map ${slug}: `, err); + return { + route: rawData, + slug: slug + }; + } catch (err) { + console.error(`Error loading map ${slug}: `, err); - throw error(500, { - message: `Failed to parse map data for ${slug}` - }); - } -}; \ No newline at end of file + throw error(500, { + message: `Failed to parse map data for ${slug}` + }); + } +};