Adjust train service table as displayed over departure boards

src/lib/components/ui/TrainServiceTable.svelte

@@ -101,7 +101,7 @@
 					<th colspan="2">Dep</th>
 				</tr>
 				<tr>
-					<th>Location</th>
+					<th class="tiploc-col">Location</th>
 					<th>Plat</th>
 					<th>Sch</th>
 					<th>Act</th>
@@ -113,7 +113,7 @@
 			{#each trainDetail.locations as loc}
 				<tbody class="LocGroup">
 					<tr class:pass={loc.r === 'PASS'} class:canc={loc.can}>
-						<td class="tpl" class:stop={loc.r !== 'PASS'}>
+						<td class="tiploc-col tpl" class:stop={loc.r !== 'PASS'}>
 							{loc.t}
 						</td>
 						<td class="plat" class:platchange={loc.pc}>
@@ -121,17 +121,21 @@
 						</td>
 						{#if loc.r === 'PASS'}
 							<td colspan="2">Pass</td>
-							<td>{formatUkTime(loc.wtp)}</td>
+							<td class="actual">{formatUkTime(loc.wtp)}</td>
-							<td>{formatUkTime(loc.atp || loc.etp || '--')}</td>
+							<td class={estClass(loc.atp, loc.etp)}>{formatUkTime(loc.atp || loc.etp || '--')}</td>
 						{:else}
-							<td>{formatUkTime(loc.pta || loc.wta)}</td>
+							<td class="actual">{formatUkTime(loc.pta || loc.wta)}</td>
-							<td>{formatUkTime(loc.ata || loc.eta || '--')}</td>
+							<td class={estClass(loc.ata, loc.eta)}>{formatUkTime(loc.ata || loc.eta || '--')}</td>
-							<td>{formatUkTime(loc.ptd || loc.wtd)}</td>
+							<td class="actual">{formatUkTime(loc.ptd || loc.wtd)}</td>
-							<td>{formatUkTime(loc.atd || loc.etd || '--')}</td>
+							<td class={estClass(loc.atd, loc.etd)}>{formatUkTime(loc.atd || loc.etd || '--')}</td>
 						{/if}
 						{#if loc}
 							{@const delay = calculateDelay(loc)}
-							<td class="delay-{delay.type}">{delay.val}</td>
+							{@const arrType = estClass(loc.ata, loc.eta)}
+							{@const depType = estClass(loc.atd, loc.etd)}
+							{@const passType = estClass(loc.atp, loc.etp)}
+							{@const classType = depType || arrType || passType}
+							<td class="delay-{delay.type} {classType}">{delay.val}</td>
 						{/if}
 					</tr>
 					{#if loc.act && getRelevantActivities(loc.act).length > 0}
@@ -150,3 +154,115 @@
 		</table>
 	</div>
 </div>
+
+<style>
+	.trainServiceContainer {
+		width: 100%;
+		margin: 0 auto;
+		display: flex;
+		justify-items: center;
+		flex-direction: column;
+	}
+
+	.cancelReason {
+		color: var(--cancel-red);
+		text-align: center;
+	}
+	.delayReason {
+		color: var(--delay-orange);
+		text-align: center;
+	}
+	.pisData {
+		margin: auto;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+		font-weight: 600;
+		font-size: 1.25rem;
+	}
+	.pis-skip {
+		font-weight: 200;
+		font-size: 1rem;
+	}
+
+	.tableContainer {
+		width: 100%;
+		margin: 0 auto;
+		padding-top: 10px;
+	}
+
+	.table {
+		width: 97%;
+		margin: 0 auto;
+	}
+
+	tr th {
+		font-family: 'URW Gothic', sans-serif;
+		text-align: center;
+	}
+
+	tr td {
+		font-family: 'Inconsolata Variable', monospace;
+		font-size: 1.171rem;
+		font-variant-ligatures: additional-ligatures;
+		text-align: center;
+	}
+
+	tr.pass td {
+		opacity: 0.5;
+	}
+
+	tr.canc {
+		text-decoration: line-through;
+		color: var(--cancel-red);
+	}
+
+	tr.canc .tpl {
+		text-decoration: none;
+		color: var(--cancel-red);
+	}
+
+	.tiploc-col {
+		text-align: left;
+	}
+
+	.tpl {
+		color: var(--location-yellow);
+	}
+
+	tr.pass td.pass-text {
+		font-style: italic;
+	}
+
+	tr td.estimate {
+		color: rgb(196, 189, 189);
+		font-style: italic;
+		font-weight: 350;
+	}
+
+	tr td.actual {
+		font-weight: 700;
+	}
+
+	tr td.delay-late {
+		color: var(--delay-orange);
+	}
+
+	tr td.delay-early {
+		color: var(--early-blue);
+	}
+
+	.activity-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.35rem;
+		padding-bottom: 5px;
+	}
+
+	.activity-tag {
+		background: rgb(0 0 0 / 15%);
+		font-family: 'URW Gothic', sans-serif;
+		padding: 0.2rem 0.5rem;
+		border-radius: 0.25rem;
+		font-size: 1rem;
+	}
+</style>

src/lib/components/ui/station-board/ServiceDetailModal.svelte

@@ -67,9 +67,20 @@
 	}}
 >
 	<div class="modal-content">
+		<div class="modal-header">
+			<h1>
+			{#if loading}
+				Loading Train Detail
+			{:else if error}
+				Error
+			{:else if trainDetail}
+				{trainDetail.header.h}
+			{/if}
+			</h1>
 			<button class="close-btn" onclick={onClose} aria-label="Close modal">
 				<IconX size={20} />
 			</button>
+		</div>
 
 		<div class="trainServiceModalWrapper">
 			{#if loading}
@@ -87,14 +98,14 @@
 
 <style>
 	dialog {
-		background: var(--modal-bg, #1e1e1e);
+		background: var(--color-accent);
-		color: var(--modal-text, #fff);
+		color: var(--color-title);
 		border: none;
 		border-radius: 12px;
 		width: 90%;
 		max-width: 400px;
-		padding: 1.5rem;
+		padding: 0 1.5rem 1.5rem 1.5rem;
-		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+		box-shadow: var(--shadow-std);
 
 		opacity: 0;
 		transform: scale(0.8);
@@ -145,11 +156,17 @@
 		flex-direction: column;
 	}
 
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-family: 'URW Gothic', sans-serif;
+		margin: 0;
+		padding: 0;
+	}
+
 	.close-btn {
-		position: absolute;
+		background: red;
-		top: 0;
-		right: 0;
-		background: transparent;
 		border: none;
 		color: inherit;
 		cursor: pointer;
@@ -162,7 +179,7 @@
 	}
 
 	.close-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
+		background: rgb(141, 0, 0);
 	}
 
 	.trainServiceModalWrapper {
@@ -170,10 +187,11 @@
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		margin-top: 1.5rem;
+		margin-top: 0;
 	}
 
 	.scrollable-table-container {
+		margin-top: 0px;
 		width: 100%;
 		overflow-y: auto;
 	}

src/lib/utils/time.ts

@@ -1,6 +1,7 @@
 import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
 
-export const estClass = (act: any, est: any) => (act ? 'actual' : 'estimate');
+export const estClass = (act: any, est: any) =>
+	act ? 'actual' : est ? 'estimate' : undefined;
 
 /**
  * Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds