Racepicks: Fix "Your Race Pick" accordion opening lag
This commit is contained in:
@ -69,60 +69,60 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
{#if data.currentrace}
|
{#if data.currentrace}
|
||||||
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
|
{#await data.drivers then drivers}
|
||||||
<AccordionItem>
|
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
|
||||||
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
|
<AccordionItem>
|
||||||
<svelte:fragment slot="summary">
|
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
|
||||||
<span class="font-bold">Next Race Guess</span>
|
<svelte:fragment slot="summary">
|
||||||
</svelte:fragment>
|
<span class="font-bold">Next Race Guess</span>
|
||||||
<svelte:fragment slot="content">
|
</svelte:fragment>
|
||||||
<div class="justify-center gap-2 lg:flex">
|
<svelte:fragment slot="content">
|
||||||
<!-- Show information about the next race -->
|
<div class="justify-center gap-2 lg:flex">
|
||||||
<div class="mt-2 flex gap-2">
|
<!-- Show information about the next race -->
|
||||||
<div class="card flex w-full min-w-40 flex-col p-2 shadow">
|
<div class="mt-2 flex gap-2">
|
||||||
<span class="font-bold">
|
<div class="card flex w-full min-w-40 flex-col p-2 shadow">
|
||||||
Step {data.currentrace.step}: {data.currentrace.name}
|
<span class="font-bold">
|
||||||
</span>
|
{data.currentrace.name}
|
||||||
{#if data.currentrace.sprintdate}
|
</span>
|
||||||
|
{#if data.currentrace.sprintdate}
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="w-12">SQuali:</span>
|
||||||
|
<span>{format_date(data.currentrace.sprintqualidate, dateformat)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="w-12">SRace:</span>
|
||||||
|
<span>{format_date(data.currentrace.sprintdate, dateformat)}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<span class="w-12">SQuali:</span>
|
<span class="w-12">Quali:</span>
|
||||||
<span>{format_date(data.currentrace.sprintqualidate, dateformat)}</span>
|
<span>{format_date(data.currentrace.qualidate, dateformat)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<span class="w-12">SRace:</span>
|
<span class="w-12">Race:</span>
|
||||||
<span>{format_date(data.currentrace.sprintdate, dateformat)}</span>
|
<span>{format_date(data.currentrace.racedate, dateformat)}</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
<div class="m-auto flex">
|
||||||
<div class="flex gap-2">
|
<div class="mr-1 mt-1">
|
||||||
<span class="w-12">Quali:</span>
|
<StopwatchIcon />
|
||||||
<span>{format_date(data.currentrace.qualidate, dateformat)}</span>
|
</div>
|
||||||
</div>
|
<Countdown date={data.currentrace.racedate} extraclass="font-bold" />
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="w-12">Race:</span>
|
|
||||||
<span>{format_date(data.currentrace.racedate, dateformat)}</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 class="card w-full min-w-40 p-2 shadow">
|
||||||
|
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
|
||||||
|
<LazyImage
|
||||||
|
src={data.currentrace.pictogram_url ?? "Invalid"}
|
||||||
|
imgwidth={RACE_PICTOGRAM_WIDTH}
|
||||||
|
imgheight={RACE_PICTOGRAM_HEIGHT}
|
||||||
|
containerstyle="height: 105px; margin: auto;"
|
||||||
|
imgstyle="background: transparent;"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card w-full min-w-40 p-2 shadow">
|
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
|
|
||||||
<LazyImage
|
|
||||||
src={data.currentrace.pictogram_url ?? "Invalid"}
|
|
||||||
imgwidth={RACE_PICTOGRAM_WIDTH}
|
|
||||||
imgheight={RACE_PICTOGRAM_HEIGHT}
|
|
||||||
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}
|
||||||
{#await data.drivers then drivers}
|
|
||||||
<div class="mt-2 flex gap-2">
|
<div class="mt-2 flex gap-2">
|
||||||
<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">
|
||||||
<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>
|
||||||
@ -151,56 +151,55 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/if}
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Show users that have and have not picked yet -->
|
<!-- Show users that have and have not picked yet -->
|
||||||
{#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
|
{#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
|
||||||
<div class="mt-2 flex max-h-[155px] gap-2 overflow-y-scroll">
|
<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
|
||||||
|
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
|
||||||
|
>
|
||||||
|
<h1 class="text-nowrap font-bold">
|
||||||
|
Missing ({outstanding.length}/{currentpicked.length}):
|
||||||
|
</h1>
|
||||||
|
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
||||||
|
{#each outstanding as user}
|
||||||
|
<LazyImage
|
||||||
|
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
|
||||||
|
imgwidth={AVATAR_WIDTH}
|
||||||
|
imgheight={AVATAR_HEIGHT}
|
||||||
|
containerstyle="height: 35px; width: 35px;"
|
||||||
|
imgclass="bg-surface-400 rounded-full"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
{/await}
|
||||||
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
|
</div>
|
||||||
>
|
</svelte:fragment>
|
||||||
<h1 class="text-nowrap font-bold">
|
</AccordionItem>
|
||||||
Missing ({outstanding.length}/{currentpicked.length}):
|
</Accordion>
|
||||||
</h1>
|
{/await}
|
||||||
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
|
||||||
{#each outstanding as user}
|
|
||||||
<LazyImage
|
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
|
|
||||||
imgwidth={AVATAR_WIDTH}
|
|
||||||
imgheight={AVATAR_HEIGHT}
|
|
||||||
containerstyle="height: 35px; width: 35px;"
|
|
||||||
imgclass="bg-surface-400 rounded-full"
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</svelte:fragment>
|
|
||||||
</AccordionItem>
|
|
||||||
</Accordion>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- The fookin table -->
|
<!-- The fookin table -->
|
||||||
<!-- TODO: Hide this thing if no picks... -->
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div>
|
<div>
|
||||||
<!-- Points color coding legend -->
|
<!-- Points color coding legend -->
|
||||||
@ -301,7 +300,6 @@
|
|||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- TODO: If no guess is made, the table will probably be too short? -->
|
|
||||||
<!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
|
<!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
|
||||||
<div class="flex w-full overflow-x-scroll pb-2">
|
<div class="flex w-full overflow-x-scroll pb-2">
|
||||||
<!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
|
<!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
|
||||||
|
|||||||
Reference in New Issue
Block a user