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

Racepicks: Update table styling

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-31 22:16:27 +01:00
parent a3bdd8cbbd
commit 14001be46c
1 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -248,48 +248,44 @@
<!-- The fookin table --> <!-- The fookin table -->
<div class="flex"> <div class="flex">
<div> <div>
<!-- Make space for the avatars in the guess columns. --> <!-- Points color coding legend -->
<!-- Use mt-4 to account for 2x padding around the avatar. --> <!-- Use mt-3/mt-4 to account for 2x padding around the avatar. -->
<div class="mt-3 h-10 lg:mt-4"> <div class="mt-4 h-10">
<div class="hidden h-5 text-sm font-bold lg:block">Points:</div> <div class="hidden h-5 text-sm font-bold lg:block">Points:</div>
<div class="flex h-full flex-col lg:h-5 lg:flex-row lg:gap-2"> <div
class="flex h-full flex-col overflow-hidden rounded-b-lg rounded-t-lg shadow lg:h-5 lg:flex-row lg:!rounded-l-lg lg:!rounded-r-lg lg:rounded-b-none lg:rounded-t-none"
>
<!-- Large Screens: --> <!-- Large Screens: -->
<span <span
class="hidden h-full w-full text-center align-middle text-sm rounded-container-token lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[3]}; line-height: 20px;" style="background: {pxxcolors[3]}; line-height: 20px;"
> >
10 10
</span> </span>
<span <span
class="hidden h-full w-full text-center align-middle text-sm rounded-container-token lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[4]}; line-height: 20px;" style="background: {pxxcolors[4]}; line-height: 20px;"
> >
6 6
</span> </span>
<span <span
class="hidden h-full w-full text-center align-middle text-sm rounded-container-token lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[5]}; line-height: 20px;" style="background: {pxxcolors[5]}; line-height: 20px;"
> >
3 3
</span> </span>
<span <span
class="hidden h-full w-full text-center align-middle text-sm rounded-container-token lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[6]}; line-height: 20px;" style="background: {pxxcolors[6]}; line-height: 20px;"
> >
1 1
</span> </span>
<!-- Small Screens: --> <!-- Small Screens: -->
<span <span class="block h-full w-full lg:hidden" style="background: {pxxcolors[3]};"></span>
class="block h-full w-full rounded-tl-lg rounded-tr-lg lg:hidden"
style="background: {pxxcolors[3]};"
></span>
<span class="block h-full w-full lg:hidden" style="background: {pxxcolors[4]};"></span> <span class="block h-full w-full lg:hidden" style="background: {pxxcolors[4]};"></span>
<span class="block h-full w-full lg:hidden" style="background: {pxxcolors[5]};"></span> <span class="block h-full w-full lg:hidden" style="background: {pxxcolors[5]};"></span>
<span <span class="block h-full w-full lg:hidden" style="background: {pxxcolors[6]};"></span>
class="block h-full w-full rounded-bl-lg rounded-br-lg lg:hidden"
style="background: {pxxcolors[6]};"
></span>
</div> </div>
</div> </div>
@ -298,7 +294,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 flex-col bg-surface-300 p-2 shadow lg:mt-2 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-sm font-bold lg:block"> <span class="hidden text-sm font-bold lg:block">
{race?.step}: {race?.name} {race?.step}: {race?.name}
@ -348,7 +344,7 @@
{@const picks = data.racepicks.filter((pick: RacePick) => pick.user === user.id)} {@const picks = data.racepicks.filter((pick: RacePick) => pick.user === user.id)}
<div <div
class="card ml-1 mt-2 w-full p-1 shadow lg:ml-2 lg:p-2 {data.user && class="card ml-1 mt-2 w-full overflow-hidden py-2 lg:ml-2 {data.user &&
data.user.username === user.username data.user.username === user.username
? 'bg-primary-500' ? 'bg-primary-500'
: ''}" : ''}"
@ -378,7 +374,7 @@
result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? dnfcolors[0] : dnfcolors[-1]} result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? dnfcolors[0] : dnfcolors[-1]}
{#if pick} {#if pick}
<div class="card mt-1 h-20 w-full bg-surface-300 p-1 lg:mt-2 lg:p-2"> <div class="mt-2 h-20 w-full border-b border-t bg-surface-300 p-1 shadow lg:p-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="p-1 text-center text-sm rounded-container-token" class="p-1 text-center text-sm rounded-container-token"
@ -395,7 +391,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="mt-1 h-20 w-full lg:mt-2"></div> <div class="mt-2 h-20 w-full"></div>
{/if} {/if}
{/each} {/each}
</div> </div>