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

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

@ -75,118 +75,118 @@
<span class="font-bold">Next Race Guess</span> <span class="font-bold">Next Race Guess</span>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="content"> <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 --> <!-- 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 lg:max-w-40">
<div class="card flex w-full min-w-40 flex-col p-2 shadow"> <span class="font-bold">
<span class="font-bold"> {data.currentrace.name}
{data.currentrace.name} </span>
</span> {#if data.currentrace.sprintdate}
{#if data.currentrace.sprintdate}
<div class="flex gap-2">
<span class="w-12">SQuali:</span>
<span>{format_date(data.currentrace.sprintqualidate, shortdatetimeformat)}</span
>
</div>
<div class="flex gap-2">
<span class="w-12">SRace:</span>
<span>{format_date(data.currentrace.sprintdate, shortdatetimeformat)}</span>
</div>
{/if}
<div class="flex gap-2"> <div class="flex gap-2">
<span class="w-12">Quali:</span> <span class="w-12">SQuali:</span>
<span>{format_date(data.currentrace.qualidate, shortdatetimeformat)}</span> <span>{format_date(data.currentrace.sprintqualidate, shortdatetimeformat)}</span>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<span class="w-12">Race:</span> <span class="w-12">SRace:</span>
<span>{format_date(data.currentrace.racedate, shortdatetimeformat)}</span> <span>{format_date(data.currentrace.sprintdate, shortdatetimeformat)}</span>
</div> </div>
<div class="m-auto flex"> {/if}
<div class="mr-1 mt-1"> <div class="flex gap-2">
<StopwatchIcon /> <span class="w-12">Quali:</span>
</div> <span>{format_date(data.currentrace.qualidate, shortdatetimeformat)}</span>
<Countdown date={data.currentrace.racedate} extraclass="font-bold" /> </div>
<div class="flex gap-2">
<span class="w-12">Race:</span>
<span>{format_date(data.currentrace.racedate, shortdatetimeformat)}</span>
</div>
<div class="m-auto flex">
<div class="mr-1 mt-1">
<StopwatchIcon />
</div> </div>
<Countdown date={data.currentrace.racedate} extraclass="font-bold" />
</div> </div>
<div class="card w-full min-w-40 p-2 shadow"> </div>
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
<LazyImage <!-- Show race pictogram -->
src={data.currentrace.pictogram_url ?? "Invalid"} <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
imgwidth={RACE_PICTOGRAM_WIDTH} <h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
imgheight={RACE_PICTOGRAM_HEIGHT} <LazyImage
containerstyle="height: 105px; margin: auto;" src={data.currentrace.pictogram_url ?? "Invalid"}
imgstyle="background: transparent;" imgwidth={RACE_PICTOGRAM_WIDTH}
/> imgheight={RACE_PICTOGRAM_HEIGHT}
</div> containerstyle="height: 105px; margin: auto;"
imgstyle="background: transparent;"
/>
</div> </div>
<!-- Only show the userguess if signed in --> <!-- Only show the userguess if signed in -->
{#if data.user} {#if data.user}
<div class="mt-2 flex gap-2"> <!-- PXX pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow"> <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> <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ?? src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)} get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH} imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT} imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;" containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer" imgclass="bg-transparent cursor-pointer"
hoverzoom hoverzoom
onclick={racepick_handler} onclick={racepick_handler}
/> />
</div> </div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1> <!-- DNF pick -->
<LazyImage <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ?? <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
get_driver_headshot_template(data.graphics)} <LazyImage
imgwidth={DRIVER_HEADSHOT_WIDTH} src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
imgheight={DRIVER_HEADSHOT_HEIGHT} get_driver_headshot_template(data.graphics)}
containerstyle="height: 115px; margin: auto;" imgwidth={DRIVER_HEADSHOT_WIDTH}
imgclass="bg-transparent cursor-pointer" imgheight={DRIVER_HEADSHOT_HEIGHT}
hoverzoom containerstyle="height: 115px; margin: auto;"
onclick={racepick_handler} imgclass="bg-transparent cursor-pointer"
/> hoverzoom
</div> onclick={racepick_handler}
/>
</div> </div>
{/if} {/if}
<!-- Show users that have and have not picked yet --> <!-- Show users that have picked -->
<div class="mt-2 flex max-h-[155px] gap-2 overflow-y-scroll"> <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40"> <h1 class="text-nowrap font-bold">
<h1 class="text-nowrap font-bold"> Picked ({picked.length}/{currentpicked.length}):
Picked ({picked.length}/{currentpicked.length}): </h1>
</h1> <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> {#each picked as user}
{#each picked as user} <LazyImage
<LazyImage src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)} imgwidth={AVATAR_WIDTH}
imgwidth={AVATAR_WIDTH} imgheight={AVATAR_HEIGHT}
imgheight={AVATAR_HEIGHT} containerstyle="height: 35px; width: 35px;"
containerstyle="height: 35px; width: 35px;" imgclass="bg-surface-400 rounded-full"
imgclass="bg-surface-400 rounded-full" />
/> {/each}
{/each}
</div>
</div> </div>
<div </div>
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
> <!-- Show users that have not picked yet -->
<h1 class="text-nowrap font-bold"> <div
Missing ({outstanding.length}/{currentpicked.length}): class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
</h1> >
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <h1 class="text-nowrap font-bold">
{#each outstanding as user} Missing ({outstanding.length}/{currentpicked.length}):
<LazyImage </h1>
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)} <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
imgwidth={AVATAR_WIDTH} {#each outstanding as user}
imgheight={AVATAR_HEIGHT} <LazyImage
containerstyle="height: 35px; width: 35px;" src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgclass="bg-surface-400 rounded-full" imgwidth={AVATAR_WIDTH}
/> imgheight={AVATAR_HEIGHT}
{/each} containerstyle="height: 35px; width: 35px;"
</div> imgclass="bg-surface-400 rounded-full"
/>
{/each}
</div> </div>
</div> </div>
</div> </div>