diff options
| author | Fuwn <[email protected]> | 2024-01-02 03:25:12 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-02 03:25:12 -0800 |
| commit | 61881ce2f2c7d2f0da9df970eef18d85e57e0032 (patch) | |
| tree | 4d1409145fe60d6ec428d5ccaf01aa263a9d35ee | |
| parent | refactor(lastactivity): move info to component (diff) | |
| download | due.moe-61881ce2f2c7d2f0da9df970eef18d85e57e0032.tar.xz due.moe-61881ce2f2c7d2f0da9df970eef18d85e57e0032.zip | |
fix(html): better limit list height
| -rw-r--r-- | src/lib/Utility/html.ts | 22 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 11 | ||||
| -rw-r--r-- | src/routes/completed/+page.svelte | 9 |
3 files changed, 28 insertions, 14 deletions
diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts index 6d2136aa..01041b0e 100644 --- a/src/lib/Utility/html.ts +++ b/src/lib/Utility/html.ts @@ -1 +1,23 @@ +import settings from '$stores/settings'; +import { get } from 'svelte/store'; + export const nbsp = (str: string) => str.replace(/ /g, ' '); + +export const limitListHeight = () => { + if (get(settings).displayLimitListHeight) { + document.querySelectorAll('.list').forEach((list) => { + const listContainerBottom = + document.querySelector('#list-container')?.getBoundingClientRect().bottom || 0; + const headerBottom = document.querySelector('#header')?.getBoundingClientRect().bottom || 0; + const offset = 1.25; + const offsetInPixels = + offset * parseFloat(getComputedStyle(document.documentElement).fontSize); + + ( + list as HTMLElement + ).style.maxHeight = `calc(100vh - ${listContainerBottom}px + ${headerBottom}px - ${ + offsetInPixels * 2 + }px)`; + }); + } +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2809a649..13af2e3b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -9,19 +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'; export let data; let currentUserIdentity = { name: '', id: -1 }; onMount(async () => { - if ($settings.displayLimitListHeight) { - document.querySelectorAll('.list').forEach((list) => { - (list as HTMLElement).style.maxHeight = `calc(100vh - ${ - document.querySelector('#list-container')?.getBoundingClientRect().bottom - }px + 1.1rem)`; - }); - } + limitListHeight(); if (data.user !== undefined) { if ($userIdentity === '') { @@ -111,5 +106,7 @@ .list { overflow-y: auto; break-inside: avoid-column; + /* max-height: 80vh; */ + overflow-y: auto; } </style> diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte index 0ef8f10d..3e324b6d 100644 --- a/src/routes/completed/+page.svelte +++ b/src/routes/completed/+page.svelte @@ -8,19 +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'; export let data; let currentUserIdentity = { name: '', id: -1 }; onMount(async () => { - if ($settings.displayLimitListHeight) { - document.querySelectorAll('.list').forEach((list) => { - (list as HTMLElement).style.maxHeight = `calc(100vh - ${ - document.querySelector('#list-container')?.getBoundingClientRect().bottom - }px + 1.1rem)`; - }); - } + limitListHeight(); if (data.user !== undefined) { if ($userIdentity === '') { |