diff options
Diffstat (limited to 'frontend/src/routes')
| -rw-r--r-- | frontend/src/routes/+page.svelte | 8 | ||||
| -rw-r--r-- | frontend/src/routes/archives/+page.svelte | 24 | ||||
| -rw-r--r-- | frontend/src/routes/comics/+page.svelte | 8 |
3 files changed, 12 insertions, 28 deletions
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index d2a59c8..237b573 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -6,7 +6,7 @@ import { href } from '$lib/Navigation'; import { fadeDefault } from '$lib/Transitions'; import logo from '$lib/assets/logo.webp'; - import Card, { comicCard } from '$lib/components/Card.svelte'; + import ComicCard from '$lib/components/ComicCard.svelte'; import Guard from '$lib/components/Guard.svelte'; import Head from '$lib/components/Head.svelte'; import Carousel from '$lib/containers/Carousel.svelte'; @@ -52,21 +52,21 @@ {#if recent && recent.count > 0} <Carousel title="Recently added" href={recentLink}> {#each recent.edges as comic} - <Card coverOnly {...comicCard(comic)} /> + <ComicCard coverOnly {comic} /> {/each} </Carousel> {/if} {#if favourites && favourites.count > 0} <Carousel title="Favourites" href={favouriteLink}> {#each favourites.edges as comic} - <Card coverOnly {...comicCard(comic)} /> + <ComicCard coverOnly {comic} /> {/each} </Carousel> {/if} {#if bookmarked && bookmarked.count > 0} <Carousel title="Bookmarks" href={bookmarkLink}> {#each bookmarked.edges as comic} - <Card coverOnly {...comicCard(comic)} /> + <ComicCard coverOnly {comic} /> {/each} </Carousel> {/if} diff --git a/frontend/src/routes/archives/+page.svelte b/frontend/src/routes/archives/+page.svelte index b75c140..2bc6703 100644 --- a/frontend/src/routes/archives/+page.svelte +++ b/frontend/src/routes/archives/+page.svelte @@ -4,7 +4,7 @@ import type { ArchiveFragment } from '$gql/graphql'; import { ArchiveSortLabel } from '$lib/Enums'; import { ArchiveFilterContext } from '$lib/Filter.svelte'; - import Card from '$lib/components/Card.svelte'; + import ArchiveCard from '$lib/components/ArchiveCard.svelte'; import Empty from '$lib/components/Empty.svelte'; import Guard from '$lib/components/Guard.svelte'; import Head from '$lib/components/Head.svelte'; @@ -12,7 +12,6 @@ import Cards from '$lib/containers/Cards.svelte'; import Column from '$lib/containers/Column.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; - import Pill from '$lib/pills/Pill.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; @@ -26,7 +25,6 @@ import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { filesize } from 'filesize'; import type { PageProps } from './$types'; let { data }: PageProps = $props(); @@ -79,26 +77,14 @@ <Pagination {pagination} total={archives.count} /> <main> <Cards> - {#each archives.edges as { id, name, cover, size, pageCount }, index (id)} - <Selectable {index} {id}> + {#each archives.edges as archive, index (archive.id)} + <Selectable {index} id={archive.id}> {#snippet children({ onclick, selected })} - <Card href={id.toString()} details={{ title: name, cover }} {onclick}> + <ArchiveCard {archive} {onclick}> {#snippet overlay()} <SelectionOverlay position="left" {selected} /> {/snippet} - <div class="flex gap-1 text-xs"> - <Pill name={`${pageCount} pages`}> - {#snippet icon()} - <span class="icon-[material-symbols--note] mr-0.5"></span> - {/snippet} - </Pill> - <Pill name={filesize(size, { base: 2 })}> - {#snippet icon()} - <span class="icon-[material-symbols--hard-drive] mr-0.5"></span> - {/snippet} - </Pill> - </div> - </Card> + </ArchiveCard> {/snippet} </Selectable> {:else} 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} |