update: shop page
This commit is contained in:
Rifqy Zacky Ariadhy
parent
aa486bfb0d
commit
5e2aa12cbe
|
|
@ -1,6 +1,6 @@
|
|||
.app-container {
|
||||
.mainContent {
|
||||
width: calc(100vw - 5vw);
|
||||
width: calc(100vw - 14vw);
|
||||
margin-left: 2.5vw;
|
||||
margin-right: 2.5vw;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -553,7 +553,7 @@ export default class All extends React.Component {
|
|||
}
|
||||
|
||||
{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>
|
||||
</Col>)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export class ItemCard extends React.Component {
|
|||
</CardMedia>
|
||||
{/*<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>}/>
|
||||
{/*<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'}}*/}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
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 './style.scss';
|
||||
import All from "./All/index";
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const Option = Select.Option;
|
||||
@inject('appstate')
|
||||
@observer
|
||||
|
|
@ -51,28 +53,94 @@ export default class ItemsComponent extends React.Component {
|
|||
<div className="row">
|
||||
<div className="col l3 m3 s3 no-padding">
|
||||
<Affix offsetTop={90}>
|
||||
<Card title="Filter" bordered={true} style={{ width: '100%' }}>
|
||||
<p>Min. Points</p>
|
||||
<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
|
||||
<Card title="Category" bordered={true} style={{ width: '100%' }}>
|
||||
<Menu style={{
|
||||
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>
|
||||
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
|
||||
{/*<p>Max. Points</p>*/}
|
||||
{/*<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />*/}
|
||||
|
||||
<p style={{marginTop: 25}}>Category</p>
|
||||
<Select
|
||||
showSearch
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Select a category"
|
||||
optionFilterProp="children"
|
||||
onChange={this.handleChange}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||
>
|
||||
<Option value="jack">Electronic</Option>
|
||||
<Option value="lucy">Fashion</Option>
|
||||
<Option value="tom">Food</Option>
|
||||
</Select>
|
||||
{/*<p style={{marginTop: 25}}>Category</p>*/}
|
||||
{/*<Select*/}
|
||||
{/*showSearch*/}
|
||||
{/*style={{ width: '100%' }}*/}
|
||||
{/*placeholder="Select a category"*/}
|
||||
{/*optionFilterProp="children"*/}
|
||||
{/*onChange={this.handleChange}*/}
|
||||
{/*onFocus={this.handleFocus}*/}
|
||||
{/*onBlur={this.handleBlur}*/}
|
||||
{/*// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/}
|
||||
{/*>*/}
|
||||
{/*<Option value="jack">Electronic</Option>*/}
|
||||
{/*<Option value="lucy">Fashion</Option>*/}
|
||||
{/*<Option value="tom">Food</Option>*/}
|
||||
{/*</Select>*/}
|
||||
</Card>
|
||||
</Affix>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ export default class VouchersComponent extends React.Component {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="setting">
|
||||
<div className="voucher">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<p className={'pageTitle'}>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.setting {
|
||||
.voucher {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 20vh;
|
||||
margin-top: 5vh;
|
||||
max-width: 70vw;
|
||||
p.pageTitle{
|
||||
font-size: 1.5rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user