diff options
| author | Wolfgang Müller | 2025-02-20 19:33:55 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2025-02-20 19:54:14 +0100 |
| commit | 361f506cd3677f61d2203ff91fab70ba3a1c5851 (patch) | |
| tree | 6703aa5084c37832b263863321ff3667f03bb31a /frontend/src/lib/tabs | |
| parent | 35f8a1a24f803be917d5982cd271f4352133b62a (diff) | |
| download | hircine-361f506cd3677f61d2203ff91fab70ba3a1c5851.tar.gz | |
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.
Diffstat (limited to 'frontend/src/lib/tabs')
| -rw-r--r-- | frontend/src/lib/tabs/ArchiveDetails.svelte | 7 | ||||
| -rw-r--r-- | frontend/src/lib/tabs/ArchiveEdit.svelte | 8 |
2 files changed, 5 insertions, 10 deletions
diff --git a/frontend/src/lib/tabs/ArchiveDetails.svelte b/frontend/src/lib/tabs/ArchiveDetails.svelte index b3d570f..1243162 100644 --- a/frontend/src/lib/tabs/ArchiveDetails.svelte +++ b/frontend/src/lib/tabs/ArchiveDetails.svelte @@ -1,8 +1,7 @@ <script lang="ts"> import type { FullArchiveFragment } from '$gql/graphql'; import { formatListSize, joinText } from '$lib/Utils'; - import Card, { comicCard } from '$lib/components/Card.svelte'; - import ComicPills from '$lib/pills/ComicPills.svelte'; + import ComicCard from '$lib/components/ComicCard.svelte'; import { formatDistance, formatISO9075 } from 'date-fns'; import { filesize } from 'filesize'; import Header from './DetailsHeader.svelte'; @@ -40,9 +39,7 @@ <h2 class="text-base font-medium">Comics</h2> <div class="flex shrink-0 flex-col gap-4"> {#each archive.comics as comic} - <Card compact {...comicCard(comic)}> - <ComicPills {comic} /> - </Card> + <ComicCard compact {comic} /> {/each} </div> </div> diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte index 83a492b..2ed0523 100644 --- a/frontend/src/lib/tabs/ArchiveEdit.svelte +++ b/frontend/src/lib/tabs/ArchiveEdit.svelte @@ -3,9 +3,8 @@ import { type FullArchiveFragment } from '$gql/graphql'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; - import Card, { comicCard } from '$lib/components/Card.svelte'; + import ComicCard from '$lib/components/ComicCard.svelte'; import OrganizedButton from '$lib/components/OrganizedButton.svelte'; - import ComicPills from '$lib/pills/ComicPills.svelte'; import { getSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import { getContextClient } from '@urql/svelte'; @@ -57,12 +56,11 @@ <h2 class="text-base font-medium">Comics</h2> <div class="flex shrink-0 flex-col gap-4"> {#each archive.comics as comic} - <Card compact {...comicCard(comic)}> + <ComicCard compact {comic}> {#snippet overlay()} <AddOverlay id={comic.id} /> {/snippet} - <ComicPills {comic} /> - </Card> + </ComicCard> {/each} </div> </div> |