From aed022d05c120cc97a4c8fbc1d9074ab4a964688 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 16 Dec 2023 01:07:53 -0800
Subject: fix(anime): better alignment

---
 src/lib/List/Anime/CleanAnimeList.svelte | 107 ++++++++++++++++++-------------
 1 file changed, 63 insertions(+), 44 deletions(-)

(limited to 'src/lib/List/Anime')

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 2c7c7e26..0b130d15 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -56,55 +56,74 @@
 		{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
 		{#if title.includes('Upcoming Episodes') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-			<li>
-				<a href={outboundLink(anime, 'anime', $settings.outboundLinksTo)} target="_blank">
-					<span
-						style={lastUpdatedMedia === anime.id && anime.episodes !== progress
-							? 'color: lightcoral'
-							: ''}
-					>
-						<MediaTitle title={anime.title} />
-					</span>
-				</a>
-				{#if $settings.displaySocialButton}
-					[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
-				{/if}
-				{#if !$settings.displayCountdownRightAligned || title !== 'Upcoming Episodes'}
-					<span style="opacity: 50%;">|</span>
-				{/if}
-				{#if title !== 'Upcoming Episodes'}
-					<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-					{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-					<a
-						href={'#'}
-						style={pendingUpdate === anime.id ? 'pointer-events: none; opacity: 50%;' : ''}
-						on:click={() => {
-							if (pendingUpdate !== anime.id) {
-								lastUpdatedMedia = anime.id;
-								pendingUpdate = anime.id;
+			<li class="entry">
+				<span class="content">
+					<a href={outboundLink(anime, 'anime', $settings.outboundLinksTo)} target="_blank">
+						<span
+							style={lastUpdatedMedia === anime.id && anime.episodes !== progress
+								? 'color: lightcoral'
+								: ''}
+						>
+							<MediaTitle title={anime.title} />
+						</span>
+					</a>
+					{#if $settings.displaySocialButton}
+						[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
+					{/if}
+					{#if title !== 'Upcoming Episodes' || !$settings.displayCountdownRightAligned}
+						<span style="opacity: 50%;">|</span>
+					{/if}
+					{#if title !== 'Upcoming Episodes'}
+						<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+						{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+						<a
+							href={'#'}
+							style={pendingUpdate === anime.id ? 'pointer-events: none; opacity: 50%;' : ''}
+							on:click={() => {
+								if (pendingUpdate !== anime.id) {
+									lastUpdatedMedia = anime.id;
+									pendingUpdate = anime.id;
 
-								updateMedia(anime.id, anime.mediaListEntry?.progress, () => {
-									const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+									updateMedia(anime.id, anime.mediaListEntry?.progress, () => {
+										const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
 
-									if (mediaListEntry) mediaListEntry.progress = progress + 1;
+										if (mediaListEntry) mediaListEntry.progress = progress + 1;
 
-									previousAnimeList = media;
-									animeLists = cleanCache(user, identity);
-									pendingUpdate = null;
-								});
-							}
-						}}>+</a
-					>
-					{#if !completed}
-						[{anime.nextAiringEpisode?.episode === -1
-							? '?'
-							: (anime.nextAiringEpisode?.episode || 1) - 1}]
-						{@html airingTime(anime)}
+										previousAnimeList = media;
+										animeLists = cleanCache(user, identity);
+										pendingUpdate = null;
+									});
+								}
+							}}>+</a
+						>
+						{#if !completed}
+							[{anime.nextAiringEpisode?.episode === -1
+								? '?'
+								: (anime.nextAiringEpisode?.episode || 1) - 1}]
+							<span class:countdown={$settings.displayCountdownRightAligned}>
+								{@html airingTime(anime)}
+							</span>
+						{/if}
+					{:else}
+						<span class:countdown={$settings.displayCountdownRightAligned}>
+							{@html airingTime(anime, true)}
+						</span>
 					{/if}
-				{:else}
-					{@html airingTime(anime, true)}
-				{/if}
+				</span>
 			</li>
 		{/if}
 	{/each}
 </ul>
+
+<style>
+	.entry::after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+
+	.countdown {
+		white-space: nowrap;
+		float: right;
+	}
+</style>
-- 
cgit v1.2.3