diff options
| -rw-r--r-- | frontend/src/lib/pills/Pill.svelte | 29 | ||||
| -rw-r--r-- | frontend/src/lib/pills/TagPill.svelte | 8 | ||||
| -rw-r--r-- | frontend/src/lib/tabs/ComicDetails.svelte | 10 |
3 files changed, 38 insertions, 9 deletions
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte index 494cbe4..98d9b5a 100644 --- a/frontend/src/lib/pills/Pill.svelte +++ b/frontend/src/lib/pills/Pill.svelte @@ -3,12 +3,13 @@ name: string; tooltip?: string | null; style: string; + highlight?: boolean; } - let { name, tooltip, style }: Props = $props(); + let { name, tooltip, style, highlight = false }: Props = $props(); </script> -<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}> +<div class:highlight 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'} @@ -36,23 +37,47 @@ @apply border-zinc-700 bg-zinc-700/20 text-zinc-300; } + div.highlight { + @apply transition-colors hover:border-zinc-600 hover:bg-zinc-500/20 hover:text-zinc-200; + } + .female { @apply border-pink-800 bg-pink-800/20 text-pink-200; } + .female.highlight { + @apply hover:border-pink-700 hover:bg-pink-600/20 hover:text-pink-100; + } + .male { @apply border-blue-800 bg-blue-800/20 text-blue-200; } + .male.highlight { + @apply hover:border-blue-700 hover:bg-blue-600/20 hover:text-blue-100; + } + .trans { @apply border-violet-800 bg-violet-800/20 text-violet-200; } + .trans.highlight { + @apply hover:border-violet-600 hover:bg-violet-600/20 hover:text-violet-100; + } + .mixed { @apply border-amber-800 bg-amber-800/20 text-amber-200; } + .mixed.highlight { + @apply hover:border-amber-700 hover:bg-amber-600/20 hover:text-amber-100; + } + .location { @apply border-sky-800 bg-sky-800/20 text-sky-200; } + + .location.highlight { + @apply hover:border-sky-700 hover:bg-sky-600/20 hover:text-sky-100; + } </style> diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte index 17e4b25..c97c722 100644 --- a/frontend/src/lib/pills/TagPill.svelte +++ b/frontend/src/lib/pills/TagPill.svelte @@ -2,10 +2,14 @@ import type { ComicTag } from '$gql/graphql'; import Pill from './Pill.svelte'; - let { name, description }: Pick<ComicTag, 'name' | 'description'> = $props(); + interface Props extends Pick<ComicTag, 'name' | 'description'> { + highlight?: boolean; + } + + let { name, description, highlight = false }: Props = $props(); let [namespace, tag] = name.split(':'); let tooltip = [name, description].filter((v) => v).join('\n\n'); </script> -<Pill name={tag} style={namespace} {tooltip}></Pill> +<Pill {highlight} name={tag} style={namespace} {tooltip}></Pill> diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte index 9992c82..3f9090e 100644 --- a/frontend/src/lib/tabs/ComicDetails.svelte +++ b/frontend/src/lib/tabs/ComicDetails.svelte @@ -87,7 +87,7 @@ <Section title="Artists"> {#each comic.artists as { id, name } (id)} <a href={filterFor('artists', id)}> - <Pill {name} style="artist" /> + <Pill highlight {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)}> - <Pill {name} style="circle" /> + <Pill highlight {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)}> - <Pill {name} style="character" /> + <Pill highlight {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)}> - <Pill {name} style="world" /> + <Pill highlight {name} style="world" /> </a> {/each} </Section> @@ -123,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> |