christoph/svelte-formula12
1
Fork 0
Code Actions Packages Releases Activity

Lib: Remove previous lazy loading approach and replace with static aspect ratios

Browse Source 
The element size must be valid before it is loaded, this is a problem
for cards, as they adapt to their content's size.
Previously I tried to load the first card non-lazily and measure its
dimensions for the next cards, but that was not stable on viewport
changes (could have measured the aspect ratio instead...).
Now, all the aspect ratios are just measured and defined manually,
stupid but simple.
This commit is contained in:
Christoph Urlacher
2024-12-16 20:06:56 +01:00
parent d398ab67e0
commit f0c568b982
6 changed files with 83 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/config.ts
View File

@ -1,3 +1,10 @@
// Many aspect ratios are predefined here.
// This is terrible, since they need to be updated if the HTML changes.
// I tried to determine these dynamically by loading a "sample" element
// and measuring its width/height, but this was not reliable:
// When changing the viewport size, measured heights were no longer accurate.
// Image aspect ratios
export const AVATAR_WIDTH: number = 256;
export const AVATAR_HEIGHT: number = 256;
@ -9,3 +16,16 @@ export const DRIVER_HEADSHOT_HEIGHT: number = 512;
export const RACE_PICTOGRAM_WIDTH: number = 512;
export const RACE_PICTOGRAM_HEIGHT: number = 384;
// Card aspect ratios
export const TEAM_CARD_ASPECT_WIDTH: number = 413;
export const TEAM_CARD_ASPECT_HEIGHT: number = 438;
export const DRIVER_CARD_ASPECT_WIDTH: number = 411;
export const DRIVER_CARD_ASPECT_HEIGHT: number = 769;
export const RACE_CARD_ASPECT_WIDTH: number = 497;
export const RACE_CARD_ASPECT_HEIGHT: number = 879;
export const SUBSTITUTION_CARD_ASPECT_WIDTH: number = 413;
export const SUBSTITUTION_CARD_ASPECT_HEIGHT: number = 625;