diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 22 | ||||
| -rw-r--r-- | src/app.html | 2 | ||||
| -rw-r--r-- | src/lib/Timetable.svelte | 28 | ||||
| -rw-r--r-- | src/lib/assets/LineGlyph.svelte | 44 | ||||
| -rw-r--r-- | src/routes/train-ico/[type]/[[line]]/+page.svelte | 7 |
5 files changed, 77 insertions, 26 deletions
diff --git a/src/app.css b/src/app.css index 211e2c1..70e67da 100644 --- a/src/app.css +++ b/src/app.css @@ -8,6 +8,8 @@ system-ui, sans-serif; } +@custom-variant dark (&:where(.dark, .dark *)); + @keyframes loadingbar { 0% { width: 0; @@ -25,6 +27,26 @@ html { font-family: var(--font-sbb-typo); + @apply dark:scheme-dark; +} +html:has(.no-scroll-body), +body:has(.no-scroll-body) { + overflow-y: hidden; +} + +@keyframes shimmer { + 0% { + background-position: calc(-1 * var(--shimmer-w, 1000px)) 0; + } + 100% { + background-position: var(--shimmer-w, 1000px) 0; + } +} + +.skeleton-shimmer { + animation: shimmer 2s infinite linear; + background-size: var(--shimmer-w, 1000px) 100%; + @apply not-dark:bg-[linear-gradient(to_right,_#f6f7f8_4%,_#edeef1_25%,_#f6f7f8_36%)] bg-[linear-gradient(to_right,_#edeef100_4%,_#edeef110_25%,_#edeef100_36%)]; } @font-face { diff --git a/src/app.html b/src/app.html index 48ea59c..1213eea 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="%paraglide.lang%" class="bg-[#101012] text-white"> +<html lang="%paraglide.lang%" class="bg-[#101012] text-white dark"> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> diff --git a/src/lib/Timetable.svelte b/src/lib/Timetable.svelte index 22f9139..c805d6d 100644 --- a/src/lib/Timetable.svelte +++ b/src/lib/Timetable.svelte @@ -271,7 +271,8 @@ <LineGlyph currentColor="#fff" kind={routeShortName} - nightIsFilled={false} + negative={false} + dark /> {:else} <span @@ -372,8 +373,8 @@ {/each} {:else} <div class="flex items-center justify-center"> - <div class="results max-w-2xl"> - {#if (placeName || placeId) && isResultsPage} + {#if (placeName || placeId) && isResultsPage} + <div class="results max-w-2xl relative"> <h2 class="text-2xl opacity-90">{m.no_results_title()}</h2> <p> {#each m @@ -382,9 +383,20 @@ >{part}</b >{/if}{/each} </p> - {:else if placeId} - TODO: add some loader here - {:else} + </div> + {:else if placeId} + <div + class="flex flex-col gap-2 justify-stretch w-full no-scroll-body" + style="--shimmer-w: 2000px" + > + {#each Array(30) as _} + <div class="h-[7.575rem] relative bg-[#28282C] rounded-xl"> + <div class="w-full h-full skeleton-shimmer rounded-xl"></div> + </div> + {/each} + </div> + {:else} + <div class="results max-w-2xl relative"> <h2 class="text-2xl opacity-90">{m.welcome_title()}</h2> <p class="pb-1"> {m.welcome_body_1()} @@ -463,7 +475,7 @@ onclick={() => setSearch('Lindau-Reutin')}>Lindau-Reutin</button > </div> - {/if} - </div> + </div> + {/if} </div> {/if} diff --git a/src/lib/assets/LineGlyph.svelte b/src/lib/assets/LineGlyph.svelte index a92716e..d890438 100644 --- a/src/lib/assets/LineGlyph.svelte +++ b/src/lib/assets/LineGlyph.svelte @@ -96,20 +96,34 @@ }, }; let { - kind: routeShortName, + kind: _routeShortName, type: _type, line: _line, currentColor: _currentColor, - nightIsFilled = true, + forceColor, + dark = false, + negative = true, }: { /** i.e. RE69, TER, etc... */ kind: string; type?: keyof typeof fernverkehrIconMap | string | null; line?: string; - nightIsFilled?: boolean; - } & { - currentColor?: string; - } = $props(); + negative?: boolean; + dark?: boolean; + } & ( + | { + currentColor: string; + forceColor?: boolean; + } + | Record<string, never> + ) = $props(); + let routeShortName = $derived( + _routeShortName.startsWith('REX ') + ? _routeShortName.length >= 7 + ? 'REX' + : _routeShortName.replace('REX ', 'REX') + : _routeShortName + ); let shortNumberIndex = $derived( routeShortName.split('').findIndex((char) => char.match(/[0-9]/)) @@ -150,13 +164,15 @@ isFernverkehr = $derived( (lineType ?? '').toUpperCase() in fernverkehrIconMap ), - isNightRendering = + isNightRendering = $derived( routeShortName.toUpperCase().startsWith('SN') || - routeShortName.toUpperCase().startsWith('REN') || - routeShortName.toUpperCase().startsWith('IRN'), - isErsatzverkehr = routeShortName.toUpperCase().startsWith('EV'); + routeShortName.toUpperCase().startsWith('REN') || + routeShortName.toUpperCase().startsWith('IRN') + ), + isErsatzverkehr = $derived(routeShortName.toUpperCase().startsWith('EV')); let currentColor = $derived( - _currentColor ?? (isRE ? '#eb0000' : 'currentColor') + (forceColor || !(isRE && !dark) ? _currentColor : undefined) ?? + (isRE && !dark ? '#eb0000' : 'currentColor') ); const sbbFontFamilySvgDeclaration = "font-family: SBB, 'SBB Web', 'Helvetica Neue', Helvetica, Inter, system-ui, sans-serif"; @@ -258,12 +274,12 @@ id="path1-8" style="display:inline;fill:{isErsatzverkehr ? '#e84e10' - : nightIsFilled && isNightRendering + : negative && isNightRendering ? '#000' : 'none'};stroke:{isErsatzverkehr ? '#e84e10' : isNightRendering - ? nightIsFilled + ? negative ? '#000' : '#FFDE15' : currentColor};stroke-opacity:1" @@ -301,7 +317,7 @@ 'fill-opacity:1', `stroke:${ /*isNightRendering - ? nightIsFilled + ? negative '#FFDE15' : currentColor*/ 'none' }`, diff --git a/src/routes/train-ico/[type]/[[line]]/+page.svelte b/src/routes/train-ico/[type]/[[line]]/+page.svelte index 59ec23b..0b7a3ac 100644 --- a/src/routes/train-ico/[type]/[[line]]/+page.svelte +++ b/src/routes/train-ico/[type]/[[line]]/+page.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import type { PageProps } from './$types'; import LineGlyph from '$lib/assets/LineGlyph.svelte'; + import { page } from '$app/state'; let { data }: PageProps = $props(); let { params } = $derived(data); @@ -8,7 +9,7 @@ <LineGlyph kind="{params.type}{params.line}" - type={params.type} - line={params.line} - nightIsFilled={false} + type={!page.url.searchParams.has('only-joined') ? params.type : undefined} + line={!page.url.searchParams.has('only-joined') ? params.line : undefined} + negative={false} /> |