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

improve collection row layouts

Browse source 
- wrap thumbnail + name in core-info container
- use layout tokens for border radius
- add proficiency column to weapon rows
- wider thumbnails, consistent sizing
This commit is contained in:
Justin Edmund 2025-12-03 10:50:36 -08:00
parent 6d8e1849eb
commit f54c5f012e
3 changed files with 152 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
src/lib/components/collection/CollectionCharacterRow.svelte
View file

@ -50,20 +50,21 @@
</script> </script>
<button type="button" class="character-row" onclick={onClick}> <button type="button" class="character-row" onclick={onClick}>
<div class="thumbnail"> <div class="core-info">
<img src={imageUrl} alt={displayName} loading="lazy" /> <div class="thumbnail">
</div> <img src={imageUrl} alt={displayName} loading="lazy" />
</div>
<div class="name-cell"> <div class="name-cell">
<span class="name">{displayName}</span> <span class="name">{displayName}</span>
{#if character.perpetuity} {#if character.perpetuity}
<img <img
class="perpetuity-badge" class="perpetuity-badge"
src={perpetuityFilled} src={perpetuityFilled}
alt="Perpetuity Ring" alt="Perpetuity Ring"
title="Perpetuity Ring" title="Perpetuity Ring"
/> />
{/if} {/if}
</div>
</div> </div>
<div class="element-cell"> <div class="element-cell">
@ -92,20 +93,21 @@
</button> </button>
<style lang="scss"> <style lang="scss">
@use '$src/themes/layout' as *;
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as *; @use '$src/themes/typography' as *;
.character-row { .character-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit-2x; gap: $unit-4x;
padding: $unit $unit-2x $unit $unit; padding: $unit $unit-2x $unit $unit;
border: none; border: none;
background: var(--list-cell-bg); background: var(--list-cell-bg);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-align: left; text-align: left;
border-radius: 12px; border-radius: $card-corner;
transition: transition:
background 0.15s, background 0.15s,
box-shadow 0.15s; box-shadow 0.15s;
@ -121,36 +123,43 @@
} }
} }
.thumbnail { .core-info {
width: 100px;
aspect-ratio: 280 / 160;
border-radius: 6px;
overflow: hidden;
background: var(--card-bg, #f5f5f5);
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.name-cell {
flex: 1;
min-width: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit; gap: $unit-2x;
} flex-grow: 1;
.name { .thumbnail {
font-size: $font-regular; width: 100px;
font-weight: $medium; aspect-ratio: 280 / 160;
color: var(--text-primary); border-radius: $item-corner;
white-space: nowrap; overflow: hidden;
overflow: hidden; background: var(--card-bg, #f5f5f5);
text-overflow: ellipsis; flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.name-cell {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: $unit;
.name {
font-size: $font-regular;
font-weight: $medium;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
} }
.perpetuity-badge { .perpetuity-badge {
@ -162,7 +171,7 @@
.uncap-cell { .uncap-cell {
width: 100px; width: 100px;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
} }

82
src/lib/components/collection/CollectionSummonRow.svelte
View file

@ -14,7 +14,7 @@
// Get transformation suffix for transcendence // Get transformation suffix for transcendence
const transformation = $derived(summon.transcendenceStep > 0 ? '02' : undefined) const transformation = $derived(summon.transcendenceStep > 0 ? '02' : undefined)
const imageUrl = $derived(getSummonImage(summon.summon?.granblueId, 'grid', transformation)) const imageUrl = $derived(getSummonImage(summon.summon?.granblueId, 'wide', transformation))
const displayName = $derived.by(() => { const displayName = $derived.by(() => {
const name = summon.summon?.name const name = summon.summon?.name
@ -28,12 +28,14 @@
</script> </script>
<button type="button" class="summon-row" onclick={onClick}> <button type="button" class="summon-row" onclick={onClick}>
<div class="thumbnail"> <div class="core-info">
<img src={imageUrl} alt={displayName} loading="lazy" /> <div class="thumbnail">
</div> <img src={imageUrl} alt={displayName} loading="lazy" />
</div>
<div class="name-cell"> <div class="name-cell">
<span class="name">{displayName}</span> <span class="name">{displayName}</span>
</div>
</div> </div>
<div class="element-cell"> <div class="element-cell">
@ -57,20 +59,21 @@
</button> </button>
<style lang="scss"> <style lang="scss">
@use '$src/themes/layout' as *;
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as *; @use '$src/themes/typography' as *;
.summon-row { .summon-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit-2x; gap: $unit-4x;
padding: $unit $unit-2x $unit $unit; padding: $unit $unit-2x $unit $unit;
border: none; border: none;
background: var(--list-cell-bg); background: var(--list-cell-bg);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-align: left; text-align: left;
border-radius: 12px; border-radius: $card-corner;
transition: transition:
background 0.15s, background 0.15s,
box-shadow 0.15s; box-shadow 0.15s;
@ -86,36 +89,43 @@
} }
} }
.thumbnail { .core-info {
width: 80px;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
background: var(--card-bg, #f5f5f5);
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.name-cell {
flex: 1;
min-width: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit; gap: $unit-2x;
} flex-grow: 1;
.name { .thumbnail {
font-size: $font-regular; width: 100px;
font-weight: $medium; aspect-ratio: 280 / 160;
color: var(--text-primary); border-radius: $item-corner;
white-space: nowrap; overflow: hidden;
overflow: hidden; background: var(--card-bg, #f5f5f5);
text-overflow: ellipsis; flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.name-cell {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: $unit;
.name {
font-size: $font-regular;
font-weight: $medium;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
} }
.element-cell { .element-cell {
@ -125,7 +135,7 @@
.uncap-cell { .uncap-cell {
width: 100px; width: 100px;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
} }

88
src/lib/components/collection/CollectionWeaponRow.svelte
View file

@ -3,6 +3,7 @@
import { getWeaponImage } from '$lib/utils/images' import { getWeaponImage } from '$lib/utils/images'
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte' import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
import ElementLabel from '$lib/components/labels/ElementLabel.svelte' import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
import ProficiencyLabel from '../labels/ProficiencyLabel.svelte'
interface Props { interface Props {
weapon: CollectionWeapon weapon: CollectionWeapon
@ -31,6 +32,9 @@
// Show instance element for element-changeable, otherwise show weapon's base element // Show instance element for element-changeable, otherwise show weapon's base element
const element = $derived(weapon.weapon?.element === 0 ? weapon.element : weapon.weapon?.element) const element = $derived(weapon.weapon?.element === 0 ? weapon.element : weapon.weapon?.element)
// Weapon proficiency
const proficiency = $derived(weapon.weapon?.proficiency)
// Awakening display // Awakening display
const awakeningDisplay = $derived.by(() => { const awakeningDisplay = $derived.by(() => {
if (!weapon.awakening) return null if (!weapon.awakening) return null
@ -52,18 +56,24 @@
</script> </script>
<button type="button" class="weapon-row" onclick={onClick}> <button type="button" class="weapon-row" onclick={onClick}>
<div class="thumbnail"> <div class="core-info">
<img src={imageUrl} alt={displayName} loading="lazy" /> <div class="thumbnail">
</div> <img src={imageUrl} alt={displayName} loading="lazy" />
</div>
<div class="name-cell"> <div class="name-cell">
<span class="name">{displayName}</span> <span class="name">{displayName}</span>
</div>
</div> </div>
<div class="element-cell"> <div class="element-cell">
<ElementLabel {element} size="medium" /> <ElementLabel {element} size="medium" />
</div> </div>
<div class="proficiency-cell">
<ProficiencyLabel {proficiency} size="medium" />
</div>
<div class="uncap-cell"> <div class="uncap-cell">
<UncapIndicator <UncapIndicator
type="weapon" type="weapon"
@ -87,20 +97,21 @@
</button> </button>
<style lang="scss"> <style lang="scss">
@use '$src/themes/layout' as *;
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as *; @use '$src/themes/typography' as *;
.weapon-row { .weapon-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit-2x; gap: $unit-4x;
padding: $unit $unit-2x $unit $unit; padding: $unit $unit-2x $unit $unit;
border: none; border: none;
background: var(--list-cell-bg); background: var(--list-cell-bg);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-align: left; text-align: left;
border-radius: 12px; border-radius: $card-corner;
transition: transition:
background 0.15s, background 0.15s,
box-shadow 0.15s; box-shadow 0.15s;
@ -116,36 +127,43 @@
} }
} }
.thumbnail { .core-info {
width: 80px;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
background: var(--card-bg, #f5f5f5);
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.name-cell {
flex: 1;
min-width: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit; gap: $unit-2x;
} flex-grow: 1;
.name { .thumbnail {
font-size: $font-regular; width: 100px;
font-weight: $medium; aspect-ratio: 280 / 160;
color: var(--text-primary); border-radius: $item-corner;
white-space: nowrap; overflow: hidden;
overflow: hidden; background: var(--card-bg, #f5f5f5);
text-overflow: ellipsis; flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.name-cell {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: $unit;
.name {
font-size: $font-regular;
font-weight: $medium;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
} }
.element-cell { .element-cell {
@ -155,7 +173,7 @@
.uncap-cell { .uncap-cell {
width: 100px; width: 100px;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
} }