Staff LDB and train detail fully responsive
This commit is contained in:
parent
fcf8285c90
commit
e42a8946c7
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||||
import Loading from '$lib/navigation/loading.svelte';
|
import { fade } from 'svelte/transition';
|
||||||
import Reason from '$lib/raw-fetchers/reason.svelte';
|
import Reason from '$lib/raw-fetchers/reason.svelte';
|
||||||
import { uuid } from '$lib/stores/uuid';
|
import { uuid } from '$lib/stores/uuid';
|
||||||
export let detail = {
|
export let detail = {
|
||||||
@ -97,50 +97,46 @@
|
|||||||
|
|
||||||
<OverlayIsland>
|
<OverlayIsland>
|
||||||
<div id="detailBox">
|
<div id="detailBox">
|
||||||
|
<button type="button" id="closeService" on:click={handleClick}>X</button>
|
||||||
{#await getTrain(detail.rid)}
|
{#await getTrain(detail.rid)}
|
||||||
<h6>{detail.headcode}</h6>
|
<h6>{detail.headcode}</h6>
|
||||||
<Loading />
|
<p in:fade id="loading">Loading Data...</p>
|
||||||
{:then train}
|
{:then train}
|
||||||
<h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
|
<h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
|
||||||
<button type="button" id="closeService" on:click={handleClick}>X</button>
|
|
||||||
<p>
|
<p>
|
||||||
Locations in grey are not scheduled stops
|
Locations in grey are not scheduled stops
|
||||||
<br />
|
<br />
|
||||||
Times in <span class="estimate">yellow</span> are estimated times
|
Times in <span class="estimate">yellow</span> are estimated times
|
||||||
</p>
|
</p>
|
||||||
<table id="detailTable">
|
|
||||||
{#if train.GetServiceDetailsResult.delayReason}
|
{#if train.GetServiceDetailsResult.delayReason}
|
||||||
<tr
|
<p class="reason late">
|
||||||
><td colspan="7" class="late">
|
|
||||||
<Reason type="delay" code={train.GetServiceDetailsResult.delayReason} />
|
<Reason type="delay" code={train.GetServiceDetailsResult.delayReason} />
|
||||||
</td></tr
|
</p>
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if train.GetServiceDetailsResult.cancelReason}
|
{#if train.GetServiceDetailsResult.cancelReason}
|
||||||
<tr
|
<p class="reason canc">
|
||||||
><td colspan="7" class="canc">
|
|
||||||
<Reason type="cancel" code={train.GetServiceDetailsResult.cancelReason} />
|
<Reason type="cancel" code={train.GetServiceDetailsResult.cancelReason} />
|
||||||
</td></tr
|
</p>
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
<table id="detailTable">
|
||||||
|
<tr>
|
||||||
|
<th class="tableLocation">Loc.</th>
|
||||||
|
<th class="tablePlatform">Pl.</th>
|
||||||
|
<th class="tableTime">Sch</th>
|
||||||
|
<th class="tableTime">Est/<br>Act</th>
|
||||||
|
<th class="tableTime">Sch</th>
|
||||||
|
<th class="tableTime">Est/<br>Act</th>
|
||||||
|
<th class="tableDelay" />
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th colspan="2" />
|
<th colspan="2" />
|
||||||
<th colspan="2">Arrival</th>
|
<th colspan="2">Arrival</th>
|
||||||
<th colspan="2">Departure</th>
|
<th colspan="2">Departure</th>
|
||||||
<th />
|
<th />
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<th class="tableLocation">Location</th>
|
|
||||||
<th class="tablePlatform">Pl.</th>
|
|
||||||
<th class="tableTime">Sch</th>
|
|
||||||
<th class="tableTime">Est/Act</th>
|
|
||||||
<th class="tableTime">Sch</th>
|
|
||||||
<th class="tableTime">Est/Act</th>
|
|
||||||
<th class="tableDelay" />
|
|
||||||
</tr>
|
|
||||||
{#each train.GetServiceDetailsResult.locations.location as location}
|
{#each train.GetServiceDetailsResult.locations.location as location}
|
||||||
<tr>
|
<tr>
|
||||||
<td class={location?.isPass === 'true' ? 'pass' : ''}>{location.tiploc}</td>
|
<td class="location {location?.isPass === 'true' ? 'pass' : ''}">{location.tiploc}</td>
|
||||||
<td class={location?.isPass === 'true' ? 'pass' : ''}>{location.platform || ''}</td>
|
<td class={location?.isPass === 'true' ? 'pass' : ''}>{location.platform || ''}</td>
|
||||||
{#await parseTimes(location)}
|
{#await parseTimes(location)}
|
||||||
<td />
|
<td />
|
||||||
@ -180,10 +176,17 @@
|
|||||||
left: 20px;
|
left: 20px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
#loading {
|
||||||
|
color: white;
|
||||||
|
animation: pulse-early 2.5s linear infinite;
|
||||||
|
}
|
||||||
p {
|
p {
|
||||||
margin-top: 45px;
|
margin-top: 45px;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
p.reason {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
#closeService {
|
#closeService {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
@ -199,28 +202,49 @@
|
|||||||
}
|
}
|
||||||
#detailTable {
|
#detailTable {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin: auto;
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
padding: 0px;
|
||||||
color: white;
|
color: white;
|
||||||
|
font-family: ubuntu,monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 338px) {
|
||||||
|
#detailTable{font-size: 14px}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 301px) {
|
||||||
|
#detailTable{font-size: 12px}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 469px) {
|
||||||
|
#detailTable{font-size: 20px}
|
||||||
}
|
}
|
||||||
.tableLocation {
|
.tableLocation {
|
||||||
width: 20%;
|
width: 18%;
|
||||||
|
}
|
||||||
|
td.location {
|
||||||
|
color: yellow;
|
||||||
}
|
}
|
||||||
.tablePlatform {
|
.tablePlatform {
|
||||||
width: 8%;
|
width: 5%;
|
||||||
}
|
}
|
||||||
.tableTime {
|
.tableTime {
|
||||||
width: 15%;
|
width: 15%;
|
||||||
}
|
}
|
||||||
.tableDelay {
|
.tableDelay {
|
||||||
width: 5%;
|
width: 7%;
|
||||||
}
|
}
|
||||||
.estimate {
|
.estimate {
|
||||||
color: rgb(255, 255, 50);
|
color: rgb(255, 255, 119);
|
||||||
}
|
}
|
||||||
.pass {
|
.pass {
|
||||||
|
color: white !important;
|
||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
.canc {
|
.canc {
|
||||||
|
color: white;
|
||||||
animation: pulse-cancel 1.5s linear infinite;
|
animation: pulse-cancel 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -229,6 +253,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.late {
|
.late {
|
||||||
|
color: white;
|
||||||
animation: pulse-late 1.5s linear infinite;
|
animation: pulse-late 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user