From 5bbb50ec2db0329f0277e7a4f237027497991449 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 8 Jul 2024 14:45:03 -0700
Subject: feat(SequelCatcher): formatting

---
 src/lib/Tools/SequelCatcher.svelte | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

(limited to 'src/lib/Tools/SequelCatcher.svelte')

diff --git a/src/lib/Tools/SequelCatcher.svelte b/src/lib/Tools/SequelCatcher.svelte
index 4f783fab..5d7cf81a 100644
--- a/src/lib/Tools/SequelCatcher.svelte
+++ b/src/lib/Tools/SequelCatcher.svelte
@@ -12,6 +12,7 @@
 	import settings from '$stores/settings';
 	import Message from '$lib/Loading/Message.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import Username from '$lib/Layout/Username.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -58,7 +59,7 @@
 					(media) => media.mediaListEntry?.status === 'COMPLETED'
 				)}
 
-				<ul>
+				<ol class="media-list">
 					{#each filterRelations(mediaList) as { media, unwatchedRelations }}
 						<a
 							href={outboundLink(media, 'anime', $settings.displayOutboundLinksTo)}
@@ -66,8 +67,11 @@
 						>
 							<MediaTitleDisplay title={media.title} />
 						</a>
+						<span class="opaque">
+							({media.startDate.year})
+						</span>
 
-						<ul>
+						<ol class="unwatched-relations-list">
 							{#each unwatchedRelations as relation}
 								<li>
 									<a
@@ -76,11 +80,14 @@
 									>
 										<MediaTitleDisplay title={relation.node.title} />
 									</a>
+									<span class="opaque">
+										({relation.node.startDate.year})
+									</span>
 								</li>
 							{/each}
-						</ul>
+						</ol>
 					{/each}
-				</ul>
+				</ol>
 			{:else}
 				<Message message="Cross-checking media ..." />
 
@@ -101,8 +108,17 @@
 		<p />
 
 		<blockquote style="margin: 0 0 0 1.5rem;">
-			Thanks to <a href="https://anilist.co/user/sevengirl/">@sevengirl</a> and
-			<a href="https://anilist.co/user/esthereae/">@esthereae</a> for the idea!
+			Thanks to <Username username="sevengirl" /> and <Username username="esthereae" /> for the idea!
 		</blockquote>
 	</div>
 {/if}
+
+<style>
+	.media-list li {
+		margin-bottom: 1rem;
+	}
+
+	.unwatched-relations-list li:not(:last-child) {
+		margin-bottom: 0 !important;
+	}
+</style>
-- 
cgit v1.2.3