Seasonpicks: Use grid for accordion + adjust breakpoints
This commit is contained in:
@ -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,153 +81,157 @@
|
|||||||
.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 -->
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
|
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
|
||||||
{#if data.seasonpick}
|
<h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
|
||||||
<span class="text-sm">
|
{#if data.seasonpick}
|
||||||
Jack Doohan startet {data.seasonpick?.doohanstarts} mal.
|
<span class="text-sm">
|
||||||
</span>
|
Jack Doohan startet {data.seasonpick?.doohanstarts} mal.
|
||||||
{/if}
|
</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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">WDC:</h1>
|
||||||
|
<LazyImage
|
||||||
|
src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")?.headshot_url ??
|
||||||
|
get_driver_headshot_template(data.graphics)}
|
||||||
|
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||||
|
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||||
|
containerstyle="height: 115px; margin: auto;"
|
||||||
|
imgclass="bg-transparent cursor-pointer"
|
||||||
|
hoverzoom
|
||||||
|
onclick={seasonpick_handler}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<LazyImage
|
||||||
|
src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
|
||||||
|
get_team_banner_template(data.graphics)}
|
||||||
|
imgwidth={TEAM_BANNER_WIDTH}
|
||||||
|
imgheight={TEAM_BANNER_HEIGHT}
|
||||||
|
containerstyle="height: 80px; margin: auto;"
|
||||||
|
imgclass="bg-transparent cursor-pointer rounded-md"
|
||||||
|
hoverzoom
|
||||||
|
onclick={seasonpick_handler}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Overtakes -->
|
||||||
|
<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 Overtakes:</h1>
|
||||||
|
<LazyImage
|
||||||
|
src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
|
||||||
|
?.headshot_url ?? get_driver_headshot_template(data.graphics)}
|
||||||
|
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||||
|
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||||
|
containerstyle="height: 115px; margin: auto;"
|
||||||
|
imgclass="bg-transparent cursor-pointer"
|
||||||
|
hoverzoom
|
||||||
|
onclick={seasonpick_handler}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<LazyImage
|
||||||
|
src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
|
||||||
|
get_driver_headshot_template(data.graphics)}
|
||||||
|
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||||
|
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||||
|
containerstyle="height: 115px; margin: auto;"
|
||||||
|
imgclass="bg-transparent cursor-pointer"
|
||||||
|
hoverzoom
|
||||||
|
onclick={seasonpick_handler}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Teamwinners -->
|
||||||
|
<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">Teamwinners:</h1>
|
||||||
|
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
||||||
|
{#each teamwinners.slice(0, 12) as winner}
|
||||||
|
<LazyImage
|
||||||
|
src={winner?.headshot_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>
|
||||||
|
|
||||||
<!-- WDC + WCC -->
|
<!-- Podiums -->
|
||||||
<div class="mt-2 flex gap-2">
|
<div
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 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">WDC:</h1>
|
>
|
||||||
<LazyImage
|
<h1 class="mb-2 text-nowrap font-bold">Podiums:</h1>
|
||||||
src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")
|
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
||||||
?.headshot_url ?? get_driver_headshot_template(data.graphics)}
|
{#each podiums as podium}
|
||||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
<LazyImage
|
||||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)}
|
||||||
containerstyle="height: 115px; margin: auto;"
|
imgwidth={AVATAR_WIDTH}
|
||||||
imgclass="bg-transparent cursor-pointer"
|
imgheight={AVATAR_HEIGHT}
|
||||||
hoverzoom
|
containerstyle="height: 35px; width: 35px;"
|
||||||
onclick={seasonpick_handler}
|
imgclass="bg-surface-400 rounded-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
{/each}
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
|
||||||
<h1 class="mb-2 text-nowrap font-bold">WCC:</h1>
|
|
||||||
<LazyImage
|
|
||||||
src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
|
|
||||||
get_team_banner_template(data.graphics)}
|
|
||||||
imgwidth={TEAM_BANNER_WIDTH}
|
|
||||||
imgheight={TEAM_BANNER_HEIGHT}
|
|
||||||
containerstyle="height: 80px; margin: auto;"
|
|
||||||
imgclass="bg-transparent cursor-pointer rounded-md"
|
|
||||||
hoverzoom
|
|
||||||
onclick={seasonpick_handler}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Overtakes + DNFs -->
|
|
||||||
<div class="mt-2 flex gap-2">
|
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Most Overtakes:</h1>
|
|
||||||
<LazyImage
|
|
||||||
src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
|
|
||||||
?.headshot_url ?? get_driver_headshot_template(data.graphics)}
|
|
||||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
|
||||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
|
||||||
containerstyle="height: 115px; margin: auto;"
|
|
||||||
imgclass="bg-transparent cursor-pointer"
|
|
||||||
hoverzoom
|
|
||||||
onclick={seasonpick_handler}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Most DNFs:</h1>
|
|
||||||
<LazyImage
|
|
||||||
src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
|
|
||||||
get_driver_headshot_template(data.graphics)}
|
|
||||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
|
||||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
|
||||||
containerstyle="height: 115px; margin: auto;"
|
|
||||||
imgclass="bg-transparent cursor-pointer"
|
|
||||||
hoverzoom
|
|
||||||
onclick={seasonpick_handler}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Teamwinners + Podiums -->
|
|
||||||
<div class="mt-2 flex gap-2">
|
|
||||||
<div class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow">
|
|
||||||
<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">
|
|
||||||
{#each teamwinners.slice(0, 12) as winner}
|
|
||||||
<LazyImage
|
|
||||||
src={winner?.headshot_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 class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow">
|
|
||||||
<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">
|
|
||||||
{#each podiums as podium}
|
|
||||||
<LazyImage
|
|
||||||
src={podium?.headshot_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>
|
||||||
{/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"
|
>
|
||||||
>
|
<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.slice(0, 16) 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>
|
||||||
<div
|
</div>
|
||||||
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
|
|
||||||
>
|
<!-- Show users that have not picked yet -->
|
||||||
<h1 class="text-nowrap font-bold">
|
<div
|
||||||
Missing ({outstanding.length}/{currentpicked.length}):
|
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
|
||||||
</h1>
|
>
|
||||||
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
<h1 class="text-nowrap font-bold">
|
||||||
{#each outstanding.slice(0, 16) as user}
|
Missing ({outstanding.length}/{currentpicked.length}):
|
||||||
<LazyImage
|
</h1>
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
|
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
||||||
imgwidth={AVATAR_WIDTH}
|
{#each outstanding.slice(0, 16) as user}
|
||||||
imgheight={AVATAR_HEIGHT}
|
<LazyImage
|
||||||
containerstyle="height: 35px; width: 35px;"
|
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
|
||||||
imgclass="bg-surface-400 rounded-full"
|
imgwidth={AVATAR_WIDTH}
|
||||||
/>
|
imgheight={AVATAR_HEIGHT}
|
||||||
{/each}
|
containerstyle="height: 35px; width: 35px;"
|
||||||
</div>
|
imgclass="bg-surface-400 rounded-full"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user