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

Compare commits

base: christoph:59ece6294727f78f0adb67af16b748576f27c9d9
Branches Tags
christoph:master
..
compare: christoph:77895d90578983c9978aefcbb8f8828cfe1d5c40
Branches Tags
christoph:master

2 Commits
59ece62947 ... 77895d9057

Author SHA1 Message Date
Christoph Urlacher
77895d9057 Seasonpicks: Decrease table margins
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 49s
Details
2025-06-06 16:08:58 +02:00
Christoph Urlacher
0cd87c6222 Racepicks: Decrease table margins 2025-06-06 16:08:58 +02:00
2 changed files with 23 additions and 33 deletions
Expand all files Collapse all files

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

@ -256,7 +256,7 @@
{#await data.currentpickedusers then currentpicked} {#await data.currentpickedusers then currentpicked}
{#each currentpicked as user} {#each currentpicked as user}
<div <div
class="card ml-1 mt-2 w-full min-w-14 rounded-b-none py-2 lg:ml-2 class="card ml-1 mt-2 w-full min-w-14 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 -->
@ -293,7 +293,7 @@
<div <div
use:popup={race_popupsettings(race?.id ?? "Invalid")} use:popup={race_popupsettings(race?.id ?? "Invalid")}
class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none lg:mt-2 lg:w-36 lg:p-2" class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none lg:w-36 lg:p-2"
> >
<!-- For large screens --> <!-- For large screens -->
<span class="hidden text-sm font-bold lg:block"> <span class="hidden text-sm font-bold lg:block">
@ -351,7 +351,7 @@
{#each currentpicked as user} {#each currentpicked as user}
{@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)} {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
<div class="ml-1 w-full min-w-14 lg:ml-2"> <div class="ml-1 w-full min-w-14">
{#each raceresults as result} {#each raceresults as result}
{@const race = get_by_value(races, "id", result.race)} {@const race = get_by_value(races, "id", result.race)}
{@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]} {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
@ -360,7 +360,7 @@
result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]} result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
{#if pick} {#if pick}
<div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 lg:mt-2 lg:px-2"> <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 lg:px-2">
<div class="mx-auto flex h-full w-fit flex-col justify-evenly"> <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
<span <span
class="w-10 p-1 text-center text-xs rounded-container-token lg:text-sm" class="w-10 p-1 text-center text-xs rounded-container-token lg:text-sm"
@ -377,7 +377,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="mt-1 h-20 w-full px-1 py-2 lg:mt-2 lg:px-2"></div> <div class="mt-1 h-20 w-full px-1 py-2 lg:px-2"></div>
{/if} {/if}
{/each} {/each}
</div> </div>

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">