From cde15428da56326d472d02f0b0ffeeca08fe2c37 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 15 Dec 2025 19:12:28 -0800 Subject: [PATCH] add element styling to link buttons on db detail pages --- .../characters/[granblueId]/+page.svelte | 102 ++++++++++++------ .../summons/[granblueId]/+page.svelte | 64 ++++++----- .../weapons/[granblueId]/+page.svelte | 102 ++++++++++++------ 3 files changed, 176 insertions(+), 92 deletions(-) diff --git a/src/routes/(app)/database/characters/[granblueId]/+page.svelte b/src/routes/(app)/database/characters/[granblueId]/+page.svelte index 94bdeb6b..de8c3f04 100644 --- a/src/routes/(app)/database/characters/[granblueId]/+page.svelte +++ b/src/routes/(app)/database/characters/[granblueId]/+page.svelte @@ -17,7 +17,9 @@ import { fetchWikiPage } from '$lib/api/wiki' // Components - import DetailScaffold, { type DetailTab } from '$lib/features/database/detail/DetailScaffold.svelte' + import DetailScaffold, { + type DetailTab + } from '$lib/features/database/detail/DetailScaffold.svelte' import CharacterMetadataSection from '$lib/features/database/characters/sections/CharacterMetadataSection.svelte' import CharacterUncapSection from '$lib/features/database/characters/sections/CharacterUncapSection.svelte' import CharacterTaxonomySection from '$lib/features/database/characters/sections/CharacterTaxonomySection.svelte' @@ -27,12 +29,14 @@ import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte' import DetailItem from '$lib/components/ui/DetailItem.svelte' import { getCharacterImage } from '$lib/utils/images' + import { getElementLabel } from '$lib/utils/element' import { buildWikiEnUrl, buildWikiJaUrl, buildGamewithUrl, buildKamigameUrl } from '$lib/utils/external-links' + import Button from '$lib/components/ui/Button.svelte' // Types import type { PageData } from './$types' @@ -64,8 +68,22 @@ const userRole = $derived(data.role || 0) const canEdit = $derived(userRole >= 7) + // Element for button styling + const elementName = $derived( + getElementLabel(character?.element)?.toLowerCase() as + | 'wind' + | 'fire' + | 'water' + | 'earth' + | 'dark' + | 'light' + | undefined + ) + // Edit URL for navigation - const editUrl = $derived(character?.granblueId ? `/database/characters/${character.granblueId}/edit` : undefined) + const editUrl = $derived( + character?.granblueId ? `/database/characters/${character.granblueId}/edit` : undefined + ) // Query for related characters (same character_id) const relatedQuery = createQuery(() => ({ @@ -132,7 +150,11 @@ }) // Image download handlers - async function handleDownloadImage(size: string, transformation: string | undefined, force: boolean) { + async function handleDownloadImage( + size: string, + transformation: string | undefined, + force: boolean + ) { if (!character?.id) return await entityAdapter.downloadCharacterImage(character.id, size, transformation, force) } @@ -226,41 +248,65 @@ - {@const url = buildWikiEnUrl(character.wiki?.en)} - {#if url} - - {url} - + {#if character.wiki?.en} + {:else} — {/if} - {@const url = buildWikiJaUrl(character.wiki?.ja)} - {#if url} - - {url} - + {#if character.wiki?.ja} + {:else} — {/if} - {@const url = buildGamewithUrl(character.gamewith)} - {#if url} - - {url} - + {#if character.gamewith} + {:else} — {/if} - {@const url = buildKamigameUrl(character.kamigame, 'character')} - {#if url} - - {url} - + {#if character.kamigame} + {:else} — {/if} @@ -404,16 +450,6 @@ font-size: typography.$font-small; } - .external-link { - color: colors.$blue; - text-decoration: none; - word-break: break-all; - - &:hover { - text-decoration: underline; - } - } - .empty-value { color: colors.$grey-50; } diff --git a/src/routes/(app)/database/summons/[granblueId]/+page.svelte b/src/routes/(app)/database/summons/[granblueId]/+page.svelte index 55ad8fe0..b2a6eaec 100644 --- a/src/routes/(app)/database/summons/[granblueId]/+page.svelte +++ b/src/routes/(app)/database/summons/[granblueId]/+page.svelte @@ -28,12 +28,14 @@ import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte' import DetailItem from '$lib/components/ui/DetailItem.svelte' import { getSummonImage } from '$lib/utils/images' + import { getElementLabel } from '$lib/utils/element' import { buildWikiEnUrl, buildWikiJaUrl, buildGamewithUrl, buildKamigameUrl } from '$lib/utils/external-links' + import Button from '$lib/components/ui/Button.svelte' // Types import type { PageData } from './$types' @@ -65,6 +67,18 @@ const userRole = $derived(data.role || 0) const canEdit = $derived(userRole >= 7) + // Element for button styling + const elementName = $derived( + getElementLabel(summon?.element)?.toLowerCase() as + | 'wind' + | 'fire' + | 'water' + | 'earth' + | 'dark' + | 'light' + | undefined + ) + // Edit URL for navigation const editUrl = $derived(summon?.granblueId ? `/database/summons/${summon.granblueId}/edit` : undefined) @@ -225,41 +239,41 @@ - {@const url = buildWikiEnUrl(summon.wiki?.en)} - {#if url} - - {url} - + {#if summon.wiki?.en} + {:else} — {/if} - {@const url = buildWikiJaUrl(summon.wiki?.ja)} - {#if url} - - {url} - + {#if summon.wiki?.ja} + {:else} — {/if} - {@const url = buildGamewithUrl(summon.gamewith)} - {#if url} - - {url} - + {#if summon.gamewith} + {:else} — {/if} - {@const url = buildKamigameUrl(summon.kamigame, 'summon')} - {#if url} - - {url} - + {#if summon.kamigame} + {:else} — {/if} @@ -446,13 +460,7 @@ font-size: typography.$font-small; } - .external-link { - color: colors.$blue; - text-decoration: none; - word-break: break-all; - - &:hover { - text-decoration: underline; - } + .empty-value { + color: colors.$grey-50; } diff --git a/src/routes/(app)/database/weapons/[granblueId]/+page.svelte b/src/routes/(app)/database/weapons/[granblueId]/+page.svelte index 66bc45ba..be561904 100644 --- a/src/routes/(app)/database/weapons/[granblueId]/+page.svelte +++ b/src/routes/(app)/database/weapons/[granblueId]/+page.svelte @@ -17,7 +17,9 @@ import { fetchWikiPage } from '$lib/api/wiki' // Components - import DetailScaffold, { type DetailTab } from '$lib/features/database/detail/DetailScaffold.svelte' + import DetailScaffold, { + type DetailTab + } from '$lib/features/database/detail/DetailScaffold.svelte' import WeaponMetadataSection from '$lib/features/database/weapons/sections/WeaponMetadataSection.svelte' import WeaponUncapSection from '$lib/features/database/weapons/sections/WeaponUncapSection.svelte' import WeaponTaxonomySection from '$lib/features/database/weapons/sections/WeaponTaxonomySection.svelte' @@ -28,12 +30,14 @@ import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte' import DetailItem from '$lib/components/ui/DetailItem.svelte' import { getWeaponGridImage, getWeaponImage as getWeaponImageUrl } from '$lib/utils/images' + import { getElementLabel } from '$lib/utils/element' import { buildWikiEnUrl, buildWikiJaUrl, buildGamewithUrl, buildKamigameUrl } from '$lib/utils/external-links' + import Button from '$lib/components/ui/Button.svelte' // Types import type { PageData } from './$types' @@ -65,8 +69,22 @@ const userRole = $derived(data.role || 0) const canEdit = $derived(userRole >= 7) + // Element for button styling + const elementName = $derived( + getElementLabel(weapon?.element)?.toLowerCase() as + | 'wind' + | 'fire' + | 'water' + | 'earth' + | 'dark' + | 'light' + | undefined + ) + // Edit URL for navigation - const editUrl = $derived(weapon?.granblueId ? `/database/weapons/${weapon.granblueId}/edit` : undefined) + const editUrl = $derived( + weapon?.granblueId ? `/database/weapons/${weapon.granblueId}/edit` : undefined + ) // Query for raw data (only when on raw tab) const rawDataQuery = createQuery(() => ({ @@ -122,7 +140,11 @@ }) // Image download handlers - async function handleDownloadImage(size: string, transformation: string | undefined, force: boolean) { + async function handleDownloadImage( + size: string, + transformation: string | undefined, + force: boolean + ) { if (!weapon?.id) return // For weapons, '01' means base (no transformation suffix) const trans = transformation === '01' ? undefined : transformation @@ -218,41 +240,65 @@ - {@const url = buildWikiEnUrl(weapon.wiki?.en)} - {#if url} - - {url} - + {#if weapon.wiki?.en} + {:else} — {/if} - {@const url = buildWikiJaUrl(weapon.wiki?.ja)} - {#if url} - - {url} - + {#if weapon.wiki?.ja} + {:else} — {/if} - {@const url = buildGamewithUrl(weapon.gamewith)} - {#if url} - - {url} - + {#if weapon.gamewith} + {:else} — {/if} - {@const url = buildKamigameUrl(weapon.kamigame, 'weapon', weapon.rarity)} - {#if url} - - {url} - + {#if weapon.kamigame} + {:else} — {/if} @@ -419,13 +465,7 @@ font-size: typography.$font-small; } - .external-link { - color: colors.$blue; - text-decoration: none; - word-break: break-all; - - &:hover { - text-decoration: underline; - } + .empty-value { + color: colors.$grey-50; }