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

Seasonpicks: Add tooltips to small images (e.g. avatars, podiums, ...)

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-18 12:40:31 +01:00
parent 8051b86d51
commit cf4d98f480
1 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,13 +68,13 @@
? data.seasonpick.teamwinners ? data.seasonpick.teamwinners
.map((id: string) => get_by_value(drivers, "id", id) as Driver) .map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.team.localeCompare(b.team)) .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
: [undefined]} : undefined}
{@const podiums = data.seasonpick {@const podiums = data.seasonpick
? data.seasonpick.podiums ? data.seasonpick.podiums
.map((id: string) => get_by_value(drivers, "id", id) as Driver) .map((id: string) => get_by_value(drivers, "id", id) as Driver)
.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))
: [undefined]} : undefined}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full"> <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
<AccordionItem> <AccordionItem>
@ -164,15 +164,18 @@
<div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40"> <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">Teamwinners:</h1> <h1 class="text-nowrap font-bold">Teamwinners:</h1>
<div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll"> <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
{#each teamwinners as winner} {#if teamwinners}
<LazyImage {#each teamwinners as winner}
src={winner?.headshot_url ?? get_driver_headshot_template(data.graphics)} <LazyImage
imgwidth={AVATAR_WIDTH} src={winner.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgheight={AVATAR_HEIGHT} imgwidth={AVATAR_WIDTH}
containerstyle="height: 35px; width: 35px;" imgheight={AVATAR_HEIGHT}
imgclass="bg-surface-400 rounded-full" containerstyle="height: 35px; width: 35px;"
/> imgclass="bg-surface-400 rounded-full"
{/each} tooltip={winner ? `${winner.firstname} ${winner.lastname}` : undefined}
/>
{/each}
{/if}
</div> </div>
</div> </div>
@ -180,15 +183,18 @@
<div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40"> <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">Podiums:</h1> <h1 class="text-nowrap font-bold">Podiums:</h1>
<div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll"> <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
{#each podiums as podium} {#if podiums}
<LazyImage {#each podiums as podium}
src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)} <LazyImage
imgwidth={AVATAR_WIDTH} src={podium.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgheight={AVATAR_HEIGHT} imgwidth={AVATAR_WIDTH}
containerstyle="height: 35px; width: 35px;" imgheight={AVATAR_HEIGHT}
imgclass="bg-surface-400 rounded-full" containerstyle="height: 35px; width: 35px;"
/> imgclass="bg-surface-400 rounded-full"
{/each} tooltip={podium ? `${podium.firstname} ${podium.lastname}` : undefined}
/>
{/each}
{/if}
</div> </div>
</div> </div>
@ -205,6 +211,7 @@
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"
tooltip={user.firstname}
/> />
{/each} {/each}
</div> </div>
@ -223,6 +230,7 @@
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"
tooltip={user.firstname}
/> />
{/each} {/each}
</div> </div>
@ -338,6 +346,7 @@
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 40px; width: 40px;" containerstyle="height: 40px; width: 40px;"
imgclass="bg-surface-400 rounded-full" imgclass="bg-surface-400 rounded-full"
tooltip={user.firstname}
/> />
<div <div
style="height: 40px; line-height: 40px;" style="height: 40px; line-height: 40px;"
@ -366,6 +375,7 @@
imgheight={DRIVER_HEADSHOT_WIDTH} imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;" containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md" imgclass="bg-surface-400 rounded-md"
tooltip={wdcwinner ? `${wdcwinner.firstname} ${wdcwinner.lastname}` : undefined}
/> />
</div> </div>
</div> </div>
@ -379,6 +389,7 @@
imgheight={TEAM_BANNER_HEIGHT} imgheight={TEAM_BANNER_HEIGHT}
containerstyle="height: 62px;" containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md" imgclass="bg-surface-400 rounded-md"
tooltip={wccwinner?.name}
/> />
</div> </div>
</div> </div>
@ -392,6 +403,9 @@
imgheight={DRIVER_HEADSHOT_WIDTH} imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;" containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md" imgclass="bg-surface-400 rounded-md"
tooltip={mostovertakes
? `${mostovertakes.firstname} ${mostovertakes.lastname}`
: undefined}
/> />
</div> </div>
</div> </div>
@ -405,6 +419,7 @@
imgheight={DRIVER_HEADSHOT_WIDTH} imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;" containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md" imgclass="bg-surface-400 rounded-md"
tooltip={mostdnfs ? `${mostdnfs.firstname} ${mostdnfs.lastname}` : undefined}
/> />
</div> </div>
</div> </div>