feat(settings): limit list height

1 files changed, 34 insertions, 53 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>