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

Bring staiton info modal into style with rest of site

Browse Source
This commit is contained in:
Fred Boniface
2026-03-12 14:57:24 +00:00
parent 1add69b0eb
commit 5c81b54ca1
3 changed files with 123 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/assets/global.css
View File

@@ -16,6 +16,18 @@
font-style: normal;
}
[id] {
scroll-margin-top: 100px;
:root {
/* Brand Colours */
--color-brand: #4fd1d1;
--color-brand-light: #5af5f5;
--color-accent: #3c6f79;
--color-accent-light: #5094a2;
--color-title: #ebebeb;
--color-bg-light: #404c55;
--color-bg-dark: #2b343c;
/* Shadows */
--color-shadow: hsla(210, 20%, 5%, 0.35);
--shadow-std: 0 4px 12px var(--color-shadow);
--shadow-up: 0 -4px 12px var(--color-shadow);
}

184
src/lib/components/StationInfo.svelte
View File

@@ -103,9 +103,8 @@
<span class="platform-direction">({direction})</span>
{/if}
</div>
<span class="length-tag">{platform.platformLength}m</span>
<span class="length-tag">{platform.platformLength}m</span>
<div class="platform-meta">
{#if platform.stepFree}
<span class="icon-tag" title="Step-free access"
><IconDisabled color="#2563eb" /></span
@@ -122,12 +121,12 @@
>
{/if}
</div>
{#if platform.dispatchNote}
<span class="platform-note">{platform.dispatchNote}</span>
{/if}
{#if platform.stepFreeNote}
<span class="platform-note">{platform.stepFreeNote}</span>
{/if}
{#if platform.dispatchNote}
<span class="platform-note">{platform.dispatchNote}</span>
{/if}
{#if platform.stepFreeNote}
<span class="platform-note">{platform.stepFreeNote}</span>
{/if}
<div class="train-visualiser">
{#each platform.doorPattern as pattern}
@@ -185,14 +184,14 @@
}
header {
background: #f8fafc;
background: var(--color-accent);
padding: 1rem 1.5rem;
margin-bottom: 50px;
margin-bottom: 50px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 500;
z-index: 500;
}
.title-group {
@@ -202,8 +201,8 @@
}
.crs-badge {
background: #1e293b;
color: white;
background: var(--color-bg-light);
color: var(--color-title);
font-family: monospace;
font-weight: bold;
padding: 0.2rem 0.5rem;
@@ -214,11 +213,15 @@
h2 {
margin: 0;
font-size: 1.1rem;
color: #0f172a;
color: var(--color-title);
}
.close-icon {
background: #ef4444;
background: var(--color-brand);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: 50%;
width: 32px;
height: 32px;
@@ -226,14 +229,14 @@
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #ebebeb;
color: var(--color-bg-light);
transition: all 0.2s;
}
.close-icon:hover {
background: #dc2626;
background: var(--color-brand-light);
transform: scale(1.05);
transform: rotate(180deg);
transform: rotate(90deg);
}
.content {
padding: 1.5rem;
@@ -255,13 +258,13 @@
border-radius: 10px;
}
.platform-card:first-child {
margin-top: 20px;
}
.platform-card:first-child {
margin-top: 20px;
}
.platform-card {
display: flex;
flex-direction: column;
flex-direction: column;
justify-content: space-between;
align-items: center;
background: #ffffff;
@@ -308,7 +311,8 @@
.length-tag {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.85rem;
background: #f1f5f9;
background: var(--color-bg-light);
color: var(--color-title);
padding: 0.25rem 0.6rem;
border-radius: 4px;
border: 1px solid #e2e8f0;
@@ -320,80 +324,80 @@
justify-content: center;
}
.train-visualiser {
margin-top: 1.25rem;
width: 100%;
padding: 1rem;
background: #f8fafc;
border-radius: 6px;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.train-visualiser {
margin-top: 1.25rem;
width: 100%;
padding: 1rem;
background: #f8fafc;
border-radius: 6px;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.train-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.train-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.door-pattern-kind {
font-size: 0.7rem;
font-weight: 800;
color: #101316;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.door-pattern-kind {
font-size: 0.7rem;
font-weight: 800;
color: #101316;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.coach-row {
display: flex;
gap: 4px;
overflow-x: auto;
padding-bottom: 4px;
}
.coach-row {
display: flex;
gap: 4px;
overflow-x: auto;
padding-bottom: 4px;
}
.coach-unit {
flex: 0 0 32px;
display: flex;
flex-direction: column;
gap: 4px;
}
.coach-unit {
flex: 0 0 32px;
display: flex;
flex-direction: column;
gap: 4px;
}
.coach-body {
height: 20px;
background: #334155;
color: #f8fafc;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
.coach-body {
height: 20px;
background: var(--color-accent-light);
color: #f8fafc;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
.coach-unit:first-child .coach-body {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: #0f172a;
}
.coach-unit:first-child .coach-body {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: var(--color-accent);
}
.door-status {
display: flex;
justify-content: space-around;
padding: 0 4px;
}
.door-status {
display: flex;
justify-content: space-around;
padding: 0 4px;
}
.dot {
width: 6px;
height: 6px;
background: #b65151;
border-radius: 50%;
transition: all 0.2s ease;
}
.dot {
width: 6px;
height: 6px;
background: #b65151;
border-radius: 50%;
transition: all 0.2s ease;
}
.dot.open {
background: #22c55e;
box-shadow: 0 0 8px #22c55e;
}
.dot.open {
background: #22c55e;
box-shadow: 0 0 5px #22c55e;
}
</style>

30
static/stations/nby.yaml
View File

@@ -11,11 +11,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
doors: [1,10]
doors: [1, 10]
- kind: IET9
doors: [1,18]
doors: [1, 18]
- kind: IET10
doors: [1,20]
doors: [1, 20]
- kind: DMU
max-car: 12
- platformId: 1Up
@@ -26,11 +26,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
doors: [1,10]
doors: [1, 10]
- kind: IET9
doors: [1,18]
doors: [1, 18]
- kind: IET10
doors: [1,20]
doors: [1, 20]
- kind: DMU
max-car: 12
- platformId: 2Dn
@@ -41,11 +41,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
doors: [1,10]
doors: [1, 10]
- kind: IET9
doors: [1,18]
doors: [1, 18]
- kind: IET10
doors: [1,20]
doors: [1, 20]
- kind: DMU
max-car: 14
- platformId: 2Up
@@ -56,11 +56,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
doors: [1,10]
doors: [1, 10]
- kind: IET9
doors: [1,18]
doors: [1, 18]
- kind: IET10
doors: [1,20]
doors: [1, 20]
- kind: DMU
max-car: 14
- platformId: 3
@@ -71,10 +71,10 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
doors: [1,10]
doors: [1, 10]
- kind: IET9
doors: [0,0]
doors: [0, 0]
- kind: IET10
doors: [0,0]
doors: [0, 0]
- kind: DMU
max-car: 5