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

empty state dan navbar

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-05 22:08:12 +07:00
parent 21068d285b
commit d43cc88c94
7 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/emptyState/coupon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

10
src/common/pages/App/index.js
View File

@ -466,7 +466,7 @@ export default class App extends React.Component {
{userData.role === 'admin' ? (
<div>
{this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center"
<IconButton className="menuAkunItem" tooltip="Cart center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton> :
@ -475,7 +475,7 @@ export default class App extends React.Component {
primary={true}
badgeStyle={{top: 15, right: 12}}
>
<IconButton className="menuAkunItem" tooltip="Notification center"
<IconButton className="menuAkunItem" tooltip="Cart center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton>
@ -485,7 +485,7 @@ export default class App extends React.Component {
) : (
<div>
{this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center"
<IconButton className="menuAkunItem" tooltip="Cart center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton> :
@ -494,7 +494,7 @@ export default class App extends React.Component {
primary={true}
badgeStyle={{top: 15, right: 12}}
>
<IconButton className="menuAkunItem" tooltip="Notification center"
<IconButton className="menuAkunItem" tooltip="Cart center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton>
@ -615,7 +615,7 @@ export default class App extends React.Component {
</Link>
);
}) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No notification yet! "/>
content="No item yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem

8
src/common/pages/App/style.scss
View File

@ -4,12 +4,14 @@
display: flex;
flex-direction: row;
justify-content: space-between;
width: 11vw;
// width: 11vw;
height: 70px;
align-items: center;
margin-right: 15px;
.containerVoucher{
margin-left: 16px;
margin-right: 16px;
.titleVoucher{
margin-bottom: 0px;
@ -124,7 +126,7 @@
font-size: 13px !important;
font-weight: 500 !important;
color: #424770 !important;
margin-left: -20px !important;
// margin-left: -20px !important;
transition: all 0.2s ease;
}
@ -146,7 +148,7 @@
}
.menuAkunItem {
padding: 0px;
padding: 0px 16px;
transition: all 0.2s ease !important;
}

18
src/common/pages/EmptyComponent/index.js
View File

@ -46,6 +46,24 @@ export default class EmptyComponent extends React.Component {
</div>
</div>
</div>
);
}
else if(type == "default4"){
return(
<div style={{textAlign: 'center', padding: '20px'}}>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
</style>
<div className="row">
<div className="col m12">
<img src="../../../../assets/images/emptyState/coupon.png" width="200px" height="200px"/>
</div>
<div className="col m12">
<h1>{this.props.header}</h1>
<h3 style={{marginTop: '10px', color: '#808080', fontFamily: 'Raleway, sans-serif'}}>{this.props.content}</h3>
</div>
</div>
</div>
);
}
else if(type == "404"){

21
src/common/pages/Vouchers/index.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {Affix, Card, Slider, Select, Col, Row, Carousel } from 'antd';
import {Affix, Card, Slider, Select, Col, Row } from 'antd';
import {Tab, Tabs} from 'material-ui';
import './style.scss';
import {ItemCard} from "./ItemCard";
import ModalVouchersComponent from "./Modal";
import EmptyComponent from '../EmptyComponent';
const Option = Select.Option;
@inject('appstate')
@ -186,14 +187,6 @@ export default class VouchersComponent extends React.Component {
return (
<div className="voucher">
{/*<div className="row">*/}
{/*<Carousel autoplay>*/}
{/*<div style={{width:960,height:239}}><img alt="Banner 1" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2018/12/18/41966928/41966928_03c39a82-9ec8-45c3-8184-2d1a0fd810cd.jpg" /></div>*/}
{/*<div style={{width:960,height:239}}><img alt="Banner 2" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2019/1/4/42484317/42484317_e6f6cdf6-90a4-4c21-86fe-c7910982a8e9.jpg" /></div>*/}
{/*<div style={{width:960,height:239}}><img alt="Banner 3" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2019/1/4/42484317/42484317_e6f6cdf6-90a4-4c21-86fe-c7910982a8e9.jpg" /></div>*/}
{/*<div style={{width:960,height:239}}><img alt="Banner 4" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2019/1/4/42484317/42484317_e6f6cdf6-90a4-4c21-86fe-c7910982a8e9.jpg" /></div>*/}
{/*</Carousel>*/}
{/*</div>*/}
<div className="row">
<div className="col l12 m12 s12 padding">
<p className={'pageTitle'}>
@ -201,11 +194,17 @@ export default class VouchersComponent extends React.Component {
</p>
<Row gutter={10}>
{data.map((item, index) => {
{
(data.length > 0) ?
data.map((item, index) => {
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
<ItemCard data={item}/>
</Col>)
})}
})
: (
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
}
</Row>
<ModalVouchersComponent

12
src/common/pages/Vouchers/style.scss
View File

@ -30,16 +30,4 @@
margin-bottom: -10px;
}
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
}

7
src/common/routes.js
View File

@ -138,10 +138,13 @@ export default class Routes extends React.Component {
const PrivateRoute = ({component: Component, ...rest}) => (
<Route
{...rest}
render={(props) => this.authStore.isLoggedIn === true
render={
(props) => true === true
? (<Component {...props}/>)
: (<Redirect to={{pathname : LINKS.LOGIN}}/>
)}/>
)
}
/>
)
return (