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

update: shop page

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy 2019-01-03 21:56:17 +07:00
parent aa486bfb0d
commit 5e2aa12cbe
6 changed files with 95 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
.app-container { .app-container {
.mainContent { .mainContent {
width: calc(100vw - 5vw); width: calc(100vw - 14vw);
margin-left: 2.5vw; margin-left: 2.5vw;
margin-right: 2.5vw; margin-right: 2.5vw;
position: relative; position: relative;

2
src/common/pages/Items/All/index.js
View File

@ -553,7 +553,7 @@ export default class All extends React.Component {
} }
{data.map(item => { {data.map(item => {
return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}> return (<Col key={item.id} className="gutter-row col" span={6} style={{marginBottom: 20}}>
<div className="gutter-box"><ItemCard data={item}/></div> <div className="gutter-box"><ItemCard data={item}/></div>
</Col>) </Col>)
})} })}

2
src/common/pages/Items/ItemCard/index.js
View File

@ -43,7 +43,7 @@ export class ItemCard extends React.Component {
</CardMedia> </CardMedia>
{/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/} {/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/}
<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}} <CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 25) ? data.name.substring(0,24)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}
subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/> subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/>
{/*<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}*/} {/*<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}*/}
{/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/} {/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/}

110
src/common/pages/Items/index.js
View File

@ -1,11 +1,13 @@
import React from 'react'; import React from 'react';
import {inject, observer} from 'mobx-react'; import {inject, observer} from 'mobx-react';
import {Link} from 'react-router'; import {Link} from 'react-router';
import { Affix, Card, Slider, Select } from 'antd'; import { Affix, Card, Slider, Select, Menu } from 'antd';
import {Tab, Tabs} from 'material-ui'; import {Tab, Tabs} from 'material-ui';
import './style.scss'; import './style.scss';
import All from "./All/index"; import All from "./All/index";
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Option = Select.Option; const Option = Select.Option;
@inject('appstate') @inject('appstate')
@observer @observer
@ -51,28 +53,94 @@ export default class ItemsComponent extends React.Component {
<div className="row"> <div className="row">
<div className="col l3 m3 s3 no-padding"> <div className="col l3 m3 s3 no-padding">
<Affix offsetTop={90}> <Affix offsetTop={90}>
<Card title="Filter" bordered={true} style={{ width: '100%' }}> <Card title="Category" bordered={true} style={{ width: '100%' }}>
<p>Min. Points</p> <Menu style={{
<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} /> border: '0px'
}} mode="vertical">
<SubMenu key="sub1" title={<span><span>Fashion</span></span>}>
<SubMenu key={'sub1a'} title={'Woman'}>
<Menu.Item key="1a">Dress</Menu.Item>
<Menu.Item key="2a">Outwear</Menu.Item>
<Menu.Item key="3a">Pyjamas</Menu.Item>
<Menu.Item key="4a">Jacket</Menu.Item>
<Menu.Item key="5a">Shoes</Menu.Item>
</SubMenu>
<SubMenu key={'sub1b'} title={'Man'}>
<Menu.Item key="1b">Batik</Menu.Item>
<Menu.Item key="2b">Outwear</Menu.Item>
<Menu.Item key="3b">Suit</Menu.Item>
<Menu.Item key="4b">Jacket</Menu.Item>
<Menu.Item key="5b">Shoes</Menu.Item>
</SubMenu>
<SubMenu key={'sub1c'} title={'Costume'}>
<Menu.Item key="1c">Man</Menu.Item>
<Menu.Item key="2c">Woman</Menu.Item>
<Menu.Item key="3c">Child</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub2" title={<span><span>Phone, Tablet & Gadget</span></span>}>
<SubMenu key={'sub2a'} title={'Smartphone'}>
<Menu.Item key="1a">iPhone</Menu.Item>
<Menu.Item key="2a">Samsung</Menu.Item>
<Menu.Item key="3a">Meizu</Menu.Item>
<Menu.Item key="4a">Xiaomi</Menu.Item>
<Menu.Item key="5a">Oppo</Menu.Item>
</SubMenu>
<SubMenu key={'sub2b'} title={'Feature Phone'}>
<Menu.Item key="1a">Samsung</Menu.Item>
<Menu.Item key="2a">Nokia</Menu.Item>
<Menu.Item key="3a">Other Basic</Menu.Item>
</SubMenu>
<SubMenu key={'sub2c'} title={'Accessories'}>
<Menu.Item key="1a">Casing</Menu.Item>
<Menu.Item key="2a">Battery and Charging Component</Menu.Item>
<Menu.Item key="3a">Screen Shield</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub3" title={<span><span>Computer, Office & Peripherals</span></span>}>
<SubMenu key={'sub3a'} title={'Laptop'}>
<Menu.Item key="1a">MacBook</Menu.Item>
<Menu.Item key="2a">Notebook</Menu.Item>
<Menu.Item key="3a">Premium & Ultra Book</Menu.Item>
<Menu.Item key="4a">Business</Menu.Item>
<Menu.Item key="5a">Gaming</Menu.Item>
</SubMenu>
<SubMenu key={'sub3b'} title={'PC'}>
<Menu.Item key="1a">Mac</Menu.Item>
<Menu.Item key="2a">Desktop</Menu.Item>
<Menu.Item key="3a">Mini PC</Menu.Item>
<Menu.Item key="4a">Gaming</Menu.Item>
<Menu.Item key="5a">Server</Menu.Item>
</SubMenu>
<SubMenu key={'sub3c'} title={'Accessories'}>
<Menu.Item key="1a">Mouse</Menu.Item>
<Menu.Item key="2a">Keyboard</Menu.Item>
<Menu.Item key="3a">Headphone</Menu.Item>
<Menu.Item key="4a">Other</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
{/*<p>Min. Points</p>*/}
{/*<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />*/}
<p>Max. Points</p> {/*<p>Max. Points</p>*/}
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} /> {/*<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />*/}
<p style={{marginTop: 25}}>Category</p> {/*<p style={{marginTop: 25}}>Category</p>*/}
<Select {/*<Select*/}
showSearch {/*showSearch*/}
style={{ width: '100%' }} {/*style={{ width: '100%' }}*/}
placeholder="Select a category" {/*placeholder="Select a category"*/}
optionFilterProp="children" {/*optionFilterProp="children"*/}
onChange={this.handleChange} {/*onChange={this.handleChange}*/}
onFocus={this.handleFocus} {/*onFocus={this.handleFocus}*/}
onBlur={this.handleBlur} {/*onBlur={this.handleBlur}*/}
// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} {/*// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/}
> {/*>*/}
<Option value="jack">Electronic</Option> {/*<Option value="jack">Electronic</Option>*/}
<Option value="lucy">Fashion</Option> {/*<Option value="lucy">Fashion</Option>*/}
<Option value="tom">Food</Option> {/*<Option value="tom">Food</Option>*/}
</Select> {/*</Select>*/}
</Card> </Card>
</Affix> </Affix>
</div> </div>

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

@ -216,7 +216,7 @@ export default class VouchersComponent extends React.Component {
]; ];
return ( return (
<div className="setting"> <div className="voucher">
<div className="row"> <div className="row">
<div className="col l12 m12 s12 padding"> <div className="col l12 m12 s12 padding">
<p className={'pageTitle'}> <p className={'pageTitle'}>

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

@ -1,7 +1,7 @@
.setting { .voucher {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 20vh; margin-top: 5vh;
max-width: 70vw; max-width: 70vw;
p.pageTitle{ p.pageTitle{
font-size: 1.5rem; font-size: 1.5rem;