fix: responsive layout stepper
This commit is contained in:
Rifqy Zacky Ariadhy
parent
db161ed8b2
commit
db0a0fc937
71
package-lock.json
generated
71
package-lock.json
generated
|
|
@ -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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
|
||||
|
|
@ -7014,13 +7019,11 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -7033,18 +7036,15 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -7147,8 +7147,7 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -7158,7 +7157,6 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -7171,20 +7169,17 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -7201,7 +7196,6 @@
|
|||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -7274,8 +7268,7 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -7285,7 +7278,6 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -7391,7 +7383,6 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -7894,7 +7885,6 @@
|
|||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -7906,18 +7896,15 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -8007,8 +7994,7 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -8017,7 +8003,6 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -8040,7 +8025,6 @@
|
|||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -8127,8 +8111,7 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -8137,7 +8120,6 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -8223,7 +8205,6 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^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",
|
||||
"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": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
|
||||
|
|
@ -15129,6 +15118,16 @@
|
|||
"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": {
|
||||
"version": "3.1.46",
|
||||
"resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.1.46.tgz",
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@
|
|||
"react-native-vector-icons": "^5.0.0",
|
||||
"react-number-format": "^3.0.3",
|
||||
"react-prop-types": "^0.4.0",
|
||||
"react-responsive": "^6.1.1",
|
||||
"react-responsive-carousel": "^3.1.46",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<MediaQuery query="(min-device-width: 800px)">
|
||||
<div className="col s1 m1">
|
||||
<h3>:</h3>
|
||||
</div>
|
||||
<div className="col s7 m7">
|
||||
</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>
|
||||
<MediaQuery query="(min-device-width: 800px)">
|
||||
<div className="col s1 m1">
|
||||
<h3>:</h3>
|
||||
</div>
|
||||
<div className="col s7 m7">
|
||||
</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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,18 @@
|
|||
@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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,6 +168,7 @@ export class VoucherStepper extends React.Component {
|
|||
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
|
||||
{/*</div>*/}
|
||||
<div className={'stepper-container'}>
|
||||
<MediaQuery query="(min-device-width: 1224px)">
|
||||
<Stepper activeStep={stepIndex}>
|
||||
<Step>
|
||||
<StepLabel>Checkout your Voucher</StepLabel>
|
||||
|
|
@ -178,6 +180,20 @@ export class VoucherStepper extends React.Component {
|
|||
<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}>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,20 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
//background-color: #fff;
|
||||
@media(min-width: 1000px){
|
||||
.divider-container{
|
||||
max-width: 75vw;
|
||||
width: 60vw;
|
||||
}
|
||||
.stepper-container{
|
||||
max-width: 75vw;
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
@media(max-width: 999px){
|
||||
.divider-container{
|
||||
width: 90vw;
|
||||
}
|
||||
.stepper-container{
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user