summaryrefslogtreecommitdiffstatshomepage
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/lib/components/ComicCard.svelte10
-rw-r--r--frontend/src/lib/icons/Artist.svelte1
-rw-r--r--frontend/src/lib/icons/Character.svelte1
-rw-r--r--frontend/src/lib/icons/Circle.svelte1
-rw-r--r--frontend/src/lib/icons/Female.svelte1
-rw-r--r--frontend/src/lib/icons/Location.svelte1
-rw-r--r--frontend/src/lib/icons/Male.svelte1
-rw-r--r--frontend/src/lib/icons/Transgender.svelte1
-rw-r--r--frontend/src/lib/icons/World.svelte1
-rw-r--r--frontend/src/lib/pills/AssociationPill.svelte27
-rw-r--r--frontend/src/lib/pills/Pill.svelte49
-rw-r--r--frontend/src/lib/pills/TagPill.svelte42
-rw-r--r--frontend/src/lib/tabs/ComicDetails.svelte10
13 files changed, 44 insertions, 102 deletions
diff --git a/frontend/src/lib/components/ComicCard.svelte b/frontend/src/lib/components/ComicCard.svelte
index cb73e97..1a648b2 100644
--- a/frontend/src/lib/components/ComicCard.svelte
+++ b/frontend/src/lib/components/ComicCard.svelte
@@ -1,7 +1,7 @@
<script lang="ts">
import type { ComicFragment } from '$gql/graphql';
- import AssociationPill from '$lib/pills/AssociationPill.svelte';
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';
@@ -30,20 +30,20 @@
{#if comic.artists.length || comic.circles.length}
<div class="flex flex-wrap gap-1">
{#each comic.artists as { name } (name)}
- <AssociationPill {name} type="artist" />
+ <Pill {name} style="artist" />
{/each}
{#each comic.circles as { name } (name)}
- <AssociationPill {name} type="circle" />
+ <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)}
- <AssociationPill {name} type="world" />
+ <Pill {name} style="world" />
{/each}
{#each comic.characters as { name } (name)}
- <AssociationPill {name} type="character" />
+ <Pill {name} style="character" />
{/each}
</div>
{/if}
diff --git a/frontend/src/lib/icons/Artist.svelte b/frontend/src/lib/icons/Artist.svelte
deleted file mode 100644
index 04886ce..0000000
--- a/frontend/src/lib/icons/Artist.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
diff --git a/frontend/src/lib/icons/Character.svelte b/frontend/src/lib/icons/Character.svelte
deleted file mode 100644
index fbb3ecc..0000000
--- a/frontend/src/lib/icons/Character.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--face]"></span>
diff --git a/frontend/src/lib/icons/Circle.svelte b/frontend/src/lib/icons/Circle.svelte
deleted file mode 100644
index b54135c..0000000
--- a/frontend/src/lib/icons/Circle.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
diff --git a/frontend/src/lib/icons/Female.svelte b/frontend/src/lib/icons/Female.svelte
deleted file mode 100644
index 7bc422b..0000000
--- a/frontend/src/lib/icons/Female.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
diff --git a/frontend/src/lib/icons/Location.svelte b/frontend/src/lib/icons/Location.svelte
deleted file mode 100644
index d785832..0000000
--- a/frontend/src/lib/icons/Location.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
diff --git a/frontend/src/lib/icons/Male.svelte b/frontend/src/lib/icons/Male.svelte
deleted file mode 100644
index 8c72c47..0000000
--- a/frontend/src/lib/icons/Male.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
diff --git a/frontend/src/lib/icons/Transgender.svelte b/frontend/src/lib/icons/Transgender.svelte
deleted file mode 100644
index fa7d38b..0000000
--- a/frontend/src/lib/icons/Transgender.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--transgender]"></span>
diff --git a/frontend/src/lib/icons/World.svelte b/frontend/src/lib/icons/World.svelte
deleted file mode 100644
index 2d0320f..0000000
--- a/frontend/src/lib/icons/World.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--public]"></span>
diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
deleted file mode 100644
index fec59b8..0000000
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
- import Artist from '$lib/icons/Artist.svelte';
- import Character from '$lib/icons/Character.svelte';
- import Circle from '$lib/icons/Circle.svelte';
- import World from '$lib/icons/World.svelte';
- import type { Component } from 'svelte';
- import Pill from './Pill.svelte';
-
- type Association = 'artist' | 'circle' | 'world' | 'character';
-
- let { name, type }: { name: string; type: Association } = $props();
-
- const icons: Record<Association, Component> = {
- artist: Artist,
- character: Character,
- circle: Circle,
- world: World
- };
-
- const Icon = icons[type];
-</script>
-
-<Pill {name}>
- {#snippet icon()}
- <Icon />
- {/snippet}
-</Pill>
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index e7c6a8f..494cbe4 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -1,49 +1,58 @@
-<script lang="ts" module>
- export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
-</script>
-
<script lang="ts">
- import type { Snippet } from 'svelte';
-
interface Props {
name: string;
tooltip?: string | null;
- colour?: PillColour;
- icon?: Snippet;
+ style: string;
}
- let { name, tooltip, colour = 'zinc', icon }: Props = $props();
+ let { name, tooltip, style }: Props = $props();
</script>
-<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
- {@render icon?.()}
+<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
+ {#if style === 'female'}
+ <span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
+ {:else if style === 'male'}
+ <span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
+ {:else if style === 'trans'}
+ <span class="icon-xs icon-[material-symbols--transgender]"></span>
+ {:else if style === 'location'}
+ <span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
+ {:else if style === 'artist'}
+ <span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
+ {:else if style === 'character'}
+ <span class="icon-xs icon-[material-symbols--face]"></span>
+ {:else if style === 'circle'}
+ <span class="icon-xs icon-[material-symbols--group] mx-px"></span>
+ {:else if style === 'world'}
+ <span class="icon-xs icon-[material-symbols--public]"></span>
+ {/if}
<span>{name}</span>
</div>
<style lang="postcss">
@reference "tailwindcss/theme";
- .pink {
+ div {
+ @apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+ }
+
+ .female {
@apply border-pink-800 bg-pink-800/20 text-pink-200;
}
- .blue {
+ .male {
@apply border-blue-800 bg-blue-800/20 text-blue-200;
}
- .violet {
+ .trans {
@apply border-violet-800 bg-violet-800/20 text-violet-200;
}
- .amber {
+ .mixed {
@apply border-amber-800 bg-amber-800/20 text-amber-200;
}
- .sky {
+ .location {
@apply border-sky-800 bg-sky-800/20 text-sky-200;
}
-
- .zinc {
- @apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
- }
</style>
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte
index 92d2a0b..17e4b25 100644
--- a/frontend/src/lib/pills/TagPill.svelte
+++ b/frontend/src/lib/pills/TagPill.svelte
@@ -1,43 +1,11 @@
<script lang="ts">
- import Female from '$lib/icons/Female.svelte';
- import Location from '$lib/icons/Location.svelte';
- import Male from '$lib/icons/Male.svelte';
- import Transgender from '$lib/icons/Transgender.svelte';
- import type { Component } from 'svelte';
- import Pill, { type PillColour } from './Pill.svelte';
+ import type { ComicTag } from '$gql/graphql';
+ import Pill from './Pill.svelte';
- let { name, description }: { name: string; description?: string | null } = $props();
+ let { name, description }: Pick<ComicTag, 'name' | 'description'> = $props();
let [namespace, tag] = name.split(':');
-
- const styles: Record<string, PillColour> = {
- female: 'pink',
- male: 'blue',
- trans: 'violet',
- mixed: 'amber',
- location: 'sky',
- rest: 'zinc'
- };
-
- const icons: Record<string, Component> = {
- female: Female,
- male: Male,
- trans: Transgender,
- location: Location
- };
-
- const colour = styles[namespace] ?? styles.rest;
- const Icon = icons[namespace];
-
- function formatTooltip() {
- return [name, description].filter((v) => v).join('\n\n');
- }
+ let tooltip = [name, description].filter((v) => v).join('\n\n');
</script>
-<Pill name={tag} tooltip={formatTooltip()} {colour}>
- {#snippet icon()}
- {#if Icon}
- <Icon />
- {/if}
- {/snippet}
-</Pill>
+<Pill name={tag} style={namespace} {tooltip}></Pill>
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 89eb053..9992c82 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -3,7 +3,7 @@
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';
@@ -87,7 +87,7 @@
<Section title="Artists">
{#each comic.artists as { id, name } (id)}
<a href={filterFor('artists', id)}>
- <AssociationPill {name} type="artist" />
+ <Pill {name} style="artist" />
</a>
{/each}
</Section>
@@ -96,7 +96,7 @@
<Section title="Circles">
{#each comic.circles as { id, name } (id)}
<a href={filterFor('circles', id)}>
- <AssociationPill {name} type="circle" />
+ <Pill {name} style="circle" />
</a>
{/each}
</Section>
@@ -105,7 +105,7 @@
<Section title="Characters">
{#each comic.characters as { id, name } (id)}
<a href={filterFor('characters', id)}>
- <AssociationPill {name} type="character" />
+ <Pill {name} style="character" />
</a>
{/each}
</Section>
@@ -114,7 +114,7 @@
<Section title="Worlds">
{#each comic.worlds as { id, name } (id)}
<a href={filterFor('worlds', id)}>
- <AssociationPill {name} type="world" />
+ <Pill {name} style="world" />
</a>
{/each}
</Section>
powered by cgit and git | oriole.systems | how to verify signatures