granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

small changes and fixes to character datagrid

Browse source
This commit is contained in:
Justin Edmund 2025-09-17 22:15:01 -07:00
parent b71c2c2109
commit 0e92b9baf5
1 changed files with 10 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/routes/database/characters/+page.svelte
View file

@ -1,16 +1,17 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte' // Svelte components
import type { IColumn } from 'wx-svelte-grid'
import CharacterImageCell from '$lib/components/database/cells/CharacterImageCell.svelte' import CharacterImageCell from '$lib/components/database/cells/CharacterImageCell.svelte'
import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
import CharacterUncapCell from '$lib/components/database/cells/CharacterUncapCell.svelte' import CharacterUncapCell from '$lib/components/database/cells/CharacterUncapCell.svelte'
import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
import LastUpdatedCell from '$lib/components/database/cells/LastUpdatedCell.svelte' import LastUpdatedCell from '$lib/components/database/cells/LastUpdatedCell.svelte'
// Utilities
import { getRarityLabel } from '$lib/utils/rarity' import { getRarityLabel } from '$lib/utils/rarity'
// Column configuration for characters const columns = [
const columns: IColumn[] = [
{ {
id: 'granblue_id', id: 'granblue_id',
header: 'Image', header: 'Image',
@ -22,8 +23,7 @@
header: 'Name', header: 'Name',
flexgrow: 1, flexgrow: 1,
sort: true, sort: true,
template: (nameObj) => { template: (nameObj: { en: any; ja: any }) => {
// nameObj is the name property itself, not the full item
if (!nameObj) return '—' if (!nameObj) return '—'
if (typeof nameObj === 'string') return nameObj if (typeof nameObj === 'string') return nameObj
// Handle {en: "...", ja: "..."} structure // Handle {en: "...", ja: "..."} structure
@ -35,7 +35,7 @@
header: 'Rarity', header: 'Rarity',
width: 80, width: 80,
sort: true, sort: true,
template: (rarity) => getRarityLabel(rarity) template: (rarity: number) => getRarityLabel(rarity)
}, },
{ {
id: 'element', id: 'element',
@ -60,7 +60,7 @@
] ]
</script> </script>
<div class="database-page"> <div class="page">
<DatabaseGridWithProvider resource="characters" {columns} pageSize={20} /> <DatabaseGridWithProvider resource="characters" {columns} pageSize={20} />
</div> </div>
@ -69,24 +69,9 @@
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
.database-page { .page {
padding: spacing.$unit-2x 0; padding: spacing.$unit-2x 0;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
} }
.page-header {
margin-bottom: spacing.$unit-2x;
h1 {
font-size: typography.$font-xxlarge;
font-weight: typography.$bold;
margin-bottom: spacing.$unit-half;
}
.subtitle {
font-size: typography.$font-regular;
color: colors.$grey-50;
}
}
</style> </style>