Fix layout shifts with the temporary <pre> element on the board page
This commit is contained in:
@@ -11,8 +11,8 @@
|
||||
<aside class="alert-card">
|
||||
<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
|
||||
<span class="warning-icon">
|
||||
<IconAlertOctagonFilled />
|
||||
</span>
|
||||
<IconAlertOctagonFilled />
|
||||
</span>
|
||||
<span class="summary">
|
||||
{messages.length}
|
||||
{messages.length === 1 ? 'active alert' : 'active alerts'}
|
||||
@@ -20,118 +20,119 @@
|
||||
<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
|
||||
</button>
|
||||
|
||||
{#if isOpen}
|
||||
<div transition:slide={{ duration: 450 }} class="content">
|
||||
{#each messages as msg}
|
||||
<div class="message-item">
|
||||
<p class="message-text">
|
||||
{msg.t}
|
||||
{#if msg.l && msg.lt}
|
||||
<a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
|
||||
{msg.lt}
|
||||
</a>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
{#if isOpen}
|
||||
<div transition:slide={{ duration: 450 }} class="content">
|
||||
{#each messages as msg}
|
||||
<div class="message-item">
|
||||
<p class="message-text">
|
||||
{msg.t}
|
||||
{#if msg.l && msg.lt}
|
||||
<a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
|
||||
{msg.lt}
|
||||
</a>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.alert-card {
|
||||
margin: 1rem 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 95%;
|
||||
max-width: 750px;
|
||||
}
|
||||
.alert-card {
|
||||
margin: 1rem 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-bottom: 0;
|
||||
width: 95%;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
background: var(--alert-orange);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 46px;
|
||||
transition: all 0.65s 0.2s;
|
||||
}
|
||||
.trigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
background: var(--alert-orange);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 46px;
|
||||
transition: all 0.65s 0.2s;
|
||||
}
|
||||
|
||||
.trigger.active {
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.1s 0s;
|
||||
}
|
||||
.trigger.active {
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.1s 0s;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
.warning-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex: 1;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.summary {
|
||||
flex: 1;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.5s ease;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.chevron {
|
||||
transition: transform 0.5s ease;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chevron.rotated {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.chevron.rotated {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--alert-orange);
|
||||
filter: brightness(1.2);
|
||||
color: var(--color-title);
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
z-index: 1;
|
||||
}
|
||||
.content {
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--alert-orange);
|
||||
filter: brightness(1.2);
|
||||
color: var(--color-title);
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin: 10px;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.message-item {
|
||||
margin: 10px;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.message-item p {
|
||||
margin: 0;
|
||||
}
|
||||
.message-item p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-item a {
|
||||
color: #f2ff00;
|
||||
}
|
||||
.message-item a {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.message-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.message-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,42 +3,50 @@ import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
|
||||
* Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
|
||||
* Ensures Europe/London timezone irrespective of browser timezone.
|
||||
*/
|
||||
export function formatUkTime(dateStr: string | Date | undefined, includeSeconds: boolean = false): string {
|
||||
export function formatUkTime(
|
||||
dateStr: string | Date | undefined,
|
||||
includeSeconds: boolean = false
|
||||
): string {
|
||||
if (!dateStr) return '--:--';
|
||||
const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
|
||||
|
||||
if (isNaN(date.getTime())) return '--:--';
|
||||
|
||||
return date.toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
...(includeSeconds && { second: '2-digit' }),
|
||||
hour12: false,
|
||||
timeZone: 'Europe/London'
|
||||
});
|
||||
return date.toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
...(includeSeconds && { second: '2-digit' }),
|
||||
hour12: false,
|
||||
timeZone: 'Europe/London'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts ISO/JSON time to UK-formatted DD/MM/YY HH:MM:SS string.
|
||||
* Ensures Europe/London timezone irrespective of browser timezone.
|
||||
*/
|
||||
export function formatUkDateTime(dateStr: string | Date | undefined, includeSeconds: boolean = false): string {
|
||||
if (!dateStr) return '--/--/-- --:--:--';
|
||||
export function formatUkDateTime(
|
||||
dateStr: string | Date | undefined,
|
||||
includeSeconds: boolean = false
|
||||
): string {
|
||||
if (!dateStr) return '--/--/-- --:--:--';
|
||||
|
||||
const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
|
||||
const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
|
||||
|
||||
if (isNaN(date.getTime())) return '--/--/-- --:--:--';
|
||||
if (isNaN(date.getTime())) return '--/--/-- --:--:--';
|
||||
|
||||
return date.toLocaleString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
...(includeSeconds && { second: '2-digit' }),
|
||||
hour12: false,
|
||||
timeZone: 'Europe/London'
|
||||
}).replace(',', '');
|
||||
return date
|
||||
.toLocaleString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
...(includeSeconds && { second: '2-digit' }),
|
||||
hour12: false,
|
||||
timeZone: 'Europe/London'
|
||||
})
|
||||
.replace(',', '');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
})
|
||||
});
|
||||
|
||||
// Update 'QuickLinks'
|
||||
$effect(() => {
|
||||
@@ -33,70 +33,66 @@
|
||||
// Load Data Invalidation Handling
|
||||
// Refresh countdown logic
|
||||
</script>
|
||||
<section class="board-wrapper">
|
||||
{#if data.boardData.data.m?.length}
|
||||
|
||||
<StationAlertCard messages={data.boardData.data.m} />
|
||||
<section class="board-wrapper">
|
||||
{#if data.boardData.data.m?.length}
|
||||
<StationAlertCard messages={data.boardData.data.m} />
|
||||
{/if}
|
||||
<div class="time-data">
|
||||
<span class="time-loaded">Fetched: {formatUkDateTime(data.boardData.producedAt, true)}</span>
|
||||
<span class="time-now">{formatUkTime(now, true)}</span>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
|
||||
</section>
|
||||
|
||||
<section class="section-t">Live boards are not yet fully implemented on the server</section>
|
||||
|
||||
<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
|
||||
|
||||
<style>
|
||||
.board-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.time-data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
}
|
||||
|
||||
.time-loaded, .time-now {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.time-loaded {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.time-now {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.section-t {
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-top: 25px;
|
||||
max-width: 500px;
|
||||
.board-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.time-data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
max-width: 700px;
|
||||
margin: 10px auto;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
}
|
||||
|
||||
.time-loaded,
|
||||
.time-now {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.time-loaded {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.time-now {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
pre {
|
||||
max-width: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.json-dump {
|
||||
background: #222;
|
||||
color: #0f0;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
max-height: 500px;
|
||||
width: 95%;
|
||||
margin: 1rem auto; }
|
||||
margin: 1rem auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user