feat(list): pin text, transform cover

1 files changed, 58 insertions, 58 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 58b8236f..da0a26c9 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -91,66 +91,66 @@
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
 			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-				<Tooltip
-					id={`anime-${anime.id}`}
-					pin={`anime-${anime.id}`}
-					content={anime ? mediaTitle(anime) : ''}
-				>
-					<div class="cover-card">
-						<a
-							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
-							target="_blank"
-						>
-							<span class="cover-container">
-								<ParallaxImage
-									source={anime.coverImage.extraLarge}
-									alternativeText="Cover"
-									limit={12.5}
-									classes={`cover${
-										anime.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
-									}`}
-								/>
-							</span>
-						</a>
-
-						<div class="cover-title">
-							{#if !upcoming && !notYetReleased}
-								{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-								<button
-									class={`button-square button-action ${
-										pendingUpdate === anime.id ? 'opaque' : ''
-									}`}
-									style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-									on:click={() => {
-										if (pendingUpdate !== anime.id) {
-											lastUpdatedMedia = anime.id;
-											pendingUpdate = anime.id;
-
-											incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
-												const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
-
-												if (mediaListEntry) mediaListEntry.progress = progress + 1;
-
-												previousAnimeList = media;
-												animeLists = cleanCache(user, $identity);
-												pendingUpdate = null;
-											});
-										}
-									}}>+</button
-								>
-								{#if !completed}
-									[{anime.nextAiringEpisode?.episode === -1
-										? '?'
-										: (anime.nextAiringEpisode?.episode || 1) - 1}]
-									<br />
-									<AiringTime originalAnime={anime} {subsPlease} />
-								{/if}
-							{:else}
-								<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
-							{/if}
+				<div class="cover-card" id={`anime-${anime.id}`}>
+					<Tooltip
+						id={`anime-${anime.id}`}
+						pin={`anime-${anime.id}`}
+						content={anime ? mediaTitle(anime) : ''}
+					>
+						<div class="cover-card-image">
+							<a
+								href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
+								target="_blank"
+							>
+								<span class="cover-container">
+									<ParallaxImage
+										source={anime.coverImage.extraLarge}
+										alternativeText="Cover"
+										limit={12.5}
+										classes={`cover${
+											anime.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
+										}`}
+									/>
+								</span>
+							</a>
 						</div>
+					</Tooltip>
+
+					<div class="cover-title">
+						{#if !upcoming && !notYetReleased}
+							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+							<button
+								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+								on:click={() => {
+									if (pendingUpdate !== anime.id) {
+										lastUpdatedMedia = anime.id;
+										pendingUpdate = anime.id;
+
+										incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
+											const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+
+											if (mediaListEntry) mediaListEntry.progress = progress + 1;
+
+											previousAnimeList = media;
+											animeLists = cleanCache(user, $identity);
+											pendingUpdate = null;
+										});
+									}
+								}}>+</button
+							>
+							{#if !completed}
+								[{anime.nextAiringEpisode?.episode === -1
+									? '?'
+									: (anime.nextAiringEpisode?.episode || 1) - 1}]
+								<br />
+								<AiringTime originalAnime={anime} {subsPlease} />
+							{/if}
+						{:else}
+							<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
+						{/if}
 					</div>
-				</Tooltip>
+				</div>
 			{/if}
 		{/each}
 	</div>