feat(list): pin text, transform cover

1 files changed, 46 insertions, 48 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 384ec706..d2fe33be 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -110,57 +110,55 @@
 			{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
 
 			{#if progress !== manga.episodes}
-				<Tooltip
-					id={`manga-${manga.id}`}
-					pin={`manga-${manga.id}`}
-					content={manga ? mediaTitle(manga) : ''}
-				>
-					<div class="cover-card">
-						<a
-							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
-							target="_blank"
-						>
-							<span class="cover-container">
-								<ParallaxImage
-									source={manga.coverImage.extraLarge}
-									alternativeText="Cover"
-									limit={12.5}
-									classes={`cover${
-										manga.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
-									}`}
-								/>
-							</span>
-						</a>
-
-						<div class="cover-title">
-							{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-								<span class="opaque">/{manga.chapters || '?'}</span>
-							{/if}
-							<button
-								class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-								style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-								on:click={() =>
-									pendingUpdate === manga.id
-										? null
-										: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+				<div class="cover-card" id={`manga-${manga.id}`}>
+					<Tooltip pin={`manga-${manga.id}`} content={manga ? mediaTitle(manga) : ''}>
+						<div class="cover-card-image">
+							<a
+								href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
+								target="_blank"
 							>
-								+
-							</button>
-							{#if due || Math.floor(manga.episodes) < manga.chapters}
-								[{manga.episodes || '?'}]
-								{#await volumeCount(manga) then volumes}
-									{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
-
-									{#if volumes !== null && (volumeProgress || 0) < volumes}
-										<span style="color: lightcoral;">
-											Vol. {volumeProgress} &#8594; {volumes}
-										</span>
-									{/if}
-								{/await}
-							{/if}
+								<span class="cover-container">
+									<ParallaxImage
+										source={manga.coverImage.extraLarge}
+										alternativeText="Cover"
+										limit={12.5}
+										classes={`cover${
+											manga.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
+										}`}
+									/>
+								</span>
+							</a>
 						</div>
+					</Tooltip>
+
+					<div class="cover-title">
+						{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+							<span class="opaque">/{manga.chapters || '?'}</span>
+						{/if}
+						<button
+							class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+							style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+							on:click={() =>
+								pendingUpdate === manga.id
+									? null
+									: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+						>
+							+
+						</button>
+						{#if due || Math.floor(manga.episodes) < manga.chapters}
+							[{manga.episodes || '?'}]
+							{#await volumeCount(manga) then volumes}
+								{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+
+								{#if volumes !== null && (volumeProgress || 0) < volumes}
+									<span style="color: lightcoral;">
+										Vol. {volumeProgress} &#8594; {volumes}
+									</span>
+								{/if}
+							{/await}
+						{/if}
 					</div>
-				</Tooltip>
+				</div>
 			{/if}
 		{/each}
 	</div>