feat(schedule): use grid

2 files changed, 20 insertions, 52 deletions

diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte
index 3b0b1f41..e4c76de8 100644
--- a/src/lib/Schedule/CoverBypass.svelte
+++ b/src/lib/Schedule/CoverBypass.svelte
@@ -11,6 +11,7 @@
 	export let media: Media | null;
 	export let entry: SubsPleaseEpisode;
 	export let cover = true;
+	export let showTooltip = true;
 
 	const abbreviateTo = 40;
 
@@ -38,9 +39,11 @@
 			title={media.title}
 			abbreviate
 			{abbreviateTo}
-			tooltip={media.title.english?.length > abbreviateTo ||
-				media.title.romaji?.length > abbreviateTo ||
-				media.title.native?.length > abbreviateTo}
+			tooltip={showTooltip
+				? media.title.english?.length > abbreviateTo ||
+				  media.title.romaji?.length > abbreviateTo ||
+				  media.title.native?.length > abbreviateTo
+				: ''}
 		/>
 	{:else}
 		<span title={entry.title} use:tooltip>
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index 29b3a6b1..de749d8c 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -7,6 +7,8 @@
 	import { parseOrDefault } from '$lib/Utility/parameters';
 	import settings from '$stores/settings';
 	import CoverBypass from './CoverBypass.svelte';
+	import '$lib/List/covers.css';
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 
 	export let subsPlease: SubsPlease;
 	export let scheduledMedia: Partial<Media[]>;
@@ -76,7 +78,7 @@
 		<summary>{day}</summary>
 
 		{#if !$settings.displayScheduleListMode && !forceListMode}
-			<div class="covers" style={`grid-template-columns: repeat(auto-fill, minmax(11.5%, 1fr))`}>
+			<div class="covers">
 				{#each Object.values(scheduleEntry) as entry}
 					{@const media = associateMedia(scheduledMedia, entry.title)}
 
@@ -91,17 +93,19 @@
 							)}
 							target="_blank"
 						>
-							<img
-								class="cover"
-								src={media
-									? media.coverImage.extraLarge
-									: `https://subsplease.org${entry.image_url}`}
-								alt="Cover"
-							/>
+							<div class="cover-card-image">
+								<ParallaxImage
+									source={media
+										? media.coverImage.extraLarge
+										: `https://subsplease.org${entry.image_url}`}
+									limit={12.5}
+									alternativeText="Cover"
+								/>
+							</div>
 						</a>
 
 						<div class="cover-title">
-							<CoverBypass {media} {entry} cover={false} />
+							<CoverBypass {media} {entry} cover={false} showTooltip={false} />
 							<span class:countdown={$settings.displayCountdownRightAligned}>
 								{#if media && media.nextAiringEpisode}
 									<span class="opaque">
@@ -137,50 +141,11 @@
 			</ol>
 		{/if}
 	</details>
-
-	<p />
 {/each}
 
 <style>
 	.covers {
-		display: grid;
-		justify-content: center;
-		gap: 1em 0.5em;
-		margin-top: 0.5rem;
-	}
-
-	.cover {
-		background-size: cover;
-		background-position: center;
-		border-radius: 8px;
-		width: 7.5rem;
-	}
-
-	.cover-card {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		transition: transform 0.3s ease;
-		box-sizing: border-box;
-	}
-
-	.cover-card:hover {
-		transform: scale(1.1);
-		position: relative;
-		z-index: 2;
-		transition: transform 0.3s ease;
-	}
-
-	.cover-title {
-		text-align: center;
-		margin: 0.5em 0.25em;
-	}
-
-	.entry::after {
-		content: '';
-		display: table;
-		clear: both;
+		grid-template-columns: repeat(auto-fill, minmax(11.5%, 1fr));
 	}
 
 	.countdown {