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

Racepicks: Hide accordion if signed out

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-18 12:14:00 +01:00
parent a9b37a8884
commit 8a79da8d8b
1 changed files with 32 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,7 +67,8 @@
<title>Formula 11 - Race Picks</title> <title>Formula 11 - Race Picks</title>
</svelte:head> </svelte:head>
{#if data.currentrace} <!-- Only show the userguess if signed in and we have a next race -->
{#if $pbUser && data.currentrace}
{#await Promise.all( [data.drivers, data.currentpickedusers, pickedusers, outstandingusers], ) then [drivers, currentpicked, picked, outstanding]} {#await Promise.all( [data.drivers, data.currentpickedusers, pickedusers, outstandingusers], ) then [drivers, currentpicked, picked, outstanding]}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full"> <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
<AccordionItem> <AccordionItem>
@ -76,10 +77,7 @@
<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 <div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-6">
class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit
{pbUser ? 'lg:grid-cols-6' : 'lg:grid-cols-4'}"
>
<!-- Show information about the next race --> <!-- Show information about the next race -->
<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 lg:max-w-40">
<span class="font-bold"> <span class="font-bold">
@ -123,38 +121,35 @@
/> />
</div> </div>
<!-- Only show the userguess if signed in --> <!-- PXX pick -->
{#if pbUser} <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<!-- PXX pick --> <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40"> <LazyImage
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1> src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
<LazyImage get_driver_headshot_template(data.graphics)}
src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ?? imgwidth={DRIVER_HEADSHOT_WIDTH}
get_driver_headshot_template(data.graphics)} imgheight={DRIVER_HEADSHOT_HEIGHT}
imgwidth={DRIVER_HEADSHOT_WIDTH} containerstyle="height: 115px; margin: auto;"
imgheight={DRIVER_HEADSHOT_HEIGHT} imgclass="bg-transparent cursor-pointer"
containerstyle="height: 115px; margin: auto;" hoverzoom
imgclass="bg-transparent cursor-pointer" onclick={racepick_handler}
hoverzoom />
onclick={racepick_handler} </div>
/>
</div>
<!-- DNF pick --> <!-- DNF pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40"> <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> <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ?? src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.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>
{/if}
<!-- Show users that have picked --> <!-- Show users that have picked -->
<div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40"> <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
@ -199,7 +194,7 @@
{/if} {/if}
<!-- The fookin table --> <!-- The fookin table -->
<div class="flex"> <div class="flex {!$pbUser ? 'mt-[-8px]' : ''}">
<div> <div>
<!-- Points color coding legend --> <!-- Points color coding legend -->
<!-- Use mt-3/mt-4 to account for 2x padding around the avatar. --> <!-- Use mt-3/mt-4 to account for 2x padding around the avatar. -->