feat(list): pin text, transform cover

4 files changed, 115 insertions, 119 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>
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>
diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css
index 3cd89baa..e4dcd234 100644
--- a/src/lib/List/covers.css
+++ b/src/lib/List/covers.css
@@ -17,23 +17,19 @@
 }
 
 .cover-card {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	transition: transform 0.3s ease;
-	box-sizing: border-box;
 	display: inline-block;
-	padding: 0.1em;
-	margin: -0.1em;
-	box-sizing: content-box;
 }
 
-.cover-card:hover {
+.cover-card-image {
+	border-radius: 8px;
+	transition: transform 0.45s ease, box-shadow 0.45s ease;
+	margin-bottom: 0.5em;
+}
+
+.cover-card-image:hover {
 	transform: scale(1.1);
 	position: relative;
-	z-index: 2;
-	transition: transform 0.3s ease;
+	transition: transform 0.45s ease, box-shadow 0.45s ease;
 }
 
 .entry::after {
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
index 1b239366..9ec92cf9 100644
--- a/src/lib/Tooltip/LinkedTooltip.svelte
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -2,7 +2,7 @@
 	import tooltipPosition from '$stores/tooltipPosition';
 	import { fade } from 'svelte/transition';
 
-	export let id: string;
+	export let id: string | undefined = undefined;
 	export let pin: string | undefined = undefined;
 	export let content: string;
 	export let disable: boolean = false;
@@ -233,4 +233,6 @@
 		pointer-events: none;
 		white-space: nowrap;
 	}
+
+	/* fix line break slot */
 </style>