aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorLibravatarLarge Libravatar memdmp <memdmpestrogenzone>2025-08-23 19:34:47 +0200
committerLibravatarLarge Libravatar memdmp <memdmpestrogenzone>2025-08-23 19:34:47 +0200
commit53e3544effa012d36f3b0d732a922ca219b7692a (patch)
treefb77554cc4050b3466004c1d311181c1022a8b2b /src
parent65d3c7fd964be7231879e66bf5a1c8a106a231c7 (diff)
downloadfahrplan-53e3544effa012d36f3b0d732a922ca219b7692a.tar.gz
fahrplan-53e3544effa012d36f3b0d732a922ca219b7692a.tar.bz2
fahrplan-53e3544effa012d36f3b0d732a922ca219b7692a.tar.lz
fahrplan-53e3544effa012d36f3b0d732a922ca219b7692a.zip

feat: changes

HEADmaster
Diffstat (limited to 'src')
-rw-r--r--src/app.css22
-rw-r--r--src/app.html2
-rw-r--r--src/lib/Timetable.svelte28
-rw-r--r--src/lib/assets/LineGlyph.svelte44
-rw-r--r--src/routes/train-ico/[type]/[[line]]/+page.svelte7
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}
/>
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-03 12:15:46 +0000