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

Racepicks: Show all picked/outstanding users with scroll

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-26 22:28:03 +01:00
parent 5b02b37e38
commit b6f02c683f
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,8 +76,8 @@
<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">
<!-- Show information about the next race -->
<div class="justify-center gap-2 lg:flex"> <div class="justify-center gap-2 lg:flex">
<!-- Show information about the next race -->
<div class="mt-2 flex gap-2"> <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">
<span class="font-bold"> <span class="font-bold">
@ -156,13 +156,13 @@
<!-- 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 gap-2"> <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.slice(0, 16) 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}
@ -173,12 +173,14 @@
{/each} {/each}
</div> </div>
</div> </div>
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40"> <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"> <h1 class="text-nowrap font-bold">
Outstanding ({outstanding.length}/{currentpicked.length}): Missing ({outstanding.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 outstanding.slice(0, 16) as user} {#each outstanding 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}