fix(anime): better alignment

2 files changed, 67 insertions, 51 deletions

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>
diff --git a/src/lib/Media/anime.ts b/src/lib/Media/anime.ts
index 380b20d6..927da31b 100644
--- a/src/lib/Media/anime.ts
+++ b/src/lib/Media/anime.ts
@@ -70,20 +70,17 @@ export const airingTime = (anime: Media, upcoming = false) => {
 		}
 
 		const opacity = Math.max(50, 100 - (untilAiring / 60 / 60 / 24 / 7) * 50);
-		const alignment = get(settings).displayCountdownRightAligned ? 'float: right;' : '';
 
 		if (upcoming)
 			return `<span title="${
 				hours ? `${hours.toFixed(3)} hours` : ''
-			}" style="opacity: ${opacity}%; ${alignment}">${
-				anime.nextAiringEpisode?.episode
-			}${totalEpisodes(anime)} in ${timeFrame} <span style="opacity: 50%">${
-				few ? `(${time})` : ''
-			}</span></span>`;
+			}" style="opacity: ${opacity}%;">${anime.nextAiringEpisode?.episode}${totalEpisodes(
+				anime
+			)} in ${timeFrame} <span style="opacity: 50%">${few ? `(${time})` : ''}</span></span>`;
 		else
 			return `<span title="${
 				hours ? `${hours.toFixed(3)} hours` : ''
-			}" style="opacity: ${opacity}%; ${alignment}">${anime.nextAiringEpisode?.episode} in ${
+			}" style="opacity: ${opacity}%;">${anime.nextAiringEpisode?.episode} in ${
 				few ? '<b>' : ''
 			}${timeFrame}${few ? '</b>' : ''} ${few ? `(${time})` : ''}</span>`;
 	}