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);

20
src/common/pages/Vouchers/Checkout/style.scss
View File

@@ -1,4 +1,18 @@
.imageCard{
max-width: 20vw;
max-height: 20vw;
@media(min-width: 1000px){
.imageCard{
max-width: 20vw;
max-height: 20vw;
}
}
@media(max-width: 999px){
.imageCard{
max-width: 80vw;
max-height: 80vw;
margin-bottom: 30px;
}
}
.checkout-parent{
//width: 100%;
}

38
src/common/pages/Vouchers/Stepper/index.js
View File

@@ -16,6 +16,7 @@ import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import MediaQuery from 'react-responsive';
const confirm = Modal.confirm;
@@ -167,17 +168,32 @@ export class VoucherStepper extends React.Component {
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
{/*</div>*/}
<div className={'stepper-container'}>
<Stepper activeStep={stepIndex}>
<Step>
<StepLabel>Checkout your Voucher</StepLabel>
</Step>
<Step>
<StepLabel>Process your Payment</StepLabel>
</Step>
<Step>
<StepLabel>Finish</StepLabel>
</Step>
</Stepper>
<MediaQuery query="(min-device-width: 1224px)">
<Stepper activeStep={stepIndex}>
<Step>
<StepLabel>Checkout your Voucher</StepLabel>
</Step>
<Step>
<StepLabel>Process your Payment</StepLabel>
</Step>
<Step>
<StepLabel>Finish</StepLabel>
</Step>
</Stepper>
</MediaQuery>
<MediaQuery query="(max-device-width: 1224px)">
<Stepper activeStep={stepIndex}>
<Step>
<StepLabel></StepLabel>
</Step>
<Step>
<StepLabel></StepLabel>
</Step>
<Step>
<StepLabel></StepLabel>
</Step>
</Stepper>
</MediaQuery>
<Divider component="div" className={classes.divider} />
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
<div style={contentStyle}>

18
src/common/pages/Vouchers/Stepper/style.scss
View File

@@ -4,10 +4,20 @@
justify-content: center;
align-items: center;
//background-color: #fff;
.divider-container{
max-width: 75vw;
@media(min-width: 1000px){
.divider-container{
width: 60vw;
}
.stepper-container{
width: 60vw;
}
}
.stepper-container{
max-width: 75vw;
@media(max-width: 999px){
.divider-container{
width: 90vw;
}
.stepper-container{
width: 90vw;
}
}
}