Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: responsive layout stepper

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy
2019-01-29 16:37:07 +07:00
parent db161ed8b2
commit db0a0fc937
6 changed files with 127 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/common/pages/Vouchers/Checkout/index.js
View File

@@ -1,24 +1,28 @@
import React from 'react';
import {inject, observer} from 'mobx-react';
import {
FlatButton,
Divider
} from 'material-ui';
} from '@material-ui/core';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
import {startCase} from 'lodash';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';
import './style.scss';
import {DIALOG} from "../../../stores/global_ui";
import EmptyComponent from '../../EmptyComponent';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {LINKS} from "../../../routes";
import {Route} from "react-router-dom";
import { withStyles } from '@material-ui/core/styles';
import get from 'lodash.get';
import MediaQuery from 'react-responsive';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
divider: {
marginBottom: 10,
marginTop: 10,
}
});
@inject('appstate')
@observer
export default class CheckoutVouchers extends React.Component {
export class CheckoutVouchers extends React.Component {
constructor(props) {
super(props);
this.props = props;
@@ -41,7 +45,7 @@ export default class CheckoutVouchers extends React.Component {
}
render() {
const {classes} = this.props;
const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
let image = logoUrl;
@@ -51,7 +55,7 @@ export default class CheckoutVouchers extends React.Component {
}
return (
<div className="row">
<div className="checkout-parent">
<div className="row">
<Card>
<div className="">
@@ -61,7 +65,7 @@ export default class CheckoutVouchers extends React.Component {
</h3>
</div>
</div>
<Divider style={{marginBottom:10,marginTop:10}} />
<Divider component={"div"} className={classes.divider} />
<div className="row" style={{marginTop:30}}>
<div className="col s12 m5 l5">
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
@@ -72,24 +76,28 @@ export default class CheckoutVouchers extends React.Component {
<div className="col s12 m7 l7">
<div style={{alignItems:'center', justifyContent: 'center'}}>
<Row>
<div className="col s4 m4">
<div className="col s12 m4">
<h3>Jenis Layanan</h3>
</div>
<div className="col s1 m1">
<h3>:</h3>
</div>
<div className="col s7 m7">
<MediaQuery query="(min-device-width: 800px)">
<div className="col s1 m1">
<h3>:</h3>
</div>
</MediaQuery>
<div className="col s12 m7">
<h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
</div>
</Row>
<Row>
<div className="col s4 m4">
<div className="col s12 m4">
<h3>Point</h3>
</div>
<div className="col s1 m1">
<h3>:</h3>
</div>
<div className="col s7 m7">
<MediaQuery query="(min-device-width: 800px)">
<div className="col s1 m1">
<h3>:</h3>
</div>
</MediaQuery>
<div className="col s12 m7">
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
</div>
</Row>
@@ -122,3 +130,5 @@ export default class CheckoutVouchers extends React.Component {
)
}
}
export default withStyles(styles)(CheckoutVouchers);