improve collection row layouts
- 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:
parent
6d8e1849eb
commit
f54c5f012e
3 changed files with 152 additions and 115 deletions
|
|
@ -50,20 +50,21 @@
|
|||
</script>
|
||||
|
||||
<button type="button" class="character-row" onclick={onClick}>
|
||||
<div class="thumbnail">
|
||||
<img src={imageUrl} alt={displayName} loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="name-cell">
|
||||
<span class="name">{displayName}</span>
|
||||
{#if character.perpetuity}
|
||||
<img
|
||||
class="perpetuity-badge"
|
||||
src={perpetuityFilled}
|
||||
alt="Perpetuity Ring"
|
||||
title="Perpetuity Ring"
|
||||
/>
|
||||
{/if}
|
||||
<div class="core-info">
|
||||
<div class="thumbnail">
|
||||
<img src={imageUrl} alt={displayName} loading="lazy" />
|
||||
</div>
|
||||
<div class="name-cell">
|
||||
<span class="name">{displayName}</span>
|
||||
{#if character.perpetuity}
|
||||
<img
|
||||
class="perpetuity-badge"
|
||||
src={perpetuityFilled}
|
||||
alt="Perpetuity Ring"
|
||||
title="Perpetuity Ring"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="element-cell">
|
||||
|
|
@ -92,20 +93,21 @@
|
|||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
|
||||
.character-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
gap: $unit-4x;
|
||||
padding: $unit $unit-2x $unit $unit;
|
||||
border: none;
|
||||
background: var(--list-cell-bg);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
border-radius: $card-corner;
|
||||
transition:
|
||||
background 0.15s,
|
||||
box-shadow 0.15s;
|
||||
|
|
@ -121,36 +123,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
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;
|
||||
.core-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
}
|
||||
gap: $unit-2x;
|
||||
flex-grow: 1;
|
||||
|
||||
.name {
|
||||
font-size: $font-regular;
|
||||
font-weight: $medium;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.thumbnail {
|
||||
width: 100px;
|
||||
aspect-ratio: 280 / 160;
|
||||
border-radius: $item-corner;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -162,7 +171,7 @@
|
|||
.uncap-cell {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
// Get transformation suffix for transcendence
|
||||
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 name = summon.summon?.name
|
||||
|
|
@ -28,12 +28,14 @@
|
|||
</script>
|
||||
|
||||
<button type="button" class="summon-row" onclick={onClick}>
|
||||
<div class="thumbnail">
|
||||
<img src={imageUrl} alt={displayName} loading="lazy" />
|
||||
</div>
|
||||
<div class="core-info">
|
||||
<div class="thumbnail">
|
||||
<img src={imageUrl} alt={displayName} loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="name-cell">
|
||||
<span class="name">{displayName}</span>
|
||||
<div class="name-cell">
|
||||
<span class="name">{displayName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="element-cell">
|
||||
|
|
@ -57,20 +59,21 @@
|
|||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
|
||||
.summon-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
gap: $unit-4x;
|
||||
padding: $unit $unit-2x $unit $unit;
|
||||
border: none;
|
||||
background: var(--list-cell-bg);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
border-radius: $card-corner;
|
||||
transition:
|
||||
background 0.15s,
|
||||
box-shadow 0.15s;
|
||||
|
|
@ -86,36 +89,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
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;
|
||||
.core-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
}
|
||||
gap: $unit-2x;
|
||||
flex-grow: 1;
|
||||
|
||||
.name {
|
||||
font-size: $font-regular;
|
||||
font-weight: $medium;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.thumbnail {
|
||||
width: 100px;
|
||||
aspect-ratio: 280 / 160;
|
||||
border-radius: $item-corner;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -125,7 +135,7 @@
|
|||
.uncap-cell {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { getWeaponImage } from '$lib/utils/images'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
|
||||
import ProficiencyLabel from '../labels/ProficiencyLabel.svelte'
|
||||
|
||||
interface Props {
|
||||
weapon: CollectionWeapon
|
||||
|
|
@ -31,6 +32,9 @@
|
|||
// Show instance element for element-changeable, otherwise show weapon's base element
|
||||
const element = $derived(weapon.weapon?.element === 0 ? weapon.element : weapon.weapon?.element)
|
||||
|
||||
// Weapon proficiency
|
||||
const proficiency = $derived(weapon.weapon?.proficiency)
|
||||
|
||||
// Awakening display
|
||||
const awakeningDisplay = $derived.by(() => {
|
||||
if (!weapon.awakening) return null
|
||||
|
|
@ -52,18 +56,24 @@
|
|||
</script>
|
||||
|
||||
<button type="button" class="weapon-row" onclick={onClick}>
|
||||
<div class="thumbnail">
|
||||
<img src={imageUrl} alt={displayName} loading="lazy" />
|
||||
</div>
|
||||
<div class="core-info">
|
||||
<div class="thumbnail">
|
||||
<img src={imageUrl} alt={displayName} loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="name-cell">
|
||||
<span class="name">{displayName}</span>
|
||||
<div class="name-cell">
|
||||
<span class="name">{displayName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="element-cell">
|
||||
<ElementLabel {element} size="medium" />
|
||||
</div>
|
||||
|
||||
<div class="proficiency-cell">
|
||||
<ProficiencyLabel {proficiency} size="medium" />
|
||||
</div>
|
||||
|
||||
<div class="uncap-cell">
|
||||
<UncapIndicator
|
||||
type="weapon"
|
||||
|
|
@ -87,20 +97,21 @@
|
|||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
|
||||
.weapon-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
gap: $unit-4x;
|
||||
padding: $unit $unit-2x $unit $unit;
|
||||
border: none;
|
||||
background: var(--list-cell-bg);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
border-radius: $card-corner;
|
||||
transition:
|
||||
background 0.15s,
|
||||
box-shadow 0.15s;
|
||||
|
|
@ -116,36 +127,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
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;
|
||||
.core-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
}
|
||||
gap: $unit-2x;
|
||||
flex-grow: 1;
|
||||
|
||||
.name {
|
||||
font-size: $font-regular;
|
||||
font-weight: $medium;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.thumbnail {
|
||||
width: 100px;
|
||||
aspect-ratio: 280 / 160;
|
||||
border-radius: $item-corner;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -155,7 +173,7 @@
|
|||
.uncap-cell {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue