Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-28 14:18:04 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Object DMG Calc: Fix weapon images getting squished

Browse Source
This commit is contained in:
Kalle
2023-04-11 17:38:37 +03:00
parent 1061a3901d
commit 515eb42987
2 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/features/object-damage-calculator/calculator.css
View File

@@ -52,10 +52,14 @@
white-space: nowrap;
}
.object-damage__weapon-image {
min-width: 24px;
}
.object-damage__distance {
color: var(--text-lighter);
font-size: var(--fonts-xxs);
margin-block-start: var(--s-1);
margin-block-start: var(--s-0-5);
}
.object-damage__receiver-image {

35
app/features/object-damage-calculator/routes/object-damage-calculator.tsx
View File

@@ -246,24 +246,13 @@ function DamageReceiversGrid({
<div>{children}</div>
{damagesToReceivers[0]?.damages.map((damage) => (
<div key={damage.id} className="object-damage__table-header">
<div className="stack xs">
<div className="stack horizontal sm justify-center items-center">
{t(
damageTypeTranslationString({
damageType: damage.type,
})
)}
{damage.objectShredder && <Ability ability="OS" size="TINY" />}
</div>
<div className="text-lighter stack horizontal sm justify-center items-center">
<WeaponImage
weaponSplId={weapon.id}
width={24}
height={24}
variant="build"
/>
{t(`weapons:MAIN_${weapon.id}`)}
</div>
<div className="stack horizontal sm justify-center items-center">
{t(
damageTypeTranslationString({
damageType: damage.type,
})
)}
{damage.objectShredder && <Ability ability="OS" size="TINY" />}
</div>
<div
className={clsx("object-damage__distance", {
@@ -272,6 +261,16 @@ function DamageReceiversGrid({
>
{t("analyzer:distanceInline", { value: damage.distance })}
</div>
<div className="text-lighter stack horizontal sm justify-center items-center">
<WeaponImage
weaponSplId={weapon.id}
width={24}
height={24}
variant="build"
className="object-damage__weapon-image"
/>
{t(`weapons:MAIN_${weapon.id}`)}
</div>
</div>
))}
{damagesToReceivers.map((damageToReceiver, i) => {