diff options
| author | Fuwn <[email protected]> | 2023-12-22 00:55:15 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-12-22 00:55:15 -0800 |
| commit | 896393575143a29170c76d1f755d2a773d1ce854 (patch) | |
| tree | 6881e3e26a9e9e3e8db46ccfcfe3c8f9cb70bec2 /src/lib/Tools/Wrapped.svelte | |
| parent | feat(tools): enter key hints (diff) | |
| download | due.moe-896393575143a29170c76d1f755d2a773d1ce854.tar.xz due.moe-896393575143a29170c76d1f755d2a773d1ce854.zip | |
fix(wrapped): absolute best updateWidth()
Diffstat (limited to 'src/lib/Tools/Wrapped.svelte')
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 39 |
1 files changed, 21 insertions, 18 deletions
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index 2af993f2..dbd7cc1e 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -97,26 +97,29 @@ wrappedContainer.style.width = `1920px`; const reset = () => { - let widths: number[] = []; + let topWidths = 0; + let middleWidths = 0; wrappedContainer.querySelectorAll('.category').forEach((item) => { const category = item as HTMLElement; const style = window.getComputedStyle(category); - - widths.push( + const width = category.offsetWidth + - parseFloat(style.marginLeft) + - parseFloat(style.marginRight) + - parseFloat(style.paddingLeft) + - parseFloat(style.paddingRight) + - parseFloat(style.borderLeftWidth) + - parseFloat(style.borderRightWidth) - ); + parseFloat(style.marginLeft) + + parseFloat(style.marginRight) + + parseFloat(style.paddingLeft) + + parseFloat(style.paddingRight) + + parseFloat(style.borderLeftWidth) + + parseFloat(style.borderRightWidth); + + if (category.classList.contains('top-category')) { + topWidths += width; + } else if (category.classList.contains('middle-category')) { + middleWidths += width; + } }); - widths.sort((a, b) => b - a); - - const requiredWidth = widths[0] + (widths[1] || 0); + const requiredWidth = topWidths > middleWidths ? topWidths : middleWidths; wrappedContainer.style.width = `${requiredWidth}px`; width = requiredWidth; @@ -342,7 +345,7 @@ class:transparent={transparency} > <div class="categories-grid" style="padding-bottom: 0;"> - <div class="grid-item image-grid avatar-grid category"> + <div class="grid-item image-grid avatar-grid category top-category"> <a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank"> <img src={proxy(wrapped.avatar.large)} alt="User Avatar" on:load={updateWidth} /> </a> @@ -373,7 +376,7 @@ </div> </div> </div> - <div class="category-grid pure-category category"> + <div class="category-grid pure-category category top-category"> <div class="grid-item"> <b>Anime</b> </div> @@ -385,7 +388,7 @@ </div> <div class="grid-item">Episodes: {episodes}</div> </div> - <div class="category-grid pure-category category"> + <div class="category-grid pure-category category top-category"> <div class="grid-item"> <b>Manga</b> </div> @@ -401,7 +404,7 @@ </div> </div> <div class="categories-grid"> - <div class="category-grid pure-category category"> + <div class="category-grid pure-category category middle-category"> <div class="grid-item image-grid"> {#if animeList !== undefined} <a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank"> @@ -429,7 +432,7 @@ {/if} </div> </div> - <div class="category-grid pure-category category"> + <div class="category-grid pure-category category middle-category"> <div class="grid-item image-grid"> {#if mangaList !== undefined} <a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank"> |