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

Racepicks: Rework racename display on mobile (fixes emoji bug)
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 40s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-23 19:00:48 +01:00
parent 45d4cc1557
commit 243a020e00
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@
RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH,
} from "$lib/config";
import { runes, substring } from "runes2";
import { format_date, shortdatetimeformat } from "$lib/date";
import type { CurrentPickedUser, RacePick } from "$lib/schema";
import { get_by_value, get_driver_headshot_template } from "$lib/database";
@ -292,7 +293,7 @@
<div
use:popup={race_popupsettings(race?.id ?? "Invalid")}
class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"
class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none lg:mt-2 lg:w-36 lg:p-2"
>
<!-- For large screens -->
<span class="hidden text-sm font-bold lg:block">
@ -304,9 +305,10 @@
<span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
<!-- For small screens -->
<span class="block rotate-90 text-xs font-bold lg:hidden">
{race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""}
</span>
<!-- TODO: This requires the race name to end with an emoji, but this is never enforced -->
<div class="mx-[2px] my-[25px] block text-lg font-bold lg:hidden">
{runes(race?.name ?? "Invalid").at(-1)}
</div>
</div>
<!-- The race result popup is triggered on click on the race -->