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

Seasonpicks: Update accordion podiums/teamwinners/picked/outstanding overflows

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-18 12:05:00 +01:00
parent 0870e6510f
commit 3f31a00a09
1 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/routes/seasonpicks/+page.svelte
View File

@ -165,11 +165,9 @@
</div> </div>
<!-- Teamwinners --> <!-- Teamwinners -->
<div <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
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">Teamwinners:</h1> <h1 class="text-nowrap font-bold">Teamwinners:</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
{#each teamwinners.slice(0, 12) as winner} {#each teamwinners.slice(0, 12) as winner}
<LazyImage <LazyImage
src={winner?.headshot_url ?? get_driver_headshot_template(data.graphics)} src={winner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
@ -183,11 +181,9 @@
</div> </div>
<!-- Podiums --> <!-- Podiums -->
<div <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
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">Podiums:</h1> <h1 class="text-nowrap font-bold">Podiums:</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
{#each podiums as podium} {#each podiums as podium}
<LazyImage <LazyImage
src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)} src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)}
@ -203,14 +199,12 @@
<!-- Show users that have picked --> <!-- Show users that have picked -->
{#if seasonpicks.length === 0} {#if seasonpicks.length === 0}
<div <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
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">
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 max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
{#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}
@ -223,14 +217,12 @@
</div> </div>
<!-- Show users that have not picked yet --> <!-- Show users that have not picked yet -->
<div <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
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">
Missing ({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 max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
{#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}
@ -274,9 +266,9 @@
<div <div
class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36" class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
> >
<span class="hidden text-nowrap text-sm font-bold lg:block" <span class="hidden text-nowrap text-sm font-bold lg:block">
>Constructors<br />Champion</span Constructors<br />Champion
> </span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
</div> </div>