feat(settings): limit list height

4 files changed, 96 insertions, 57 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7a4b517a..ce1b7a68 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,14 +2,12 @@
 	import { env } from '$env/dynamic/public';
 	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
-	import { lastActivityDate } from '$lib/AniList/activity';
 	import userIdentity from '../stores/userIdentity';
 	import settings from '../stores/settings';
 
 	export let data;
 
 	let currentUserIdentity = { name: '...', id: -1 };
-	let lastActivityWasToday = true;
 
 	onMount(async () => {
 		settings.subscribe((value) => {
@@ -27,67 +25,40 @@
 
 			currentUserIdentity = JSON.parse($userIdentity);
 			currentUserIdentity.name = currentUserIdentity.name;
-			lastActivityWasToday =
-				(await lastActivityDate(currentUserIdentity)).toDateString() >= new Date().toDateString();
-		}
-	});
-
-	const timeLeftToday = () => {
-		const now = new Date();
-		const currentHour = now.getHours();
-		const currentMinute = now.getMinutes();
-		const hoursLeft = 24 - currentHour;
-		let minutesLeft = 0;
-		let timeLeft = '';
-
-		if (hoursLeft > 0) {
-			minutesLeft = hoursLeft * 60 - currentMinute;
-		} else {
-			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
-		}
 
-		if (minutesLeft > 60) {
-			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
-		} else {
-			timeLeft = `${minutesLeft} minutes`;
+			// document.getElementsByTagName('html')[0].classList.add('limit-height');
+			// document.getElementsByTagName('body')[0].classList.add('limit-height');
 		}
-
-		return timeLeft;
-	};
+	});
 </script>
 
-<p />
+<div id="container">
+	<div id="header">
+		<p />
 
-<h1><a href="/">期限</a></h1>
+		<h1><a href="/">期限</a></h1>
 
-{#if data.user === undefined}
-	<a
-		href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
-		>Log in with AniList</a
-	>
-{:else}
-	<a href="/api/authentication-log-out">Log out from AniList ({currentUserIdentity.name})</a>
-{/if}
+		{#if data.user === undefined}
+			<a
+				href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
+				>Log in with AniList</a
+			>
+		{:else}
+			<a href="/api/authentication-log-out">Log out from AniList ({currentUserIdentity.name})</a>
+		{/if}
 
-{#if !lastActivityWasToday}
-	<p />
+		<p />
 
-	<p>
-		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
-		to keep your streak!
-	</p>
-{/if}
+		<p>
+			「 <a href="/">Home</a> • <a href="/updates">Manga & LN Updates</a> •
+			<a href="/settings">Settings</a> 」
+		</p>
 
-<p />
+		<hr />
+	</div>
 
-<p>
-	「 <a href="/">Home</a> • <a href="/updates">Manga & LN Updates</a> •
-	<a href="/settings">Settings</a> 」
-</p>
-
-<hr />
-
-<slot />
+	<slot />
+</div>
 
 <style>
 	:global(html.light-theme) {
@@ -97,4 +68,14 @@
 	:global(html.light-theme img) {
 		filter: invert(0);
 	}
+
+	:global(.limit-height) {
+		height: 100%;
+	}
+
+	#container {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c784cb6c..c5109c4a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,12 +7,22 @@
 	import userIdentity from '../stores/userIdentity';
 	import settings from '../stores/settings';
 	import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte';
+	import { lastActivityDate } from '$lib/AniList/activity';
 
 	export let data;
 
 	let currentUserIdentity = { name: '', id: -1 };
+	let lastActivityWasToday = true;
 
 	onMount(async () => {
+		if ($settings.limitListHeight) {
+			document.querySelectorAll('.list').forEach((list) => {
+				list.style.maxHeight = `calc(100vh - ${
+					document.querySelector('#list-container')?.getBoundingClientRect().bottom
+				}px)`;
+			});
+		}
+
 		if (data.user !== undefined) {
 			if ($userIdentity === '') {
 				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
@@ -20,10 +30,44 @@
 
 			currentUserIdentity = JSON.parse($userIdentity);
 			currentUserIdentity.name = currentUserIdentity.name;
+			lastActivityWasToday =
+				(await lastActivityDate(currentUserIdentity)).toDateString() >= new Date().toDateString();
 		}
 	});
+
+	const timeLeftToday = () => {
+		const now = new Date();
+		const currentHour = now.getHours();
+		const currentMinute = now.getMinutes();
+		const hoursLeft = 24 - currentHour;
+		let minutesLeft = 0;
+		let timeLeft = '';
+
+		if (hoursLeft > 0) {
+			minutesLeft = hoursLeft * 60 - currentMinute;
+		} else {
+			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
+		}
+
+		if (minutesLeft > 60) {
+			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
+		} else {
+			timeLeft = `${minutesLeft} minutes`;
+		}
+
+		return timeLeft;
+	};
 </script>
 
+{#if !lastActivityWasToday}
+	<div id="activity-warning">
+		<p>
+			You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
+			to keep your streak!
+		</p>
+	</div>
+{/if}
+
 <div id="list-container">
 	{#if data.user === undefined}
 		Please log in to view due media.
@@ -82,7 +126,13 @@
 
 <style>
 	#list-container {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.list {
+		overflow-y: auto;
+		min-width: 300px;
+		flex: 1 1 300px;
 	}
 </style>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 8ec56788..9707ec33 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -58,9 +58,15 @@
 			on={'Link anime to LiveChart.me'}
 			off={'Link anime to AniList'}
 		/>
-		<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'} sectionBreak>
+		<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'}>
 			paused media
 		</SettingToggle>
+		<SettingToggle
+			setting={'limitListHeight'}
+			on={'Display full list area'}
+			off={'Limit list area to screen'}
+			sectionBreak
+		/>
 
 		<p />
 
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index d0e83514..aa26d662 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -14,6 +14,7 @@ export interface Settings {
 	linkToAniList: boolean;
 	showCompletedAnime: boolean;
 	displayPausedMedia: boolean;
+	limitListHeight: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -28,7 +29,8 @@ const defaultSettings: Settings = {
 	forceLightTheme: false,
 	linkToAniList: true,
 	showCompletedAnime: true,
-	displayPausedMedia: true
+	displayPausedMedia: true,
+	limitListHeight: false
 };
 
 const createStore = () => {