From 21ad710dd2a130d8c48bba828e237aa612590b56 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Thu, 4 Jan 2024 19:43:46 -0800 Subject: feat: site-wide limit height --- src/lib/Utility/html.ts | 34 +++++---- src/routes/+page.svelte | 4 +- src/routes/completed/+page.svelte | 4 +- src/routes/updates/+page.svelte | 146 ++++++++++++++++++++------------------ 4 files changed, 102 insertions(+), 86 deletions(-) (limited to 'src') diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts index 46c7101e..3be8e1f5 100644 --- a/src/lib/Utility/html.ts +++ b/src/lib/Utility/html.ts @@ -5,20 +5,28 @@ export const nbsp = (str: string) => str.replace(/ /g, ' '); export const limitListHeight = () => { if (get(settings).displayLimitListHeight) { + let tallestList: HTMLElement | undefined; + document.querySelectorAll('.list').forEach((list) => { - const listContainerBottom = - document.querySelector('#list-container')?.getBoundingClientRect().bottom || 0; - const headerBottom = - (document.querySelector('#header')?.getBoundingClientRect().bottom || 0) * 1.5; - const offset = 1.25 + 0.275; - const offsetInPixels = - offset * parseFloat(getComputedStyle(document.documentElement).fontSize); - - ( - list as HTMLElement - ).style.maxHeight = `calc(100vh - ${listContainerBottom}px + ${headerBottom}px - ${ - offsetInPixels * 2 - }px)`; + const element = list as HTMLElement; + + element.style.height = 'auto'; + + if (element.offsetHeight > (tallestList ? tallestList.offsetHeight : 0)) + tallestList = element; }); + + if (tallestList) + tallestList.style.maxHeight = `calc(${window.innerHeight}px - ${ + document.querySelector('#header')?.getBoundingClientRect().bottom || 0 + }px - 2rem)`; } }; + +export const createHeightObserver = () => { + const observer = new ResizeObserver(() => limitListHeight()); + + document.querySelectorAll('#list-container').forEach((element) => { + observer.observe(element); + }); +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ae40d6a6..0a75627a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -9,14 +9,14 @@ import ListTitle from '$lib/List/ListTitle.svelte'; import HeadTitle from '$lib/HeadTitle.svelte'; import LastActivity from '$lib/LastActivity.svelte'; - import { limitListHeight } from '$lib/Utility/html.js'; + import { createHeightObserver } from '$lib/Utility/html.js'; export let data; let currentUserIdentity = { name: '', id: -1 }; onMount(async () => { - limitListHeight(); + createHeightObserver(); if (data.user !== undefined) { if ($userIdentity === '') { diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte index 3bc6729e..6346bc06 100644 --- a/src/routes/completed/+page.svelte +++ b/src/routes/completed/+page.svelte @@ -8,14 +8,14 @@ import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte'; import HeadTitle from '$lib/HeadTitle.svelte'; import LastActivity from '$lib/LastActivity.svelte'; - import { limitListHeight } from '$lib/Utility/html.js'; + import { createHeightObserver } from '$lib/Utility/html.js'; export let data; let currentUserIdentity = { name: '', id: -1 }; onMount(async () => { - limitListHeight(); + createHeightObserver(); if (data.user !== undefined) { if ($userIdentity === '') { diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte index 2b3f6284..26ac8de0 100644 --- a/src/routes/updates/+page.svelte +++ b/src/routes/updates/+page.svelte @@ -3,6 +3,7 @@ import { browser } from '$app/environment'; import HeadTitle from '$lib/HeadTitle.svelte'; + import { createHeightObserver } from '$lib/Utility/html'; import { onMount } from 'svelte'; let feed: { items: { title: string; link: string; content: string }[] } | null | undefined = @@ -20,6 +21,8 @@ let directLink = browser ? new URLSearchParams(window.location.search).has('d') : false; onMount(async () => { + createHeightObserver(); + startTime = performance.now(); novelFeed = await (await fetch('/api/updates/all-novels')).json(); novelEndTime = performance.now() - startTime; @@ -51,81 +54,86 @@
-
-
- - Manga - {mangaEndTime ? mangaEndTime / 1000 : '...'}s - - -
    - {#if feed === null} -
  • Failed to load feed
    • - {:else if feed !== undefined} - {#each feed.items as item} -
  • - {#if directLink} - {reformatChapter(item.title)} - - {@html item.content} - {:else} - - {@html clipTitle(reformatChapter(item.title))} - - {@html chapterTitle(reformatChapter(item.title))} - {/if} -
    • - {/each} - {:else} -
  • Loading feed ... 50%
    • - {/if} -
-
-
- -
-
- - Novels - {novelEndTime ? novelEndTime / 1000 : '...'}s - - -
+ + {:else} + + {@html item.series.name} + + {@html item.postfix || `Ch. ${item.chapter}`} + {/if} + + {/each} + {:else} +
  • Loading feed ... 50%
    • + {/if} + +
    -- cgit v1.2.3