Add JetBrains Mono font and adjust styling of the schedule.
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
import { formatUkTime, calculateDelay } from '$lib/utils/time';
|
||||
import TocStyle from '$lib/components/ui/TocStyle.svelte';
|
||||
import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
|
||||
import { IconCircleArrowDownFilled } from '@tabler/icons-svelte';
|
||||
import { IconChevronDownFilled } from '@tabler/icons-svelte';
|
||||
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
|
||||
let isExpanded = $state(false);
|
||||
let loadingDetails = $state(false);
|
||||
@@ -68,7 +68,7 @@
|
||||
{service.dt}
|
||||
</div>
|
||||
<div class="arrow" class:expanded={isExpanded}>
|
||||
<IconCircleArrowDownFilled color={"var(--color-title)"} size={25} />
|
||||
<IconChevronDownFilled color={"var(--color-title)"} size={25} />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
@@ -117,17 +117,17 @@
|
||||
<th>Location</th>
|
||||
<th>Plat</th>
|
||||
<th>Sch</th>
|
||||
<th><span class="tpl-cell">Est</span>/Act</th>
|
||||
<th><span class="est">Est</span>/Act</th>
|
||||
<th>Sch</th>
|
||||
<th><span class="tpl-cell">Est</span>/Act</th>
|
||||
<th><span class="est">Est</span>/Act</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each details.locations as loc}
|
||||
<tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}>
|
||||
<td class="tpl-cell">{loc.t}</td>
|
||||
<td class="plat-cell">{loc.p}</td>
|
||||
<td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>{loc.t}</td>
|
||||
<td class="plat-cell" class:plat-change={loc.pc}>{loc.p}</td>
|
||||
{#if loc.r == 'PASS'}
|
||||
<td class="time-cell" colspan="2">Pass</td>
|
||||
<td class="time-cell">{formatUkTime(loc.wtp)}</td>
|
||||
@@ -158,215 +158,272 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.train-service {
|
||||
background-color: var(--color-accent);
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow-std);
|
||||
overflow: hidden;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
transition: 0.2s all;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
/*
|
||||
Main container
|
||||
*/
|
||||
.train-service {
|
||||
background-color: var(--color-accent);
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-std);
|
||||
overflow: hidden;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
transition: 0.2s all;
|
||||
filter: brightness(1.1);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.train-service:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
.train-service:active {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.train-service:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
/*
|
||||
Summary Header
|
||||
*/
|
||||
.summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--color-title);
|
||||
}
|
||||
.operator-summary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: load-spin 0.8s linear infinite;
|
||||
z-index: 3;
|
||||
}
|
||||
.main-text-summary {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@keyframes load-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.time-summary {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.operator-summary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.location-summary {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.main-text-summary {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.to-summary {
|
||||
font-size: 0.8rem;
|
||||
font-style: oblique;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.time-summary {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
.arrow {
|
||||
padding: 0;
|
||||
margin: 0 0 0 auto;
|
||||
height: 25px;
|
||||
transition: all 0.9s;
|
||||
}
|
||||
|
||||
.location-summary {
|
||||
text-transform: uppercase;
|
||||
.expanded {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.can-all {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*
|
||||
Box Extention
|
||||
*/
|
||||
.box-ext {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cancel-reason,
|
||||
.delay-reason {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
width: 95%;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cancel-reason {
|
||||
color: var(--cancel-red);
|
||||
}
|
||||
|
||||
.delay-reason {
|
||||
color: rgb(255, 119, 0);
|
||||
}
|
||||
|
||||
/*
|
||||
Schedule Table
|
||||
*/
|
||||
.schedule-table-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-table {
|
||||
width: 95%;
|
||||
font-family: 'URW Gothic', 'Inter', sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding-bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: -0.02ch;
|
||||
transition: all 0.5s;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tpl-cell {
|
||||
color: var(--color-title);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tpl-stop {
|
||||
color: var(--location-yellow);
|
||||
}
|
||||
|
||||
.to-summary {
|
||||
font-size: 0.8rem;
|
||||
.plat-change {
|
||||
animation: fast-pulse 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.pass-loc {
|
||||
color: var(--color-title);
|
||||
font-style: oblique;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
.can-all {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
height: 25px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.can-loc {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.est {
|
||||
color: var(--location-yellow);
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.box-ext {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.act {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.delay-late {
|
||||
color: var(--delay-orange);
|
||||
font-weight: 600;
|
||||
animation: pulse 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.cancel-reason,
|
||||
.delay-reason {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
width: 95%;
|
||||
}
|
||||
.delay-early {
|
||||
color: var(--early-blue);
|
||||
font-weight: 600;
|
||||
animation: pulse 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.cancel-reason {
|
||||
color: rgb(255, 0, 0);
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
/*
|
||||
Loading State
|
||||
*/
|
||||
.loading-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.delay-reason {
|
||||
color: rgb(255, 119, 0);
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: load-spin 0.8s linear infinite;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@keyframes cancel-pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 0px rgb(255, 0, 0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 0px rgb(255, 0, 0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
Responsivity
|
||||
*/
|
||||
@media (min-width: 330px) {
|
||||
.time-summary,
|
||||
.location-summary {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-table-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 340px) {
|
||||
.schedule-table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-table {
|
||||
width: 95%;
|
||||
max-width: 375px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
@media (min-width: 360px) {
|
||||
.time-summary {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.location-summary {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.schedule-table {
|
||||
font-size: 0.99rem;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 420px) {
|
||||
.schedule-table {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tpl-cell {
|
||||
color: yellow;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pass-loc {
|
||||
color: var(--color-title);
|
||||
opacity: 0.75;
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
.can-loc {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.est {
|
||||
color: yellow;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delay-late {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.delay-early {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
/*
|
||||
KEYFRAMES
|
||||
*/
|
||||
@keyframes load-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
@@ -52,7 +52,7 @@
|
||||
.card {
|
||||
background: var(--color-accent);
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
border-radius: 12px;
|
||||
overflow: visible;
|
||||
width: 95%;
|
||||
max-width: 600px;
|
||||
|
||||
Reference in New Issue
Block a user