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

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>