Complete map display page

2026-02-05 20:00:28 +00:00
parent 2fa8a7872e
commit 221159433c
11 changed files with 338 additions and 37 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/lib/components/RouteRow.svelte
+++ b/src/lib/components/RouteRow.svelte
@@ -34,9 +34,11 @@
 </div>

 <style>
-    .row-container {
+.row-container {
        display: grid;
-        grid-template-columns: 80px 64px 1fr;
+        /* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
+        grid-template-columns: 3.5rem 64px 1fr;
+        width: 100%;
        height: 64px;
        align-items: center;
        margin: 0;
@@ -50,7 +52,7 @@
        padding-right: 12px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.85rem;
-        color: #54748b;
+        color: #64748b; /* Adjusted slightly for contrast */
    }

    .miles {
@@ -62,29 +64,70 @@
        font-size: 0.7rem;
    }

-    .icon-col {
+.icon-col {
        width: 64px;
        height: 64px;
-        overflow: visible;
-    }
-
-    .label-col {
-        padding-left: 16px;
+        /* Ensure the icon itself is centered if the SVG is smaller than 64px */
        display: flex;
-        flex-direction: column;
        justify-content: center;
+        align-items: center;
    }

+.label-col {
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    /* FIX: Allow children to manage their own wrapping */
+    overflow: hidden; 
+    /* min-width: 0 is critical for flex children to allow truncation */
+    min-width: 0; 
+}
+
+.feature-name {
+    font-weight: 700;
+    color: #1e293b;
+    font-size: 0.8rem;
+    text-transform: capitalize;
+    
+    /* Allow the title to wrap naturally onto multiple lines */
+    white-space: normal; 
+    line-height: 1.2;
+    margin-bottom: 2px;
+}
+
+.feature-desc {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    
+    /* 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-weight: 700;
-        color: #1e293b;
-        font-size: 1rem;
-        text-transform: capitalize;
+        font-size: 1rem; /* The larger title you requested */
+        margin-bottom: 4px;
    }

    .feature-desc {
-        font-size: 0.75rem;
-        color: #94a3b8;
-        font-style: italic;
+        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 */
+    }
+}
 </style>
--- a/src/lib/components/mapIcons/Bridge.svelte
+++ b/src/lib/components/mapIcons/Bridge.svelte
@@ -19,7 +19,7 @@
        pipeline:   { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
    }

-    $: s = bridgeStyles[feature.category] || styles.minorRoad;
+    $: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
    $: isOver = feature.position === 'over';

    $: topY = 32 - (s.width / 2);
@@ -36,9 +36,9 @@
    <path d={bodyPath} fill={s.color} />
    <path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
    <path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
  {:else}
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
    
    <path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
    
--- a/src/lib/components/mapIcons/Crossover.svelte
+++ b/src/lib/components/mapIcons/Crossover.svelte
@@ -14,5 +14,5 @@
        <line x1="16" y1="52" x2="48" y2="20" />
    </g>

-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
 </svg>
--- a/src/lib/components/mapIcons/Junction.svelte
+++ b/src/lib/components/mapIcons/Junction.svelte
@@ -16,8 +16,8 @@
    $: isRight = feature.diverges === 'right';

    $: yStart = visualUp ? 64 : 0;
-    $: yEnd = visualUp ? 0 : 64;
-    $: xEnd = isRight ? 64 : 0;
+    $: yEnd = visualUp ? 8 : 56;
+    $: xEnd = isRight ? 56 : 8;

    $: branchColour = getElecColour(feature.elecBranch || activeElec);
    $: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
--- a/src/lib/components/mapIcons/Loop.svelte
+++ b/src/lib/components/mapIcons/Loop.svelte
@@ -3,7 +3,7 @@
    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';

    export let feature: {
-        side: 'left' | 'right' | 'both';
+        position: 'left' | 'right' | 'both';
        elecLoop?: string;
    };

@@ -12,17 +12,22 @@

    $: loopColour = getElecColour(feature.elecLoop || activeElec);

+    $: effectivePosition = (() => {
+        if (!reversed || feature.position === 'both') return feature.position;
+        return feature.position === 'left' ? 'right' : 'left';
+    })();
+
    const leftPath = `M 32 0 Q 8 32 32 64`;
    const rightPath = `M 32 0 Q 56 32 32 64`;
 </script>

 <svg viewBox="0 0 64 64" width="64" height="64" class="loops">
    <g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
-        {#if feature.side === 'left' || feature.side === 'both'}
+        {#if effectivePosition === 'left' || feature.position === 'both'}
            <path d={leftPath} />
        {/if}
        
-        {#if feature.side === 'right' || feature.side === 'both'}
+        {#if effectivePosition === 'right' || feature.position === 'both'}
            <path d={rightPath} />
        {/if}
    </g>
--- a/src/lib/components/mapIcons/SiteOf.svelte
+++ b/src/lib/components/mapIcons/SiteOf.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let activeElec: string;
+    export let feature: any;
+    export let reversed: boolean;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
+    <BaseTrack {activeElec} height={64} />
+</svg>
--- a/src/lib/mapRegistry.ts
+++ b/src/lib/mapRegistry.ts
@@ -7,17 +7,20 @@ import Crossing from '$lib/components/mapIcons/Crossing.svelte';
 import Loop from '$lib/components/mapIcons/Loop.svelte';
 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: BaseTrack,
-    siteof: BaseTrack,
+    crossovers: Crossover,
+    siteof: SiteOf,
    bridge: Bridge,
    crossover: Crossover,
    crossing: Crossing,
    loop: Loop,
+    loops: Loop,
    signallerChange: SignallerChange,
    electrificationChange: ElectrificationChange,
+    default: BaseTrack,
 }
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -36,12 +36,14 @@
            category: 'pipeline',
            name: 'Waterway Bridge',
            roadName: "TfL (LU)",
+            elec: '25kvac',
            miles: 1,
            chains: 41,
        },
        {
            type: 'crossover',
            name: 'Dolphin junction',
+            elec: '25kvac',
            miles: 1,
            chains: 42,
        },
--- a/src/routes/map/[slug]/+page.svelte
+++ b/src/routes/map/[slug]/+page.svelte
@@ -1,11 +1,238 @@
 <script lang="ts">
-    import RouteRow from "$lib/components/RouteRow.svelte";
-
+    import RouteRow from '$lib/components/RouteRow.svelte';
+    import { slide } from 'svelte/transition';
+    
+    // data.route contains: routeName, routeId, elecStart, elecEnd, routeDetail[]
    export let data;

-    let reversed = false;
+    let reversed = false; // Reverses Array, and passes value down to children

-    $: proceccedFeatures = (() => {
-        const list = reversed ? [...data.route].reverse() : [...data.route];
+    let visibleTypes = {
+        station: true,
+        bridge: true,
+        crossovers: true,
+        loop: true,
+        signallerChange: true,
+        electrificationChange: true,
+        siteof: true,
+        junction: true,
+    }
+
+    let showFilters = false;
+
+    // Toggle feature types
+    const toggleFilter = (type: string) => {
+        visibleTypes[type] = !visibleTypes[type];
+        visibleTypes = visibleTypes;
+    };
+
+    // Helper to prettify 'types'
+    const formatLabel = (str: string) => str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());
+
+    $: processedFeatures = (() => {
+        const list = reversed 
+            ? [...data.route.routeDetail].reverse() 
+            : [...data.route.routeDetail];
+
+        // Seed currentElec from the YAML header boundary
+        let currentElec = reversed 
+            ? data.route.elecEnd.elec 
+            : data.route.elecStart.elec;
+
+        return list.map(f => {
+            if (f.type === 'electrificationChange') {
+                // Transition state: this tile and everything after it 
+                // adopts the new electrification.
+                currentElec = reversed ? f.from.elec : f.to.elec;
+            }
+            
+            return {
+                ...f,
+                activeElec: currentElec
+            };
+        });
+    })();
+
+    $: filteredFeatures = processedFeatures.filter(f => {
+        return visibleTypes[f.type] ?? true;
    })
-</script>
+</script>
+
+<div class="map-layout">
+    <header class="top-nav">
+        <h1>{data.route.routeName}</h1>
+        <span class="route-code">{data.route.routeId}</span>
+        <div class="quick-actions">
+            <button class="icon-btn" on:click={() => reversed = !reversed}>
+                 ⇄ {reversed ? 'UP' : 'DN'}
+            </button>
+            <button class="icon-btn" on:click={() => showFilters = !showFilters}>
+                Settings
+            </button>
+        </div>
+    </header>
+
+{#if showFilters}
+    <div class="backdrop" on:click={() => showFilters = false}></div>
+
+    <div class="filter-drawer" transition:slide>
+        <div class="drawer-header">
+            <h3>Visibility Filters</h3>
+            <button class="close-icon" on:click={() => showFilters = false} aria-label="Close">
+                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </button>
+        </div>
+
+        <div class="drawer-content">
+            <div class="filter-flex">
+                {#each Object.keys(visibleTypes) as type}
+                    <button 
+                        class="filter-chip" 
+                        class:active={visibleTypes[type]} 
+                        on:click={() => toggleFilter(type)}
+                    >
+                        {formatLabel(type)}
+                    </button>
+                {/each}
+            </div>
+        </div>
+    </div>
+{/if}
+
+    <main class="map-spine">
+        <div class="container">
+            {#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)}
+                <RouteRow feature={f} activeElec={f.activeElec} {reversed} />
+            {/each}
+        </div>
+    </main>
+</div>
+
+<style>
+    .map-layout {
+        display: flex;
+        flex-direction: column;
+        background: #ffffff;
+        min-height: 100vh;
+    }
+
+.top-nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid #e2e8f0;
+    padding: 0.75rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+h1 {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 800;
+    line-height: 1.2;
+    color: #0f172a;
+    letter-spacing: -0.02em;
+    white-space: normal;
+    overflow-wrap: break-word;
+}
+
+@media (min-width: 768px) {
+    .top-nav {
+        padding: 1rem 2rem;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+        letter-spacing: -0.03em;
+    }
+}
+
+    .container {
+        width: 100%;
+        max-width: 500px; 
+        margin: 0 auto;
+        padding-top: 1rem;
+    }
+
+.backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 150;
+    }
+
+    .filter-drawer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: white;
+        z-index: 200;
+        border-radius: 20px 20px 0 0;
+        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
+        /* Ensure it handles iOS home bar spacing */
+        padding-bottom: env(safe-area-inset-bottom, 1rem);
+    }
+
+    .drawer-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1.25rem 1.5rem 0.75rem;
+        border-bottom: 1px solid #f1f5f9;
+    }
+
+    .drawer-header h3 {
+        margin: 0;
+        font-size: 1rem;
+        color: #1e293b;
+    }
+
+    .close-icon {
+        background: #f1f5f9;
+        border: none;
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: #64748b;
+    }
+
+    .drawer-content {
+        padding: 1.25rem 1.5rem;
+    }
+
+    .filter-flex {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .filter-chip {
+        padding: 0.5rem 1rem;
+        border-radius: 999px;
+        border: 1px solid #e2e8f0;
+        background: #f8fafc;
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .filter-chip.active {
+        background: #1e293b;
+        color: white;
+        border-color: #1e293b;
+    }
+</style>