fix: make component centered
This commit is contained in:
parent
fbb2cc0a9b
commit
7a5f61029a
|
|
@ -158,145 +158,149 @@ export default class WalletComponent extends React.Component {
|
|||
}];
|
||||
|
||||
return (
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="row">
|
||||
<div className="col s12">
|
||||
<div style={{marginBottom: '16px'}}>
|
||||
<h3 className="headerMenu">Wallet</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="col s6 m6">
|
||||
<Card className="cardLite row">
|
||||
<CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col s6 m6">
|
||||
<Card className="cardLite row">
|
||||
<CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wallet">
|
||||
<div className="row">
|
||||
<div className={"col s10 offset-s1"}>
|
||||
<div className={"row"}>
|
||||
<div className="col s12">
|
||||
<div style={{marginBottom: '16px'}}>
|
||||
<h3 className="headerMenu">Wallet</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s6 m6">
|
||||
<Card className="cardLite row">
|
||||
<CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col s6 m6">
|
||||
<Card className="cardLite row">
|
||||
<CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col s12">
|
||||
<Card className="cardLite" style={{paddingBottom: 5}}>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search Redeem History"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
fullWidth={true}
|
||||
underlineShow={false}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup className="ToolbarGroupLast">
|
||||
<ToolbarSeparator/>
|
||||
{(window.innerWidth < 600) ?
|
||||
<div className="flexSpaceBetween">
|
||||
<IconMenu
|
||||
iconButtonElement={<IconButton><MoreIcon/></IconButton>}
|
||||
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||
targetOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||
>
|
||||
<MenuItem primaryText="Deposit"
|
||||
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
|
||||
<MenuItem primaryText="Withdrawal"
|
||||
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
|
||||
</IconMenu>
|
||||
</div>
|
||||
:
|
||||
<div className="col s12">
|
||||
<Card className="cardLite" style={{paddingBottom: 5}}>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search Redeem History"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
fullWidth={true}
|
||||
underlineShow={false}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup className="ToolbarGroupLast">
|
||||
<ToolbarSeparator/>
|
||||
{(window.innerWidth < 600) ?
|
||||
<div className="flexSpaceBetween">
|
||||
<IconMenu
|
||||
iconButtonElement={<IconButton><MoreIcon/></IconButton>}
|
||||
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||
targetOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||
>
|
||||
<MenuItem primaryText="Deposit"
|
||||
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
|
||||
<MenuItem primaryText="Withdrawal"
|
||||
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
|
||||
</IconMenu>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
{/*<RaisedButton*/}
|
||||
{/*className=""*/}
|
||||
{/*icon={<UnarchiveIcon/>}*/}
|
||||
{/*label="Deposit"*/}
|
||||
{/*style={{marginRight: 20}}*/}
|
||||
{/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
|
||||
{/*primary={true}/>*/}
|
||||
<RaisedButton
|
||||
className="ToolbarGroupLastButton"
|
||||
icon={<UnarchiveIcon/>}
|
||||
label="Top Up"
|
||||
onClick={() => this.setModalTopup(true)}
|
||||
primary={true}/>
|
||||
</div>
|
||||
}
|
||||
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div>
|
||||
{/*<RaisedButton*/}
|
||||
{/*className=""*/}
|
||||
{/*icon={<UnarchiveIcon/>}*/}
|
||||
{/*label="Deposit"*/}
|
||||
{/*style={{marginRight: 20}}*/}
|
||||
{/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
|
||||
{/*primary={true}/>*/}
|
||||
<RaisedButton
|
||||
className="ToolbarGroupLastButton"
|
||||
icon={<UnarchiveIcon/>}
|
||||
label="Top Up"
|
||||
onClick={() => this.setModalTopup(true)}
|
||||
primary={true}/>
|
||||
</div>
|
||||
}
|
||||
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div>
|
||||
<Loader show={false} message={<LoadingDialog/>}
|
||||
messageStyle={{textAlign: 'center'}}
|
||||
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||
<TableAntd
|
||||
pagination={true}
|
||||
className='table-padded tableWallet'
|
||||
dataSource={data}
|
||||
// onChange={this.handleChangeSorter}
|
||||
columns={columns}
|
||||
// onRow={(record) => {`
|
||||
// return {
|
||||
// onClick: () => {
|
||||
// this.props.history.push(`${LINKS.ORDER}/${record.id}`);
|
||||
// }, // click row
|
||||
// };
|
||||
// }}
|
||||
/>
|
||||
{/*<Table selectable={false}>*/}
|
||||
{/*<TableHeader displaySelectAll={false}*/}
|
||||
{/*adjustForCheckbox={false}*/}
|
||||
{/*enableSelectAll={false}>*/}
|
||||
{/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
|
||||
<Loader show={false} message={<LoadingDialog/>}
|
||||
messageStyle={{textAlign: 'center'}}
|
||||
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||
<TableAntd
|
||||
pagination={true}
|
||||
className='table-padded tableWallet'
|
||||
dataSource={data}
|
||||
// onChange={this.handleChangeSorter}
|
||||
columns={columns}
|
||||
// onRow={(record) => {`
|
||||
// return {
|
||||
// onClick: () => {
|
||||
// this.props.history.push(`${LINKS.ORDER}/${record.id}`);
|
||||
// }, // click row
|
||||
// };
|
||||
// }}
|
||||
/>
|
||||
{/*<Table selectable={false}>*/}
|
||||
{/*<TableHeader displaySelectAll={false}*/}
|
||||
{/*adjustForCheckbox={false}*/}
|
||||
{/*enableSelectAll={false}>*/}
|
||||
{/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
|
||||
{/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
|
||||
{/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
|
||||
{/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
|
||||
{/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*</TableHeader>*/}
|
||||
{/*<TableBody displayRowCheckbox={false}>*/}
|
||||
{/*{*/}
|
||||
{/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*</TableHeader>*/}
|
||||
{/*<TableBody displayRowCheckbox={false}>*/}
|
||||
{/*{*/}
|
||||
{/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}
|
||||
|
||||
{/*return (*/}
|
||||
{/*<TableRow key={index}>*/}
|
||||
{/*<TableRowColumn style={{width:'13%'}}>*/}
|
||||
{/*{item.id.split('-')[0]}*/}
|
||||
{/*</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
|
||||
{/*thousandSeparator={true}*/}
|
||||
{/*prefix={'IDR '}/></TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*);*/}
|
||||
{/*return (*/}
|
||||
{/*<TableRow key={index}>*/}
|
||||
{/*<TableRowColumn style={{width:'13%'}}>*/}
|
||||
{/*{item.id.split('-')[0]}*/}
|
||||
{/*</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
|
||||
{/*thousandSeparator={true}*/}
|
||||
{/*prefix={'IDR '}/></TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*);*/}
|
||||
{/*})*/}
|
||||
{/*}*/}
|
||||
{/*{*/}
|
||||
{/*}*/}
|
||||
{/*{*/}
|
||||
{/*(this.transactionStore.list.length === 0) ?*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn>*/}
|
||||
{/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
|
||||
{/*</TableRowColumn>*/}
|
||||
{/*</TableRow> : ""*/}
|
||||
{/*}*/}
|
||||
{/*</TableBody>*/}
|
||||
{/*</Table>*/}
|
||||
</Loader>
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn>*/}
|
||||
{/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
|
||||
{/*</TableRowColumn>*/}
|
||||
{/*</TableRow> : ""*/}
|
||||
{/*}*/}
|
||||
{/*</TableBody>*/}
|
||||
{/*</Table>*/}
|
||||
</Loader>
|
||||
</div>
|
||||
</Card></div>
|
||||
</div>
|
||||
</Card></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
||||
</div>
|
||||
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user