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

Racepicks: Make margins on small screens more consistent

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-30 21:17:03 +01:00
parent 2dc170561d
commit 261b761069
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -164,7 +164,7 @@
imgwidth={AVATAR_WIDTH} imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;" containerstyle="height: 35px; width: 35px;"
imgclass="shadow bg-transparent rounded-full" imgclass="bg-surface-400 rounded-full"
/> />
{/each} {/each}
</div> </div>
@ -180,7 +180,7 @@
imgwidth={AVATAR_WIDTH} imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;" containerstyle="height: 35px; width: 35px;"
imgclass="shadow bg-transparent rounded-full" imgclass="bg-surface-400 rounded-full"
/> />
{/each} {/each}
</div> </div>
@ -202,7 +202,7 @@
{#each data.raceresults as result} {#each data.raceresults as result}
{@const race = getrace(result.race)} {@const race = getrace(result.race)}
<div class="card mt-2 flex h-20 w-7 flex-col bg-surface-300 p-2 shadow lg:w-36"> <div class="card mt-1 flex h-20 w-7 flex-col bg-surface-300 p-2 shadow lg:mt-2 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}
</span> </span>
@ -227,7 +227,7 @@
imgwidth={AVATAR_WIDTH} imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;" containerstyle="height: 35px; width: 35px;"
imgclass="shadow bg-transparent rounded-full" imgclass="bg-surface-400 rounded-full"
/> />
<div <div
style="height: 35px; line-height: 35px;" style="height: 35px; line-height: 35px;"
@ -242,14 +242,14 @@
{@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]} {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
{#if pick} {#if pick}
<div class="card mt-2 h-20 w-full bg-surface-300 p-1 lg:p-2"> <div class="card mt-1 h-20 w-full bg-surface-300 p-1 lg:mt-2 lg:p-2">
<div class="mx-auto flex h-full w-fit flex-col justify-center"> <div class="mx-auto flex h-full w-fit flex-col justify-center">
<span class="text-sm">PXX: {getdriver(pick?.pxx ?? "")?.code}</span> <span class="text-sm">PXX: {getdriver(pick?.pxx ?? "")?.code}</span>
<span class="text-sm">DNF: {getdriver(pick?.dnf ?? "")?.code}</span> <span class="text-sm">DNF: {getdriver(pick?.dnf ?? "")?.code}</span>
</div> </div>
</div> </div>
{:else} {:else}
<div class="mt-2 h-20 w-full"></div> <div class="mt-1 h-20 w-full lg:mt-2"></div>
{/if} {/if}
{/each} {/each}
</div> </div>