diff options
Diffstat (limited to 'frontend/src/lib/components')
| -rw-r--r-- | frontend/src/lib/components/AddButton.svelte | 9 | ||||
| -rw-r--r-- | frontend/src/lib/components/ArchiveCard.svelte | 39 | ||||
| -rw-r--r-- | frontend/src/lib/components/Card.svelte | 41 | ||||
| -rw-r--r-- | frontend/src/lib/components/ComicCard.svelte | 75 | ||||
| -rw-r--r-- | frontend/src/lib/components/DeleteButton.svelte | 3 | ||||
| -rw-r--r-- | frontend/src/lib/components/Dialog.svelte | 3 | ||||
| -rw-r--r-- | frontend/src/lib/components/Expander.svelte | 21 |
7 files changed, 143 insertions, 48 deletions
diff --git a/frontend/src/lib/components/AddButton.svelte b/frontend/src/lib/components/AddButton.svelte index f07eafd..7a07bd7 100644 --- a/frontend/src/lib/components/AddButton.svelte +++ b/frontend/src/lib/components/AddButton.svelte @@ -1,5 +1,12 @@ <script lang="ts"> - let { title, onclick }: { title: string; onclick: () => void } = $props(); + import type { MouseEventHandler } from 'svelte/elements'; + + interface Props { + title: string; + onclick: MouseEventHandler<HTMLButtonElement>; + } + + let { title, onclick }: Props = $props(); </script> <button class="btn-blue" {title} aria-label={title} {onclick}> diff --git a/frontend/src/lib/components/ArchiveCard.svelte b/frontend/src/lib/components/ArchiveCard.svelte new file mode 100644 index 0000000..c9d283b --- /dev/null +++ b/frontend/src/lib/components/ArchiveCard.svelte @@ -0,0 +1,39 @@ +<script lang="ts"> + import type { ArchiveFragment } from '$gql/graphql'; + import FooterPill from '$lib/pills/FooterPill.svelte'; + import { filesize } from 'filesize'; + import { type Snippet } from 'svelte'; + import Card from './Card.svelte'; + + interface Props { + archive: ArchiveFragment; + overlay?: Snippet; + onclick?: (event: MouseEvent) => void; + } + + let { archive, overlay, onclick }: Props = $props(); + + let details = $derived({ + title: archive.name, + cover: archive.cover + }); + let href = $derived(`/archives/${archive.id.toString()}`); +</script> + +<Card {details} {href} {onclick} {overlay}> + {#snippet footer()} + <div class="flex flex-wrap gap-1"> + <FooterPill text={`${archive.pageCount} pages`}> + {#snippet icon()} + <span class="icon-[material-symbols--description] mr-0.5 text-sm"></span> + {/snippet} + </FooterPill> + <div class="flex grow"></div> + <FooterPill text={filesize(archive.size, { base: 2 })}> + {#snippet icon()} + <span class="icon-[material-symbols--hard-drive] mr-0.5 text-sm"></span> + {/snippet} + </FooterPill> + </div> + {/snippet} +</Card> diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index b8e8ecf..8a2b047 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -1,5 +1,8 @@ -<script lang="ts" module> - import type { ComicFragment, ImageFragment } from '$gql/graphql'; +<script lang="ts"> + import type { ImageFragment } from '$gql/graphql'; + import { src } from '$lib/Utils'; + import Star from '$lib/icons/Star.svelte'; + import type { Snippet } from 'svelte'; interface CardDetails { title: string; @@ -8,24 +11,6 @@ cover?: ImageFragment; } - export function comicCard(comic: ComicFragment) { - return { - href: `/comics/${comic.id.toString()}`, - details: { - title: comic.title, - subtitle: comic.originalTitle, - favourite: comic.favourite, - cover: comic.cover - } - }; - } -</script> - -<script lang="ts"> - import { src } from '$lib/Utils'; - import Star from '$lib/icons/Star.svelte'; - import type { Snippet } from 'svelte'; - interface Props { href: string; details: CardDetails; @@ -33,6 +18,7 @@ coverOnly?: boolean; overlay?: Snippet; children?: Snippet; + footer?: Snippet; onclick?: (event: MouseEvent) => void; } @@ -43,6 +29,7 @@ coverOnly = false, overlay, children, + footer, onclick }: Props = $props(); </script> @@ -57,7 +44,7 @@ {@render overlay?.()} {#if details.cover} <img - class="h-full w-full object-cover object-[center_top]" + class="h-full w-full object-cover object-[left_top]" width={details.cover.width} height={details.cover.height} src={src(details.cover)} @@ -66,8 +53,8 @@ /> {/if} {#if !coverOnly} - <article class="flex h-full flex-col gap-2 p-2"> - <header> + <article class="p flex h-full flex-col p-2 pb-1"> + <header class="mb-2"> <h2 class="self-center text-sm font-medium [grid-area:title]" title={details.title}> {details.title} </h2> @@ -86,9 +73,15 @@ {/if} </header> - <section class="max-h-full grow overflow-auto border-t border-slate-800/80 pt-2 text-xs"> + <section class="max-h-full grow overflow-auto border-y border-slate-800/80 pt-2 text-xs"> {@render children?.()} </section> + + {#if footer} + <div class="mt-1 text-xs"> + {@render footer()} + </div> + {/if} </article> {/if} </a> diff --git a/frontend/src/lib/components/ComicCard.svelte b/frontend/src/lib/components/ComicCard.svelte new file mode 100644 index 0000000..1a648b2 --- /dev/null +++ b/frontend/src/lib/components/ComicCard.svelte @@ -0,0 +1,75 @@ +<script lang="ts"> + import type { ComicFragment } from '$gql/graphql'; + import FooterPill from '$lib/pills/FooterPill.svelte'; + import Pill from '$lib/pills/Pill.svelte'; + import TagPill from '$lib/pills/TagPill.svelte'; + import { type Snippet } from 'svelte'; + import Card from './Card.svelte'; + + interface Props { + comic: ComicFragment; + overlay?: Snippet; + compact?: boolean; + coverOnly?: boolean; + onclick?: (event: MouseEvent) => void; + } + + let { comic, overlay, compact, coverOnly, onclick }: Props = $props(); + + let details = $derived({ + title: comic.title, + subtitle: comic.originalTitle, + favourite: comic.favourite, + cover: comic.cover + }); + let href = $derived(`/comics/${comic.id.toString()}`); +</script> + +<Card {details} {href} {compact} {onclick} {overlay} {coverOnly}> + <div class="flex flex-col gap-1"> + {#if comic.artists.length || comic.circles.length} + <div class="flex flex-wrap gap-1"> + {#each comic.artists as { name } (name)} + <Pill {name} style="artist" /> + {/each} + {#each comic.circles as { name } (name)} + <Pill {name} style="circle" /> + {/each} + </div> + {/if} + {#if comic.characters.length || comic.worlds.length} + <div class="flex flex-wrap gap-1"> + {#each comic.worlds as { name } (name)} + <Pill {name} style="world" /> + {/each} + {#each comic.characters as { name } (name)} + <Pill {name} style="character" /> + {/each} + </div> + {/if} + {#if comic.tags.length} + <div class="flex flex-wrap gap-1"> + {#each comic.tags as { name, description } (name)} + <TagPill {name} {description} /> + {/each} + </div> + {/if} + </div> + {#snippet footer()} + <div class="flex flex-wrap gap-1"> + <FooterPill text={`${comic.pageCount} pages`}> + {#snippet icon()} + <span class="icon-[material-symbols--description] mr-0.5 text-sm"></span> + {/snippet} + </FooterPill> + <div class="flex grow"></div> + {#if comic.date} + <FooterPill text={comic.date}> + {#snippet icon()} + <span class="icon-[material-symbols--calendar-today] mr-0.5 text-sm"></span> + {/snippet} + </FooterPill> + {/if} + </div> + {/snippet} +</Card> diff --git a/frontend/src/lib/components/DeleteButton.svelte b/frontend/src/lib/components/DeleteButton.svelte index bc94c8c..4659e13 100644 --- a/frontend/src/lib/components/DeleteButton.svelte +++ b/frontend/src/lib/components/DeleteButton.svelte @@ -12,7 +12,8 @@ <button type="button" - class={prominent ? 'btn-rose' : 'btn-slate hover:bg-rose-700'} + class:prominent + class="[&.prominent]:btn-rose btn-slate hover:bg-rose-700" title="Delete forever" aria-label="Delete forever" {onclick} diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte index d300369..ec647ba 100644 --- a/frontend/src/lib/components/Dialog.svelte +++ b/frontend/src/lib/components/Dialog.svelte @@ -10,13 +10,14 @@ children?: Snippet; } + // eslint-disable-next-line svelte/no-unused-props let { isOpen, close, title, children }: Props = $props(); </script> {#if isOpen} <div role="dialog" - class="pointer-events-none fixed bottom-0 left-0 right-0 top-0 z-30 flex items-center justify-center" + class="pointer-events-none fixed top-0 right-0 bottom-0 left-0 z-30 flex items-center justify-center" transition:fade|global={fadeDefault} use:trapFocus > diff --git a/frontend/src/lib/components/Expander.svelte b/frontend/src/lib/components/Expander.svelte deleted file mode 100644 index 8f23042..0000000 --- a/frontend/src/lib/components/Expander.svelte +++ /dev/null @@ -1,21 +0,0 @@ -<script lang="ts"> - interface Props { - expanded: boolean; - title: string; - } - - let { expanded = $bindable(), title }: Props = $props(); - - function onclick() { - expanded = !expanded; - } -</script> - -<button class="flex items-center text-base hover:text-white" type="button" {onclick}> - {#if expanded} - <span class="icon-base icon-[material-symbols--expand-less]"></span> - {:else} - <span class="icon-base icon-[material-symbols--expand-more]"></span> - {/if} - {title} -</button> |