List styling

This commit is contained in:
2019-06-03 11:42:33 +10:00
parent 96d482317c
commit f456113467
8 changed files with 143 additions and 77 deletions
+17 -8
View File
@@ -36,16 +36,25 @@ class Equipment extends React.Component {
<p className='col centered truncate'>Name</p>
<p className='col centered truncate'>Type</p>
<p className='col centered truncate'>Owned</p>
<p className='col centered truncate'>Buy</p>
<p className='col centered truncate'>Sell</p>
<p className='col centered truncate mobile hide'>Buy</p>
<p className='col centered truncate mobile hide'>Sell</p>
</div>
{Object.keys(display).map((key) => <div className='row' key={key}>
<p className='col centered truncate'>{display[key].name}</p>
<p className='col centered truncate'>{display[key].type}</p>
<p className='col centered truncate'>{display[key].owned}</p>
{display[key].purchasable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentpurchaserequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].cost > this.props.gold}>Buy ({display[key].cost} gold)</button> : <div className='col centered truncate' />}
{display[key].saleable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentsellrequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].owned === 0}>Sell ({Math.floor(display[key].cost/2)} gold)</button> : <div className='col centered truncate' />}
<hr className='mobile show' />
{Object.keys(display).map((key) => <div key={key}>
<hr className='mobile hide'/>
<div className='break' />
<div className='row'>
<p className='col centered truncate equipmentTextPadding'>{display[key].name}</p>
<p className='col centered truncate equipmentTextPadding'>{display[key].type}</p>
<p className='col centered truncate equipmentTextPadding'>{display[key].owned}</p>
<div className='col row noCollapse' style={{flex: '1 1 20%'}}>
{display[key].purchasable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentpurchaserequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].cost > this.props.gold}>Buy ({display[key].cost} gold)</button> : <div className='col centered truncate' />}
{display[key].saleable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentsellrequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].owned === 0}>Sell ({Math.floor(display[key].cost/2)} gold)</button> : <div className='col centered truncate' />}
</div>
</div>
<div className='break' />
</div>)}
</div>
</div>