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

Racepicks: Use grid for accordion
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-14 00:27:40 +01:00
parent e63c905f0e
commit 8c18cef7aa
1 changed files with 97 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,18 +75,16 @@
<span class="font-bold">Next Race Guess</span>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="justify-center gap-2 lg:flex">
<div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-6">
<!-- Show information about the next race -->
<div class="mt-2 flex gap-2">
<div class="card flex w-full min-w-40 flex-col p-2 shadow">
<div class="card flex w-full min-w-40 flex-col p-2 shadow lg:max-w-40">
<span class="font-bold">
{data.currentrace.name}
</span>
{#if data.currentrace.sprintdate}
<div class="flex gap-2">
<span class="w-12">SQuali:</span>
<span>{format_date(data.currentrace.sprintqualidate, shortdatetimeformat)}</span
>
<span>{format_date(data.currentrace.sprintqualidate, shortdatetimeformat)}</span>
</div>
<div class="flex gap-2">
<span class="w-12">SRace:</span>
@ -108,7 +106,9 @@
<Countdown date={data.currentrace.racedate} extraclass="font-bold" />
</div>
</div>
<div class="card w-full min-w-40 p-2 shadow">
<!-- Show race pictogram -->
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
<LazyImage
src={data.currentrace.pictogram_url ?? "Invalid"}
@ -118,12 +118,11 @@
imgstyle="background: transparent;"
/>
</div>
</div>
<!-- Only show the userguess if signed in -->
{#if data.user}
<div class="mt-2 flex gap-2">
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<!-- PXX pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
@ -136,7 +135,9 @@
onclick={racepick_handler}
/>
</div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<!-- DNF pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
@ -149,11 +150,9 @@
onclick={racepick_handler}
/>
</div>
</div>
{/if}
<!-- Show users that have and have not picked yet -->
<div class="mt-2 flex max-h-[155px] gap-2 overflow-y-scroll">
<!-- Show users that have picked -->
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">
Picked ({picked.length}/{currentpicked.length}):
@ -170,6 +169,8 @@
{/each}
</div>
</div>
<!-- Show users that have not picked yet -->
<div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
>
@ -189,7 +190,6 @@
</div>
</div>
</div>
</div>
</svelte:fragment>
</AccordionItem>
</Accordion>