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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
package-lock.json generated
View File

@ -4961,6 +4961,11 @@
} }
} }
}, },
"css-mediaquery": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
},
"css-select": { "css-select": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz", "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
@ -7014,13 +7019,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -7033,18 +7036,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -7147,8 +7147,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -7158,7 +7157,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -7171,20 +7169,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -7201,7 +7196,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -7274,8 +7268,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -7285,7 +7278,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -7391,7 +7383,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -7894,7 +7885,6 @@
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -7906,18 +7896,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -8007,8 +7994,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -8017,7 +8003,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -8040,7 +8025,6 @@
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -8127,8 +8111,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -8137,7 +8120,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -8223,7 +8205,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -10750,6 +10731,14 @@
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz", "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz",
"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA==" "integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA=="
}, },
"matchmediaquery": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
"integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
"requires": {
"css-mediaquery": "^0.1.2"
}
},
"material-colors": { "material-colors": {
"version": "1.2.6", "version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@ -15129,6 +15118,16 @@
"resize-observer-polyfill": "^1.5.0" "resize-observer-polyfill": "^1.5.0"
} }
}, },
"react-responsive": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-6.1.1.tgz",
"integrity": "sha512-Po6pOEz70Agp+2lUmTxAnhfdkk0zp0IFgo/6bGcxv/S4Pa1sz0YG06WzkrIcASbyKSQ8x6AkcggeozXW3zj3kA==",
"requires": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1"
}
},
"react-responsive-carousel": { "react-responsive-carousel": {
"version": "3.1.46", "version": "3.1.46",
"resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.1.46.tgz", "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.1.46.tgz",

1
package.json
View File

@ -123,6 +123,7 @@
"react-native-vector-icons": "^5.0.0", "react-native-vector-icons": "^5.0.0",
"react-number-format": "^3.0.3", "react-number-format": "^3.0.3",
"react-prop-types": "^0.4.0", "react-prop-types": "^0.4.0",
"react-responsive": "^6.1.1",
"react-responsive-carousel": "^3.1.46", "react-responsive-carousel": "^3.1.46",
"react-router": "^4.2.0", "react-router": "^4.2.0",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",

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

@ -1,24 +1,28 @@
import React from 'react'; import React from 'react';
import {inject, observer} from 'mobx-react'; import {inject, observer} from 'mobx-react';
import { import {
FlatButton,
Divider 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 { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
import {startCase} from 'lodash'; import {startCase} from 'lodash';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';
import './style.scss'; import './style.scss';
import {DIALOG} from "../../../stores/global_ui"; import { withStyles } from '@material-ui/core/styles';
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 get from 'lodash.get'; 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') @inject('appstate')
@observer @observer
export default class CheckoutVouchers extends React.Component { export class CheckoutVouchers extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.props = props; this.props = props;
@ -41,7 +45,7 @@ export default class CheckoutVouchers extends React.Component {
} }
render() { render() {
const {classes} = this.props;
const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200'; const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
let image = logoUrl; let image = logoUrl;
@ -51,7 +55,7 @@ export default class CheckoutVouchers extends React.Component {
} }
return ( return (
<div className="row"> <div className="checkout-parent">
<div className="row"> <div className="row">
<Card> <Card>
<div className=""> <div className="">
@ -61,7 +65,7 @@ export default class CheckoutVouchers extends React.Component {
</h3> </h3>
</div> </div>
</div> </div>
<Divider style={{marginBottom:10,marginTop:10}} /> <Divider component={"div"} className={classes.divider} />
<div className="row" style={{marginTop:30}}> <div className="row" style={{marginTop:30}}>
<div className="col s12 m5 l5"> <div className="col s12 m5 l5">
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}> <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 className="col s12 m7 l7">
<div style={{alignItems:'center', justifyContent: 'center'}}> <div style={{alignItems:'center', justifyContent: 'center'}}>
<Row> <Row>
<div className="col s4 m4"> <div className="col s12 m4">
<h3>Jenis Layanan</h3> <h3>Jenis Layanan</h3>
</div> </div>
<div className="col s1 m1"> <MediaQuery query="(min-device-width: 800px)">
<h3>:</h3> <div className="col s1 m1">
</div> <h3>:</h3>
<div className="col s7 m7"> </div>
</MediaQuery>
<div className="col s12 m7">
<h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3> <h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
</div> </div>
</Row> </Row>
<Row> <Row>
<div className="col s4 m4"> <div className="col s12 m4">
<h3>Point</h3> <h3>Point</h3>
</div> </div>
<div className="col s1 m1"> <MediaQuery query="(min-device-width: 800px)">
<h3>:</h3> <div className="col s1 m1">
</div> <h3>:</h3>
<div className="col s7 m7"> </div>
</MediaQuery>
<div className="col s12 m7">
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3> <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
</div> </div>
</Row> </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{ @media(min-width: 1000px){
max-width: 20vw; .imageCard{
max-height: 20vw; 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 Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step'; import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel'; import StepLabel from '@material-ui/core/StepLabel';
import MediaQuery from 'react-responsive';
const confirm = Modal.confirm; const confirm = Modal.confirm;
@ -167,17 +168,32 @@ export class VoucherStepper extends React.Component {
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/} {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
{/*</div>*/} {/*</div>*/}
<div className={'stepper-container'}> <div className={'stepper-container'}>
<Stepper activeStep={stepIndex}> <MediaQuery query="(min-device-width: 1224px)">
<Step> <Stepper activeStep={stepIndex}>
<StepLabel>Checkout your Voucher</StepLabel> <Step>
</Step> <StepLabel>Checkout your Voucher</StepLabel>
<Step> </Step>
<StepLabel>Process your Payment</StepLabel> <Step>
</Step> <StepLabel>Process your Payment</StepLabel>
<Step> </Step>
<StepLabel>Finish</StepLabel> <Step>
</Step> <StepLabel>Finish</StepLabel>
</Stepper> </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 component="div" className={classes.divider} />
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/} {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
<div style={contentStyle}> <div style={contentStyle}>

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

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