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

Seasonpicks: Decrease table margins
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 49s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2025-06-06 16:07:36 +02:00
parent 0cd87c6222
commit 77895d9057
1 changed files with 18 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -264,7 +264,7 @@
{#await data.seasonpickedusers then seasonpicked} {#await data.seasonpickedusers then seasonpicked}
{#each seasonpicked as user} {#each seasonpicked as user}
<div <div
class="card ml-1 mt-2 w-full min-w-36 rounded-b-none py-2 lg:ml-2 class="card ml-1 mt-2 w-full min-w-36 rounded-b-none py-2
{$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}" {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
> >
<!-- Avatar + name display at the top --> <!-- Avatar + name display at the top -->
@ -296,7 +296,7 @@
class="sticky left-0 z-10 w-7 min-w-7 max-w-7 bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36" class="sticky left-0 z-10 w-7 min-w-7 max-w-7 bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36"
> >
<!-- Hottake --> <!-- Hottake -->
<div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none p-2 lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span> <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
</div> </div>
@ -304,13 +304,13 @@
{#await data.seasonpicks then seasonpicks} {#await data.seasonpicks then seasonpicks}
{#if seasonpicks.length > 0} {#if seasonpicks.length > 0}
<!-- Drivers Champion --> <!-- Drivers Champion -->
<div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span> <span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
</div> </div>
<!-- Constructors Champion --> <!-- Constructors Champion -->
<div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 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 Constructors<br />Champion
</span> </span>
@ -318,25 +318,25 @@
</div> </div>
<!-- Overtakes --> <!-- Overtakes -->
<div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span> <span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
</div> </div>
<!-- DNFs --> <!-- DNFs -->
<div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span> <span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
</div> </div>
<!-- Doohan Starts --> <!-- Doohan Starts -->
<div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span> <span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
</div> </div>
<!-- Teamwinners --> <!-- Teamwinners -->
<div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 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"
>Team-Battle<br />Winners</span >Team-Battle<br />Winners</span
> >
@ -344,7 +344,7 @@
</div> </div>
<!-- Podiums --> <!-- Podiums -->
<div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36"> <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span> <span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span> <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
</div> </div>
@ -371,10 +371,10 @@
.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code)) .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
.sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))} .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))}
<div class="ml-1 w-full min-w-36 lg:ml-2"> <div class="ml-1 w-full min-w-36">
<!-- Hottake --> <!-- Hottake -->
<div <div
class="mt-1 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2" class="mt-1 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
> >
<div class="mx-auto w-fit text-xs font-bold lg:text-sm"> <div class="mx-auto w-fit text-xs font-bold lg:text-sm">
{hottake?.hottake ?? "?"} {hottake?.hottake ?? "?"}
@ -383,9 +383,7 @@
{#if seasonpicks.length > 0} {#if seasonpicks.length > 0}
<!-- Drivers Champion --> <!-- Drivers Champion -->
<div <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
>
<div class="mx-auto w-fit"> <div class="mx-auto w-fit">
<!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) --> <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
<LazyImage <LazyImage
@ -400,9 +398,7 @@
</div> </div>
<!-- Constructors Champion --> <!-- Constructors Champion -->
<div <div class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
>
<div class="mx-auto w-fit"> <div class="mx-auto w-fit">
<LazyImage <LazyImage
src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)} src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
@ -416,9 +412,7 @@
</div> </div>
<!-- Most Overtakes --> <!-- Most Overtakes -->
<div <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
>
<div class="mx-auto w-fit"> <div class="mx-auto w-fit">
<LazyImage <LazyImage
src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)} src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
@ -434,9 +428,7 @@
</div> </div>
<!-- Most DNFs --> <!-- Most DNFs -->
<div <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
>
<div class="mx-auto w-fit"> <div class="mx-auto w-fit">
<LazyImage <LazyImage
src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)} src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
@ -450,9 +442,7 @@
</div> </div>
<!-- Doohan Starts --> <!-- Doohan Starts -->
<div <div class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
>
<div class="mx-auto w-fit text-xs lg:text-sm"> <div class="mx-auto w-fit text-xs lg:text-sm">
Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal. Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal.
</div> </div>
@ -460,7 +450,7 @@
<!-- Teamwinners --> <!-- Teamwinners -->
<div <div
class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:mt-2 lg:px-2" class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2"
> >
{#if pick && pick.teamwinners} {#if pick && pick.teamwinners}
<div class="grid grid-cols-2 gap-1"> <div class="grid grid-cols-2 gap-1">
@ -489,7 +479,7 @@
<!-- Podiums --> <!-- Podiums -->
<!-- TODO: Replace all style tags throughout the page with custom classes like height here --> <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
<div <div
class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 shadow lg:mt-2 lg:px-2" class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 shadow lg:px-2"
> >
{#if pick && pick.podiums} {#if pick && pick.podiums}
<div class="grid grid-cols-2 gap-1"> <div class="grid grid-cols-2 gap-1">