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

update: responsive layout

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy 2019-01-29 16:45:35 +07:00
parent db0a0fc937
commit 7b4dfa2a66
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,7 +56,7 @@ export class CheckoutVouchers extends React.Component {
return ( return (
<div className="checkout-parent"> <div className="checkout-parent">
<div className="row"> <div className="upper-card">
<Card> <Card>
<div className=""> <div className="">
<div style={{display:'flex',justifyContent:'center'}}> <div style={{display:'flex',justifyContent:'center'}}>
@ -74,7 +74,7 @@ export class CheckoutVouchers extends React.Component {
</div> </div>
</div> </div>
<div className="col s12 m7 l7"> <div className="col s12 m7 l7">
<div style={{alignItems:'center', justifyContent: 'center'}}> <div className={'right-container'}>
<Row> <Row>
<div className="col s12 m4"> <div className="col s12 m4">
<h3>Jenis Layanan</h3> <h3>Jenis Layanan</h3>
@ -106,8 +106,8 @@ export class CheckoutVouchers extends React.Component {
</div> </div>
</Card> </Card>
</div> </div>
<div className="row"> <div className="bottom-card">
<Card > <Card>
<div className="row"> <div className="row">
<div style={{display:'flex',justifyContent:'space-between'}}> <div style={{display:'flex',justifyContent:'space-between'}}>
<h3 style={{color:''}}>Point</h3> <h3 style={{color:''}}>Point</h3>

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

@ -1,16 +1,47 @@
@media(min-width: 1000px){ @media(min-width: 1000px){
.imageCard{ .imageCard{
max-width: 20vw; width: 20vw;
max-height: 20vw; height: 25vh;
}
.upper-card{
width: 60vw;
margin-left: -1vw;
margin-bottom: 15px;
}
.bottom-card{
width: 60vw;
margin-left: -1vw;
}
.right-container{
//background-color: red;
height: 25vh;
display: flex;
flex-direction: column;
justify-content: center;
//align-items: center;
} }
} }
@media(max-width: 999px){ @media(max-width: 999px){
.imageCard{ .imageCard{
max-width: 80vw; width: 80vw;
max-height: 80vw; height: 25vh;
margin-bottom: 30px; margin-bottom: 30px;
} }
.upper-card{
width: 90vw;
margin-left: -3.5vw;
margin-bottom: 15px;
}
.bottom-card{
width: 90vw;
margin-left: -3.5vw;
}
} }
.checkout-parent{ .checkout-parent{