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

Seasonpicks: Use grid for accordion + adjust breakpoints

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-14 00:27:33 +01:00
parent b36ec6c3cd
commit e63c905f0e
1 changed files with 143 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,7 +67,7 @@
<span class="font-bold">Your Season Pick</span> <span class="font-bold">Your Season Pick</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-5 2xl:grid-cols-10">
<!-- Only show the stuff if signed in --> <!-- Only show the stuff if signed in -->
{#if data.user} {#if data.user}
{@const teamwinners = data.seasonpick {@const teamwinners = data.seasonpick
@ -81,13 +81,14 @@
.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code)) .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
: [undefined]} : [undefined]}
<!-- Hottake + Doohanstarts --> <!-- Hottake -->
<div class="mt-2 flex gap-2"> <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">
<h1 class="mb-2 text-nowrap font-bold">Hottake:</h1> <h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
<span class="text-sm">{data.seasonpick?.hottake}</span> <span class="text-sm">{data.seasonpick?.hottake}</span>
</div> </div>
<div class="card w-full min-w-40 p-2 shadow">
<!-- Doohanstarts -->
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1> <h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
{#if data.seasonpick} {#if data.seasonpick}
<span class="text-sm"> <span class="text-sm">
@ -95,15 +96,13 @@
</span> </span>
{/if} {/if}
</div> </div>
</div>
<!-- WDC + WCC --> <!-- WDC -->
<div class="mt-2 flex gap-2"> <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">
<h1 class="mb-2 text-nowrap font-bold">WDC:</h1> <h1 class="mb-2 text-nowrap font-bold">WDC:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "") src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")?.headshot_url ??
?.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;"
@ -112,7 +111,9 @@
onclick={seasonpick_handler} onclick={seasonpick_handler}
/> />
</div> </div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<!-- WDC -->
<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">WCC:</h1> <h1 class="mb-2 text-nowrap font-bold">WCC:</h1>
<LazyImage <LazyImage
src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ?? src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
@ -125,11 +126,9 @@
onclick={seasonpick_handler} onclick={seasonpick_handler}
/> />
</div> </div>
</div>
<!-- Overtakes + DNFs --> <!-- Overtakes -->
<div class="mt-2 flex gap-2"> <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">
<h1 class="mb-2 text-nowrap font-bold">Most Overtakes:</h1> <h1 class="mb-2 text-nowrap font-bold">Most Overtakes:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "") src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
@ -142,7 +141,9 @@
onclick={seasonpick_handler} onclick={seasonpick_handler}
/> />
</div> </div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<!-- DNFs -->
<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">Most DNFs:</h1> <h1 class="mb-2 text-nowrap font-bold">Most DNFs:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ?? src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
@ -155,11 +156,11 @@
onclick={seasonpick_handler} onclick={seasonpick_handler}
/> />
</div> </div>
</div>
<!-- Teamwinners + Podiums --> <!-- Teamwinners -->
<div class="mt-2 flex gap-2"> <div
<div class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow"> class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
>
<h1 class="mb-2 text-nowrap font-bold">Teamwinners:</h1> <h1 class="mb-2 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 grid-cols-4 gap-x-0 gap-y-0.5">
{#each teamwinners.slice(0, 12) as winner} {#each teamwinners.slice(0, 12) as winner}
@ -173,7 +174,11 @@
{/each} {/each}
</div> </div>
</div> </div>
<div class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow">
<!-- Podiums -->
<div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
>
<h1 class="mb-2 text-nowrap font-bold">Podiums:</h1> <h1 class="mb-2 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 grid-cols-4 gap-x-0 gap-y-0.5">
{#each podiums as podium} {#each podiums as podium}
@ -187,12 +192,10 @@
{/each} {/each}
</div> </div>
</div> </div>
</div>
{/if} {/if}
<!-- Show users that have and have not picked yet --> <!-- Show users that have picked -->
{#if seasonpicks.length === 0} {#if seasonpicks.length === 0}
<div class="mt-2 flex gap-2">
<div <div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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"
> >
@ -211,6 +214,8 @@
{/each} {/each}
</div> </div>
</div> </div>
<!-- Show users that have not picked yet -->
<div <div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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"
> >
@ -229,7 +234,6 @@
{/each} {/each}
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
</svelte:fragment> </svelte:fragment>