OwlBoard/web-pwa
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout shifts with the temporary <pre> element on the board page

Browse Source
This commit is contained in:
Fred Boniface
2026-05-10 00:26:21 +01:00
parent 909e36ebc2
commit 1f1e215c0c
3 changed files with 180 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/lib/components/ui/cards/StationAlertCard.svelte
View File

@@ -11,8 +11,8 @@
<aside class="alert-card"> <aside class="alert-card">
<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}> <button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
<span class="warning-icon"> <span class="warning-icon">
<IconAlertOctagonFilled /> <IconAlertOctagonFilled />
</span> </span>
<span class="summary"> <span class="summary">
{messages.length} {messages.length}
{messages.length === 1 ? 'active alert' : 'active alerts'} {messages.length === 1 ? 'active alert' : 'active alerts'}
@@ -20,118 +20,119 @@
<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span> <span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
</button> </button>
{#if isOpen} {#if isOpen}
<div transition:slide={{ duration: 450 }} class="content"> <div transition:slide={{ duration: 450 }} class="content">
{#each messages as msg} {#each messages as msg}
<div class="message-item"> <div class="message-item">
<p class="message-text"> <p class="message-text">
{msg.t} {msg.t}
{#if msg.l && msg.lt} {#if msg.l && msg.lt}
<a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link"> <a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
{msg.lt} {msg.lt}
</a> </a>
{/if} {/if}
</p> </p>
</div> </div>
{/each} {/each}
</div> </div>
{/if} {/if}
</aside> </aside>
{/if} {/if}
<style> <style>
.alert-card { .alert-card {
margin: 1rem 0; margin: 1rem 0;
border-radius: 8px; border-radius: 8px;
background: transparent; background: transparent;
position: relative; position: relative;
z-index: 10; z-index: 10;
width: 95%; margin-bottom: 0;
max-width: 750px; width: 95%;
} max-width: 750px;
}
.trigger { .trigger {
width: 100%; width: 100%;
display: flex; display: flex;
border-radius: 8px; border-radius: 8px;
align-items: center; align-items: center;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
background: var(--alert-orange); background: var(--alert-orange);
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
position: relative; position: relative;
z-index: 2; z-index: 2;
height: 46px; height: 46px;
transition: all 0.65s 0.2s; transition: all 0.65s 0.2s;
} }
.trigger.active { .trigger.active {
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
transition: all 0.1s 0s; transition: all 0.1s 0s;
} }
.warning-icon { .warning-icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 0; margin-left: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
margin-right: 1rem; margin-right: 1rem;
padding: 0; padding: 0;
} }
.summary { .summary {
flex: 1; flex: 1;
font-family: 'URW Gothic', sans-serif; font-family: 'URW Gothic', sans-serif;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-weight: 600; font-weight: 600;
font-size: 1rem; font-size: 1rem;
} }
.chevron { .chevron {
transition: transform 0.5s ease; transition: transform 0.5s ease;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
} }
.chevron.rotated { .chevron.rotated {
transform: rotateX(180deg); transform: rotateX(180deg);
} }
.content { .content {
padding: 1rem; padding: 1rem;
position: absolute; position: absolute;
top: 46px; top: 46px;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
left: 0; left: 0;
right: 0; right: 0;
background: var(--alert-orange); background: var(--alert-orange);
filter: brightness(1.2); filter: brightness(1.2);
color: var(--color-title); color: var(--color-title);
font-family: 'URW Gothic', sans-serif; font-family: 'URW Gothic', sans-serif;
font-size: 1.0rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
z-index: 1; z-index: 1;
} }
.message-item { .message-item {
margin: 10px; margin: 10px;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
} }
.message-item p { .message-item p {
margin: 0; margin: 0;
} }
.message-item a { .message-item a {
color: #f2ff00; color: #f2ff00;
} }
.message-item:last-child { .message-item:last-child {
padding-bottom: 0; padding-bottom: 0;
} }
</style> </style>

52
src/lib/utils/time.ts
View File

@@ -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 * Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
* Ensures Europe/London timezone irrespective of browser timezone. * 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 '--:--'; 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.toLocaleTimeString('en-GB', { return date.toLocaleTimeString('en-GB', {
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
...(includeSeconds && { second: '2-digit' }), ...(includeSeconds && { second: '2-digit' }),
hour12: false, hour12: false,
timeZone: 'Europe/London' timeZone: 'Europe/London'
}); });
} }
/** /**
* Converts ISO/JSON time to UK-formatted DD/MM/YY HH:MM:SS string. * Converts ISO/JSON time to UK-formatted DD/MM/YY HH:MM:SS string.
* Ensures Europe/London timezone irrespective of browser timezone. * Ensures Europe/London timezone irrespective of browser timezone.
*/ */
export function formatUkDateTime(dateStr: string | Date | undefined, includeSeconds: boolean = false): string { export function formatUkDateTime(
if (!dateStr) return '--/--/-- --:--:--'; 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', { return date
day: '2-digit', .toLocaleString('en-GB', {
month: '2-digit', day: '2-digit',
year: '2-digit', month: '2-digit',
hour: '2-digit', year: '2-digit',
minute: '2-digit', hour: '2-digit',
...(includeSeconds && { second: '2-digit' }), minute: '2-digit',
hour12: false, ...(includeSeconds && { second: '2-digit' }),
timeZone: 'Europe/London' hour12: false,
}).replace(',', ''); timeZone: 'Europe/London'
})
.replace(',', '');
} }
/** /**

96
src/routes/board/+page.svelte
View File

@@ -13,7 +13,7 @@
}, 1000); }, 1000);
return () => clearInterval(interval); return () => clearInterval(interval);
}) });
// Update 'QuickLinks' // Update 'QuickLinks'
$effect(() => { $effect(() => {
@@ -33,70 +33,66 @@
// Load Data Invalidation Handling // Load Data Invalidation Handling
// Refresh countdown logic // Refresh countdown logic
</script> </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"> <div class="time-data">
<span class="time-loaded">Fetched: {formatUkDateTime(data.boardData.producedAt, true)}</span> <span class="time-loaded">Fetched: {formatUkDateTime(data.boardData.producedAt, true)}</span>
<span class="time-now">{formatUkTime(now, true)}</span> <span class="time-now">{formatUkTime(now, true)}</span>
</div> </div>
<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
{/if}
</section> </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> <style>
.board-wrapper { .board-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
gap: 0; 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;
} }
.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 { .json-dump {
background: #222; background: #222;
color: #0f0; color: #0f0;
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: 4px;
font-size: 0.9rem; font-size: 0.9rem;
max-height: 500px;
width: 95%; width: 95%;
margin: 1rem auto; } margin: 1rem auto;
}
</style> </style>