From db0a0fc93718ee90b00312da68e4c4febeee139e Mon Sep 17 00:00:00 2001 From: Rifqy Zacky Ariadhy Date: Tue, 29 Jan 2019 16:37:07 +0700 Subject: [PATCH] fix: responsive layout stepper --- package-lock.json | 71 +++++++++---------- package.json | 1 + src/common/pages/Vouchers/Checkout/index.js | 56 +++++++++------ src/common/pages/Vouchers/Checkout/style.scss | 20 +++++- src/common/pages/Vouchers/Stepper/index.js | 38 +++++++--- src/common/pages/Vouchers/Stepper/style.scss | 18 +++-- 6 files changed, 127 insertions(+), 77 deletions(-) diff --git a/package-lock.json b/package-lock.json index 062ebd4..e8b384b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 97c107f..2f4919b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/common/pages/Vouchers/Checkout/index.js b/src/common/pages/Vouchers/Checkout/index.js index f0f1ac9..ca97bca 100644 --- a/src/common/pages/Vouchers/Checkout/index.js +++ b/src/common/pages/Vouchers/Checkout/index.js @@ -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 ( -
+
@@ -61,7 +65,7 @@ export default class CheckoutVouchers extends React.Component {
- +
@@ -72,24 +76,28 @@ export default class CheckoutVouchers extends React.Component {
-
+

Jenis Layanan

-
-

:

-
-
+ +
+

:

+
+ +

{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}

-
+

Point

-
-

:

-
-
+ +
+

:

+
+ +

{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points

@@ -122,3 +130,5 @@ export default class CheckoutVouchers extends React.Component { ) } } + +export default withStyles(styles)(CheckoutVouchers); diff --git a/src/common/pages/Vouchers/Checkout/style.scss b/src/common/pages/Vouchers/Checkout/style.scss index e928943..429a854 100644 --- a/src/common/pages/Vouchers/Checkout/style.scss +++ b/src/common/pages/Vouchers/Checkout/style.scss @@ -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%; } diff --git a/src/common/pages/Vouchers/Stepper/index.js b/src/common/pages/Vouchers/Stepper/index.js index 1a39608..ca7af00 100644 --- a/src/common/pages/Vouchers/Stepper/index.js +++ b/src/common/pages/Vouchers/Stepper/index.js @@ -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 { {/**/} {/*
*/}
- - - Checkout your Voucher - - - Process your Payment - - - Finish - - + + + + Checkout your Voucher + + + Process your Payment + + + Finish + + + + + + + + + + + + + + + + {/**/}
diff --git a/src/common/pages/Vouchers/Stepper/style.scss b/src/common/pages/Vouchers/Stepper/style.scss index 8a1090f..7729811 100644 --- a/src/common/pages/Vouchers/Stepper/style.scss +++ b/src/common/pages/Vouchers/Stepper/style.scss @@ -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; + } } }