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

widen collection grid cells to 144px, reduce horizontal gap

Browse source
This commit is contained in:
Justin Edmund 2025-12-19 12:27:14 -08:00
parent 5ab48f5d97
commit b0d359161d
3 changed files with 24 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/routes/(app)/[username]/collection/characters/+page.svelte
View file

@ -23,6 +23,11 @@
// Get loaded IDs context from layout
const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
// User's element for elemental styling
const userElement = $derived(
data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined
)
// Filter state
let elementFilters = $state<number[]>([])
let rarityFilters = $state<number[]>([])
@ -139,7 +144,7 @@
showViewToggle={true}
viewMode={currentViewMode}
onViewModeChange={handleViewModeChange}
neutralViewToggle={true}
element={userElement}
/>
</div>
@ -191,15 +196,6 @@
</div>
{/if}
{#if !collectionQuery.hasNextPage && allCharacters.length > 0}
<div class="end-message">
<p>
{allCharacters.length} character{allCharacters.length === 1 ? '' : 's'} in {data.isOwner
? 'your'
: 'this'} collection
</p>
</div>
{/if}
{/if}
</div>
</div>
@ -229,9 +225,9 @@
.character-grid {
display: grid;
grid-template-columns: repeat(5, 128px);
grid-template-columns: repeat(5, 144px);
justify-content: space-between;
gap: $unit-4x;
gap: $unit-4x $unit-2x;
}
.character-list {
@ -286,16 +282,6 @@
}
}
.end-message {
text-align: center;
padding: $unit-2x;
color: var(--text-secondary, #666);
p {
margin: 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);

30
src/routes/(app)/[username]/collection/summons/+page.svelte
View file

@ -23,6 +23,11 @@
// Get loaded IDs context from layout
const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
// User's element for elemental styling
const userElement = $derived(
data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined
)
// Filter state
let elementFilters = $state<number[]>([])
let rarityFilters = $state<number[]>([])
@ -119,7 +124,7 @@
showViewToggle={true}
viewMode={currentViewMode}
onViewModeChange={handleViewModeChange}
neutralViewToggle={true}
element={userElement}
/>
</div>
@ -171,15 +176,6 @@
</div>
{/if}
{#if !collectionQuery.hasNextPage && allSummons.length > 0}
<div class="end-message">
<p>
{allSummons.length} summon{allSummons.length === 1 ? '' : 's'} in {data.isOwner
? 'your'
: 'this'} collection
</p>
</div>
{/if}
{/if}
</div>
</div>
@ -209,9 +205,9 @@
.summon-grid {
display: grid;
grid-template-columns: repeat(5, 128px);
grid-template-columns: repeat(5, 144px);
justify-content: space-between;
gap: $unit-4x;
gap: $unit-4x $unit-2x;
}
.summon-list {
@ -266,16 +262,6 @@
}
}
.end-message {
text-align: center;
padding: $unit-2x;
color: var(--text-secondary, #666);
p {
margin: 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);

30
src/routes/(app)/[username]/collection/weapons/+page.svelte
View file

@ -23,6 +23,11 @@
// Get loaded IDs context from layout
const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
// User's element for elemental styling
const userElement = $derived(
data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined
)
// Filter state
let elementFilters = $state<number[]>([])
let rarityFilters = $state<number[]>([])
@ -127,7 +132,7 @@
showViewToggle={true}
viewMode={currentViewMode}
onViewModeChange={handleViewModeChange}
neutralViewToggle={true}
element={userElement}
/>
</div>
@ -179,15 +184,6 @@
</div>
{/if}
{#if !collectionQuery.hasNextPage && allWeapons.length > 0}
<div class="end-message">
<p>
{allWeapons.length} weapon{allWeapons.length === 1 ? '' : 's'} in {data.isOwner
? 'your'
: 'this'} collection
</p>
</div>
{/if}
{/if}
</div>
</div>
@ -217,9 +213,9 @@
.weapon-grid {
display: grid;
grid-template-columns: repeat(5, 128px);
grid-template-columns: repeat(5, 144px);
justify-content: space-between;
gap: $unit-4x;
gap: $unit-4x $unit-2x;
}
.weapon-list {
@ -274,16 +270,6 @@
}
}
.end-message {
text-align: center;
padding: $unit-2x;
color: var(--text-secondary, #666);
p {
margin: 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);