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

Update WeaponResult

Browse source 
Update styling, add UncapIndicator
This commit is contained in:
Justin Edmund 2022-02-28 18:17:30 -08:00
parent 67bd3e8c73
commit 44a92ef1aa
2 changed files with 62 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
components/WeaponResult/index.scss
View file

@ -6,43 +6,61 @@
font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
gap: 8px; gap: 8px;
padding: 12px; padding: 12px;
}
.WeaponResult img { &:hover {
background: #e9e9e9; background: $grey-90;
border-radius: 6px; cursor: pointer;
display: inline-block; }
height: 72px;
width: 120px;
}
.WeaponResult h5 { img {
color: #555; background: #e9e9e9;
display: inline-block; border-radius: 6px;
font-size: $font-large; display: inline-block;
font-weight: 500; height: 72px;
margin: 2px 4px 4px 0; width: 120px;
} }
.WeaponResult .WeaponLabelIcon { .Info {
margin-right: 4px; display: flex;
} flex-direction: column;
flex-grow: 1;
gap: $unit / 2;
.WeaponResult .stars { h5 {
display: inline-block; color: #555;
color: #FFA15E; display: inline-block;
font-size: $font-xlarge; font-size: $font-medium;
} font-weight: $medium;
}
.WeaponResult .stars > span { .UncapIndicator {
color: #65DAFF; justify-content: left;
} pointer-events: none;
}
.WeaponResult:hover { .stars {
background: #e9e9e9; display: inline-block;
cursor: pointer; color: #FFA15E;
} font-size: $font-xlarge;
.WeaponResult:hover .image_placeholder { & > span {
background: #dadada; color: #65DAFF;
}
}
.tags {
display: flex;
flex-direction: row;
gap: $unit / 2;
.WeaponLabelIcon {
$aspect-ratio: calc(25 / 60);
$height: 22px;
background-size: calc($height / $aspect-ratio) $height;
background-repeat: no-repeat;
height: $height;
width: calc($height/ $aspect-ratio);
}
}
}
} }

18
components/WeaponResult/index.tsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import UncapIndicator from '~components/UncapIndicator'
import WeaponLabelIcon from '~components/WeaponLabelIcon' import WeaponLabelIcon from '~components/WeaponLabelIcon'
import './index.scss' import './index.scss'
@ -19,13 +20,18 @@ class WeaponResult extends React.Component<Props> {
return ( return (
<li className="WeaponResult" onClick={this.props.onClick}> <li className="WeaponResult" onClick={this.props.onClick}>
<img alt={weapon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`} /> <img alt={weapon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`} />
<div> <div className="Info">
<div> <h5>{weapon.name.en}</h5>
<h5>{weapon.name.en}</h5> <UncapIndicator
<div className="stars">⭑⭑⭑{(weapon.uncap.flb) ? <span>⭑</span> : ''}{(weapon.uncap.ulb) ? <span>⭑</span> : ''}</div> type="weapon"
flb={weapon.uncap.flb}
ulb={weapon.uncap.ulb}
special={false}
/>
<div className="tags">
<WeaponLabelIcon labelType={Element[weapon.element]} />
<WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
</div> </div>
<WeaponLabelIcon labelType={Element[weapon.element]} />
<WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
</div> </div>
</li> </li>
) )