show item names in collection cards

This commit is contained in:
Justin Edmund 2025-12-14 02:06:34 -08:00
parent 7f9398efbd
commit c90da7ad4e
3 changed files with 32 additions and 1 deletions

View file

@ -54,6 +54,7 @@
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as typography;
.character-card { .character-card {
display: flex; display: flex;
@ -103,6 +104,12 @@
} }
.character-name { .character-name {
display: none; font-size: typography.$font-small;
color: var(--text-tertiary);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
} }
</style> </style>

View file

@ -35,10 +35,12 @@
ulb={summon.summon?.uncap?.ulb} ulb={summon.summon?.uncap?.ulb}
transcendence={summon.summon?.uncap?.transcendence} transcendence={summon.summon?.uncap?.transcendence}
/> />
<span class="summon-name">{displayName}</span>
</button> </button>
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as typography;
.summon-card { .summon-card {
display: flex; display: flex;
@ -76,4 +78,14 @@
object-fit: contain; object-fit: contain;
border-radius: 8px; border-radius: 8px;
} }
.summon-name {
font-size: typography.$font-small;
color: var(--text-tertiary);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
</style> </style>

View file

@ -40,10 +40,12 @@
ulb={weapon.weapon?.uncap?.ulb} ulb={weapon.weapon?.uncap?.ulb}
transcendence={weapon.weapon?.uncap?.transcendence} transcendence={weapon.weapon?.uncap?.transcendence}
/> />
<span class="weapon-name">{displayName}</span>
</button> </button>
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as typography;
.weapon-card { .weapon-card {
display: flex; display: flex;
@ -81,4 +83,14 @@
object-fit: contain; object-fit: contain;
border-radius: 8px; border-radius: 8px;
} }
.weapon-name {
font-size: typography.$font-small;
color: var(--text-tertiary);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
</style> </style>