christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Racepicks: Make vertical race name font smaller on small screens

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-25 18:59:30 +01:00
parent 98e4f92485
commit d31576a4d5
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/cards/RaceResultCard.svelte
View File

@ -47,7 +47,7 @@
// Reactive state // Reactive state
let required: boolean = $derived(!result); let required: boolean = $derived(!result);
let disabled: boolean = $derived(!data.admin); let disabled: boolean = $derived(!data.admin); // TODO: Datelock (prevent entering future result)
let race_select_value: string = $state(result?.race ?? ""); let race_select_value: string = $state(result?.race ?? "");
let currentrace: Race | undefined = $derived( let currentrace: Race | undefined = $derived(

7
src/routes/racepicks/+page.svelte
View File

@ -254,10 +254,12 @@
{#each raceresults as result} {#each raceresults as result}
{@const race = get_by_value(races, "id", result.race)} {@const race = get_by_value(races, "id", result.race)}
<!-- Race name display -->
<div <div
use:popup={race_popupsettings(race?.id ?? "Invalid")} use:popup={race_popupsettings(race?.id ?? "Invalid")}
class="card mt-2 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36" class="card mt-2 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
> >
<!-- For large screens -->
<span class="hidden text-sm font-bold lg:block"> <span class="hidden text-sm font-bold lg:block">
{race?.step}: {race?.name} {race?.step}: {race?.name}
</span> </span>
@ -266,8 +268,9 @@
</span> </span>
<span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span> <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
<span class="block rotate-90 text-sm font-bold lg:hidden"> <!-- For small screens -->
{race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""} <span class="block rotate-90 text-xs font-bold lg:hidden">
{race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""}
</span> </span>
</div> </div>