update: shop page

src/common/pages/App/style.scss

@@ -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;

src/common/pages/Items/All/index.js

@@ -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>)
           })}

src/common/pages/Items/ItemCard/index.js

@@ -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'}}*/}

src/common/pages/Items/index.js

@@ -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>

src/common/pages/Vouchers/index.js

@@ -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'}>

src/common/pages/Vouchers/style.scss

@@ -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;