From 361f506cd3677f61d2203ff91fab70ba3a1c5851 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 20 Feb 2025 19:33:55 +0100
Subject: frontend: Introduce ComicCard and ArchiveCard

Instead of repeatedly supplying Card content in all the places it is
required, it makes more sense to create dedicated ComicCard and
ArchiveCard components. These wrap around Card itself and can be used in
a more straightforward and consistent fashion.

Whilst we are here, simplify and streamline the display of Comic and
Archive metadata by introducing a Card footer. The footer is used for
information on page count, release date, and archive size.
---
 frontend/src/routes/comics/+page.svelte | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

(limited to 'frontend/src/routes/comics/+page.svelte')

diff --git a/frontend/src/routes/comics/+page.svelte b/frontend/src/routes/comics/+page.svelte
index 03123be..11289e7 100644
--- a/frontend/src/routes/comics/+page.svelte
+++ b/frontend/src/routes/comics/+page.svelte
@@ -4,7 +4,7 @@
 	import { type ComicFragment } from '$gql/graphql';
 	import { ComicSortLabel } from '$lib/Enums';
 	import { ComicFilterContext } from '$lib/Filter.svelte';
-	import Card, { comicCard } from '$lib/components/Card.svelte';
+	import ComicCard from '$lib/components/ComicCard.svelte';
 	import Empty from '$lib/components/Empty.svelte';
 	import Guard from '$lib/components/Guard.svelte';
 	import Head from '$lib/components/Head.svelte';
@@ -13,7 +13,6 @@
 	import UpdateComicsDialog from '$lib/dialogs/UpdateComics.svelte';
 	import ComicFilterForm from '$lib/filter/ComicFilterForm.svelte';
 	import Pagination from '$lib/pagination/Pagination.svelte';
-	import ComicPills from '$lib/pills/ComicPills.svelte';
 	import Selectable from '$lib/selection/Selectable.svelte';
 	import { initSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
@@ -96,12 +95,11 @@
 				{#each comics.edges as comic, index (comic.id)}
 					<Selectable {index} id={comic.id}>
 						{#snippet children({ onclick, selected })}
-							<Card {...comicCard(comic)} {onclick}>
+							<ComicCard {comic} {onclick}>
 								{#snippet overlay()}
 									<SelectionOverlay position="left" {selected} />
 								{/snippet}
-								<ComicPills {comic} />
-							</Card>
+							</ComicCard>
 						{/snippet}
 					</Selectable>
 				{:else}
-- 
cgit v1.2.3-2-gb3c3