lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: move number alongside bar on empty part until 51%, and them move it

Browse source 
to the filled part
This commit is contained in:
Liordino Neto 2020-11-03 20:31:11 -03:00 • committed by Josh Harvey
parent 106fa166b0
commit f10b49f31c
2 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
View file

@ -15,13 +15,15 @@ const gridClasses = makeStyles(gridStyles)
const Cashbox = ({ percent = 0, cashOut = false, className }) => {
const classes = cashboxClasses({ percent, cashOut })
const threshold = 51
return (
<div className={classnames(className, classes.cashbox)}>
<div className={classes.emptyPart}>
{percent <= 50 && <Label2>{percent.toFixed(0)}%</Label2>}
{percent <= threshold && <Label2>{percent.toFixed(0)}%</Label2>}
</div>
<div className={classes.fullPart}>
{percent > 50 && <Label2>{percent.toFixed(0)}%</Label2>}
{percent > threshold && <Label2>{percent.toFixed(0)}%</Label2>}
</div>
</div>
)

8
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
View file

@ -27,14 +27,18 @@ const cashboxStyles = {
emptyPart: {
backgroundColor: 'white',
height: ({ percent }) => `${100 - percent}%`,
position: 'relative',
'& > p': {
color: colorPicker,
display: 'inline-block'
display: 'inline-block',
position: 'absolute',
margin: 0,
bottom: 0,
right: 0
}
},
fullPart: {
backgroundColor: colorPicker,
height: ({ percent }) => `${percent}%`,
'& > p': {
color: 'white',
display: 'inline'