aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/Utility/html.ts34
-rw-r--r--src/routes/+page.svelte4
-rw-r--r--src/routes/completed/+page.svelte4
-rw-r--r--src/routes/updates/+page.svelte146
4 files changed, 102 insertions, 86 deletions
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 @@
<HeadTitle route="Updates" path="/updates" />
<div id="list-container">
- <div>
- <details open>
- <summary>
- Manga
- <small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
- </summary>
-
- <ul>
- {#if feed === null}
- <li>Failed to load feed</li>
- {:else if feed !== undefined}
- {#each feed.items as item}
- <li>
- {#if directLink}
- <i>{reformatChapter(item.title)}</i>
-
- {@html item.content}
- {:else}
- <a
- href={`https://anilist.co/search/manga?search=${clipTitle(
- reformatChapter(item.title)
- )}&sort=SEARCH_MATCH`}
- >
- <i>{@html clipTitle(reformatChapter(item.title))}</i>
- </a>
- {@html chapterTitle(reformatChapter(item.title))}
- {/if}
- </li>
- {/each}
- {:else}
- <li>Loading feed ... 50%</li>
- {/if}
- </ul>
- </details>
- </div>
-
- <div>
- <details open>
- <summary>
- Novels
- <small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
- </summary>
-
- <ul>
- {#if novelFeed === null}
- <li>Failed to load feed</li>
- {:else if novelFeed !== undefined}
- {#each novelFeed.data.items as item}
- <li>
- {#if directLink}
- <a href={item.srcurl}>
- <i>{@html item.series.name}</i>
- {@html item.postfix || `Ch. ${item.chapter}`}
- </a>
- {:else}
- <a
- href={`https://anilist.co/search/manga?search=${item.series.name}&sort=SEARCH_MATCH`}
- >
- <i>{@html item.series.name}</i>
- </a>
+ <details open class="list">
+ <summary>
+ Manga
+ <small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
+ </summary>
+
+ <ul>
+ {#if feed === null}
+ <li>Failed to load feed</li>
+ {:else if feed !== undefined}
+ {#each feed.items as item}
+ <li>
+ {#if directLink}
+ <i>{reformatChapter(item.title)}</i>
+
+ {@html item.content}
+ {:else}
+ <a
+ href={`https://anilist.co/search/manga?search=${clipTitle(
+ reformatChapter(item.title)
+ )}&sort=SEARCH_MATCH`}
+ >
+ <i>{@html clipTitle(reformatChapter(item.title))}</i>
+ </a>
+ {@html chapterTitle(reformatChapter(item.title))}
+ {/if}
+ </li>
+ {/each}
+ {:else}
+ <li>Loading feed ... 50%</li>
+ {/if}
+ </ul>
+ </details>
+
+ <details open class="list">
+ <summary>
+ Novels
+ <small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
+ </summary>
+
+ <ul>
+ {#if novelFeed === null}
+ <li>Failed to load feed</li>
+ {:else if novelFeed !== undefined}
+ {#each novelFeed.data.items as item}
+ <li>
+ {#if directLink}
+ <a href={item.srcurl}>
+ <i>{@html item.series.name}</i>
{@html item.postfix || `Ch. ${item.chapter}`}
- {/if}
- </li>
- {/each}
- {:else}
- <li>Loading feed ... 50%</li>
- {/if}
- </ul>
- </details>
- </div>
+ </a>
+ {:else}
+ <a
+ href={`https://anilist.co/search/manga?search=${item.series.name}&sort=SEARCH_MATCH`}
+ >
+ <i>{@html item.series.name}</i>
+ </a>
+ {@html item.postfix || `Ch. ${item.chapter}`}
+ {/if}
+ </li>
+ {/each}
+ {:else}
+ <li>Loading feed ... 50%</li>
+ {/if}
+ </ul>
+ </details>
</div>
<style>
#list-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+ align-items: start;
+ gap: 1em;
+ flex-wrap: wrap;
+ }
+
+ .list {
+ overflow-y: auto;
+ min-width: 300px;
+ flex: 1 1 300px;
}
</style>
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-20 06:17:23 +0000