diff options
Diffstat (limited to 'frontend/src/lib/tabs/ComicDetails.svelte')
| -rw-r--r-- | frontend/src/lib/tabs/ComicDetails.svelte | 40 |
1 files changed, 25 insertions, 15 deletions
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte index 0a131af..3f9090e 100644 --- a/frontend/src/lib/tabs/ComicDetails.svelte +++ b/frontend/src/lib/tabs/ComicDetails.svelte @@ -1,15 +1,15 @@ <script lang="ts"> - import type { ComicFilter, FullComicFragment } from '$gql/graphql'; + import { type ComicFilter, type FullComicFragment } from '$gql/graphql'; import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums'; import { href } from '$lib/Navigation'; import { formatListSize, joinText } from '$lib/Utils'; - import AssociationPill from '$lib/pills/AssociationPill.svelte'; + import Pill from '$lib/pills/Pill.svelte'; import TagPill from '$lib/pills/TagPill.svelte'; import { formatDistance, formatISO9075 } from 'date-fns'; import Header from './DetailsHeader.svelte'; import Section from './DetailsSection.svelte'; - export let comic: FullComicFragment; + let { comic }: { comic: FullComicFragment } = $props(); const now = Date.now(); const updatedDate = new Date(comic.updatedAt); @@ -27,13 +27,13 @@ <div class="flex flex-col gap-4 text-sm"> <Header {title}> - {#if comic.url} - <a href={comic.url} target="_blank" rel="noreferrer" class="btn-slate" title="Open URL"> - <span class="icon-base icon-[material-symbols--link]" /> - </a> - {/if} - <a href={`/archives/${comic.archive.id}`} class="btn-slate" title="Go to Archive"> - <span class="icon-base icon-[material-symbols--folder-zip]" /> + <a + href={`/archives/${comic.archive.id}`} + class="btn-slate" + title="Go to Archive" + aria-label="Go to Archive" + > + <span class="icon-base icon-[material-symbols--folder-zip]"></span> </a> </Header> @@ -73,11 +73,21 @@ </Section> </div> + {#if comic.url} + <Section title="URL"> + <a + class="ellipsis-nowrap transition-colors hover:text-white hover:underline" + rel="noreferrer" + href={comic.url}>{comic.url}</a + > + </Section> + {/if} + {#if comic.artists.length} <Section title="Artists"> {#each comic.artists as { id, name } (id)} <a href={filterFor('artists', id)}> - <AssociationPill {name} type="artist" /> + <Pill highlight {name} style="artist" /> </a> {/each} </Section> @@ -86,7 +96,7 @@ <Section title="Circles"> {#each comic.circles as { id, name } (id)} <a href={filterFor('circles', id)}> - <AssociationPill {name} type="circle" /> + <Pill highlight {name} style="circle" /> </a> {/each} </Section> @@ -95,7 +105,7 @@ <Section title="Characters"> {#each comic.characters as { id, name } (id)} <a href={filterFor('characters', id)}> - <AssociationPill {name} type="character" /> + <Pill highlight {name} style="character" /> </a> {/each} </Section> @@ -104,7 +114,7 @@ <Section title="Worlds"> {#each comic.worlds as { id, name } (id)} <a href={filterFor('worlds', id)}> - <AssociationPill {name} type="world" /> + <Pill highlight {name} style="world" /> </a> {/each} </Section> @@ -113,7 +123,7 @@ <Section title="Tags"> {#each comic.tags as { id, name, description } (id)} <a href={filterFor('tags', id)}> - <TagPill {name} {description} /> + <TagPill highlight {name} {description} /> </a> {/each} </Section> |