From 59f570394b30581d58f0bfbf9971b1bce6408185 Mon Sep 17 00:00:00 2001
From: srgooglo <38926803+srgooglo@users.noreply.github.com>
Date: Thu, 12 Mar 2020 19:51:45 +0100
Subject: [PATCH] 0.2.12A2

---
 config/ycore.config.js                        | 10 --
 package.json                                  |  2 +-
 src/@ycore/ycore_worker.js                    |  2 +-
 src/components/Layout/Sider.js                | 25 +++--
 src/components/MainFeed/index.js              | 22 ++++-
 src/components/UserProfile/index.js           |  9 +-
 src/pages/__m/index.js                        | 14 +++
 src/pages/g/$group/index.js                   | 97 +++++++++++++++++++
 src/pages/g/$group/styles.less                | 18 ++++
 src/pages/hamza/index.js                      | 14 ---
 src/pages/settings/components/base.js         |  3 +
 src/pages/settings/components/notification.js | 50 ++--------
 .../settings/components/notification.less     | 16 +++
 src/pages/settings/components/security.js     | 87 ++---------------
 src/pages/settings/components/security.less   | 16 +++
 src/pages/settings/index.js                   | 51 ++++------
 src/pages/settings/style.less                 | 54 +++--------
 17 files changed, 263 insertions(+), 227 deletions(-)
 create mode 100644 src/pages/g/$group/index.js
 create mode 100644 src/pages/g/$group/styles.less
 delete mode 100755 src/pages/hamza/index.js
 create mode 100644 src/pages/settings/components/notification.less
 create mode 100644 src/pages/settings/components/security.less

diff --git a/config/ycore.config.js b/config/ycore.config.js
index e77e61ec..26b3cdc0 100755
--- a/config/ycore.config.js
+++ b/config/ycore.config.js
@@ -8,14 +8,7 @@ module.exports = {
     DarkFullLogoPath: '/dark_full_logo.svg',
     DarkLogoPath: '/dark_logo.svg',
 
-    apiPrefix: '/api/v1',
-    fixedHeader: true, // sticky primary layout header
     resource_bundle: 'light_ng',
-
-    App_Config: {
-      InitRes: { width: 1000, height: 900},
-      InitOpenConsole: true,
-    },
   
     /* Layout configuration, specify which layout to use for route. */
     layouts: [
@@ -29,13 +22,10 @@ module.exports = {
       //  Disused Variables, exported from yCoreWorker
       // Global Server Key (Requiered for RS-YIBTP), Not autogenerated, must be included on. (Recommended not modify this constants)
       server_key: "f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768",
-      openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a',
     },
     
     
-    /* I18n configuration, `languages` and `defaultLanguage` are required currently. */
     i18n: {
-      /* Countrys flags: https://www.flaticon.com/packs/countrys-flags */
       languages: [    
         {
           key: 'en',
diff --git a/package.json b/package.json
index 21bb1e02..4e4d89fb 100755
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@material-ui/icons": "^4.9.1",
     "@steveeeie/react-page-transition": "^1.1.2",
     "ant-design-pro": "^2.3.2",
-    "antd": "^4.0.1",
+    "antd": "^4.0.2",
     "autoprefixer": "9.7.4",
     "axios": "^0.19.2",
     "babel-core": "7.0.0-bridge.0",
diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js
index 4f8d7c3e..e1d83124 100755
--- a/src/@ycore/ycore_worker.js
+++ b/src/@ycore/ycore_worker.js
@@ -152,7 +152,7 @@ export const crouter = {
 export function notifyError(err){
     antd.notification.error({
         message: 'Wopss',
-        description: (<div><span>An wild error appear! : </span><br/><br/><div style={{ position: 'absolute', width: '100%',backgroundColor: 'rgba(243, 19, 19, 0.329)', bottom: '0', color: 'black', padding: '3px' }} >{err.toString()}</div></div>),
+        description: (<div><span>An wild error appear! : </span><br/><br/><div style={{ position: 'relative', width: '100%',backgroundColor: 'rgba(243, 19, 19, 0.329)', bottom: '0', color: 'black', padding: '3px' }} >{err.toString()}</div></div>),
         placement: 'bottomLeft'
     })
 }
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
index 43466502..1db140ba 100755
--- a/src/components/Layout/Sider.js
+++ b/src/components/Layout/Sider.js
@@ -106,22 +106,35 @@ class Sider extends PureComponent {
                           <Icons.CompassOutlined />
                           <Trans><span>Explore</span></Trans> 
                       </antd.Menu.Item> 
+
+                      <antd.Menu.Item key="general_settings">
+                        <Icons.ReadOutlined />
+                        <Trans><span>Journal</span></Trans>
+                      </antd.Menu.Item>
+                      
+                      <antd.Menu.Item key="general_settings">
+                        <Icons.ReconciliationOutlined />
+                        <Trans><span>Marketplace</span></Trans>
+                      </antd.Menu.Item>
+                      
+                    
+                    </antd.Menu>
+                   
+                    <div className={styles.something_thats_pulling_me_down}>
+                    <antd.Menu selectable={false} className={collapsed ?  styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
+                       
                       <antd.Menu.Item key="general_settings">
                         <Icons.SettingOutlined/>
                         <Trans><span>Settings</span></Trans>
                       </antd.Menu.Item>
                       {ycore.booleanFix(userData.admin)? 
                         <antd.Menu.Item key="admin_area">
-                          <Icons.ToolOutlined />
-                          <Trans><span>Admin Area</span></Trans>
+                          <Icons.ThunderboltOutlined />
+                          <Trans><span>{userData.username}</span></Trans>
                         </antd.Menu.Item> 
                             : 
                         undefined
                       }
-                    </antd.Menu>
-                   
-                    <div className={styles.something_thats_pulling_me_down}>
-                    <antd.Menu selectable={false} className={collapsed ?  styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
                         <antd.Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} >
                         {collapsed? <Icons.BulbOutlined /> :
                             <div className={styles.themeSwitcher}>
diff --git a/src/components/MainFeed/index.js b/src/components/MainFeed/index.js
index 02c2b63a..09a7f718 100755
--- a/src/components/MainFeed/index.js
+++ b/src/components/MainFeed/index.js
@@ -15,6 +15,7 @@ class MainFeed extends React.Component {
         super(props)
         window.MainFeedComponent = this;
         this.state = {
+            invalid: false,
             loading: false,
             data: [],
             fkey: 0
@@ -38,7 +39,17 @@ class MainFeed extends React.Component {
              }
              this.toogleLoader()
              ycore.GetPosts(uid, get, '0', (err, result) => {
+                 if (err) {
+                     ycore.notifyError('Error when get data from this input')
+                     return
+                 }
+                 console.log(result)
+                 if (JSON.parse(result).api_status == '400') {
+                    this.setState({ invalid: true })
+                    return
+                }
                  const parsed = JSON.parse(result)['data']
+                
                  const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false 
                  this.setState({ isEnd: isEnd, data: parsed, loading: false })
              })
@@ -105,10 +116,17 @@ class MainFeed extends React.Component {
     }
 
     render(){
-        const { loading } = this.state;
+        const { loading, invalid } = this.state;
         return (
            <div id='mainfeed'> 
-               { loading? 
+              {invalid? 
+                <antd.Card style={{ borderRadius: "10px", maxWidth: '26.5vw', margin: 'auto', textAlign: 'center' }} >
+                 
+                    <h2><Icons.ExclamationCircleOutlined />  Invalid Data </h2>
+                    <span>If this error has occurred several times, try restarting the app</span>
+                </antd.Card>
+                :   
+              loading? 
                  <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
                         <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
                  </antd.Card>
diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js
index 1cfc208f..80eec059 100755
--- a/src/components/UserProfile/index.js
+++ b/src/components/UserProfile/index.js
@@ -23,6 +23,7 @@ class UserProfile extends React.Component {
     constructor(props){
       super(props),
       this.state = {
+        invalid: false,
         UUID: '',
         RenderValue: {},
         loading: true,
@@ -57,7 +58,9 @@ class UserProfile extends React.Component {
               if (!rp['0']) {
                 ycore.yconsole.log('Bad response / User not found') 
                 const val = { id: null, username: 'User not found!'}
-                this.setState({ RenderValue: val, loading: false })
+                this.setState({ invalid: true, RenderValue: val, loading: false })
+                ycore.crouter.native(`main`)
+                antd.message.warning(`Its seams like @${string} not exist`);
                 return 
               }
               const c1 = rp['0'].username.toLowerCase()
@@ -111,12 +114,12 @@ class UserProfile extends React.Component {
       );
   };
     render(){
-        const { loading, UUID } = this.state
+        const { loading, UUID, invalid } = this.state
         return(
             <div>
               {loading? <antd.Skeleton active /> : 
               (<div>
-                {this.UserHeader(this.state.RenderValue)}
+                {invalid? null: this.UserHeader(this.state.RenderValue)}
                 <MainFeed get='user' uid={UUID} />
               </div>)
               }
diff --git a/src/pages/__m/index.js b/src/pages/__m/index.js
index 53992447..499177ee 100755
--- a/src/pages/__m/index.js
+++ b/src/pages/__m/index.js
@@ -66,6 +66,20 @@ export default class __m extends React.Component {
             </antd.Card>
           </div>
 
+          <div className={styles.titleHeader}>
+            <h1><Icons.DeploymentUnitOutlined /> Test yCore™</h1>
+          </div>
+          <div className={styles.sectionWrapper}>
+            <antd.Button onClick={() => ycore.notifyError('Yep, its not empty, jeje funny')} > Send empty notifyError() </antd.Button>
+            <antd.Button onClick={() => ycore.notifyError(`ycore.GetPosts(uid, get, '0', (err, result) => {
+const parsed = JSON.parse(result)['data']
+const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false
+this.setState({ isEnd: isEnd, data: parsed, loading: false })
+})
+
+`)} > Send mock notifyError() </antd.Button>
+          </div>
+
           <div className={styles.titleHeader}>
             <h1><Icons.DatabaseOutlined  /> SDCP™</h1>
           </div>
diff --git a/src/pages/g/$group/index.js b/src/pages/g/$group/index.js
new file mode 100644
index 00000000..436cb37b
--- /dev/null
+++ b/src/pages/g/$group/index.js
@@ -0,0 +1,97 @@
+import React, { PureComponent } from 'react'
+import { pathMatchRegexp } from 'utils'
+import { SearchCard } from 'components'
+import styles from './styles.less'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
+
+const userData = ycore.SDCP()
+
+class GroupIndexer extends PureComponent {
+    constructor(props){
+      super(props),
+      this.state = {
+        SearchResult: '',
+        loading: true
+      }
+    }
+    toogleLoading(){
+      this.setState({loading: !this.state.loading})
+    }
+    componentDidMount(){
+      try {
+        const {location} = this.props
+        const matchSearch = pathMatchRegexp("/s/:id", location.pathname);
+        const parsed = matchSearch.shift()
+        const raw = parsed.toString()
+        const string = raw.replace('/s/', "")
+        
+ 
+      } catch (err) {
+        ycore.notifyError(err)
+      }
+    }
+
+  
+    EntryComponent = (t, source) => {
+      try {
+        return(
+          <div>
+            <antd.Typography.Title level={2} ><Icons.TeamOutlined /> {t} </antd.Typography.Title>
+            <div className={styles.searchEntry}>
+                <antd.List
+                  grid={{
+                    gutter: 16,
+                    xs: 1,
+                    sm: 2,
+                    md: 4,
+                    lg: 4,
+                    xl: 6,
+                    xxl: 3,
+                  }}
+                  dataSource={source}
+                  renderItem={item => (
+                    <SearchCard type={t} source={item} />
+                  )}
+                />
+             </div>
+          </div>
+        )
+
+      } catch (error) {
+        console.log(error)
+        return <center><h2>Render Error</h2></center>
+      }
+     
+      
+    }
+  
+    render() {
+      const {location} = this.props
+      const matchSearch = pathMatchRegexp("/g/:id", location.pathname);
+
+      const parsed = matchSearch.shift()
+      const raw = parsed.toString()
+      const string = raw.replace('/g/', "")
+
+      
+      if (matchSearch) {        
+        return(
+            <div>
+              <h1 className={styles.searchHeader}><Icons.SearchOutlined /> Results of {string} </h1>
+                <antd.Card> 
+                  <div className={styles.results}>
+                     {this.state.loading? null : this.renderResult(this.state.SearchResult)}
+                  </div>
+                </antd.Card>
+            </div>
+        )
+      }
+      
+      return(<div><center> Render Error </center></div>)
+    }
+}
+
+export default GroupIndexer
\ No newline at end of file
diff --git a/src/pages/g/$group/styles.less b/src/pages/g/$group/styles.less
new file mode 100644
index 00000000..d76a307a
--- /dev/null
+++ b/src/pages/g/$group/styles.less
@@ -0,0 +1,18 @@
+@import '~themes/vars.less';
+
+.searchHeader {
+    font-family: "Nunito", sans-serif;
+    font-size: 40px;
+    text-align: center;
+    margin-top: 7px;
+}
+.results {
+    padding: 10px;
+}
+.searchEntry {
+    :global{
+        .antd-card{
+            margin: auto;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/hamza/index.js b/src/pages/hamza/index.js
deleted file mode 100755
index 6acd1650..00000000
--- a/src/pages/hamza/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
- import React from 'react' 
- import * as ycore from 'ycore'
-
- export default class Hamza extends React.PureComponent {
-     render() {
-         return (
-             <div>
-                 <h1>
-                     Españita Hola 
-                 </h1>
-             </div>
-         )
-     }
- }
diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js
index 0c13c00a..247e6093 100755
--- a/src/pages/settings/components/base.js
+++ b/src/pages/settings/components/base.js
@@ -4,6 +4,7 @@ import { AppSettings } from '../../../../globals/settings.js'
 import { DevOptions, ControlBar } from 'ycore'
 import * as ycore from "ycore"
 import * as Icons from '@ant-design/icons'
+import Icon from '@ant-design/icons'
 import { CustomIcons } from 'components'
 
 class Base extends Component { 
@@ -107,6 +108,8 @@ class Base extends Component {
       <Fragment>
          <div>
             <h1><Icons.PullRequestOutlined /> Behaviors</h1>
+            <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
+
              {this.SettingRender(this.state.SettingRepo)}
          </div>
       </Fragment>
diff --git a/src/pages/settings/components/notification.js b/src/pages/settings/components/notification.js
index 26bd3277..2e4a04cd 100755
--- a/src/pages/settings/components/notification.js
+++ b/src/pages/settings/components/notification.js
@@ -1,48 +1,16 @@
-import * as antd from 'antd';
-import React, { Component, Fragment } from 'react';
+import React from 'react';
+import * as ycore from "ycore"
+import * as Icons from '@ant-design/icons'
+import styles from './notification.less'
 
-class NotificationView extends Component {
-  getData = () => {
-    const Action = (
-      <antd.Switch
-        checkedChildren={'open'}
-        unCheckedChildren={'close'}
-        defaultChecked
-      />
-    );
-    return [
-      {
-        title: 'Title 1',
-        description: 'Description 1',
-        actions: [Action],
-      },
-      {
-        title: 'Title 2',
-        description: 'Description 2',
-        actions: [Action],
-      },
-      {
-        title: 'Title 3',
-        description: 'Description 3',
-        actions: [Action],
-      },
-    ];
-  };
 
+class NotificationView extends React.Component {
   render() {
-    const data = this.getData();
     return (
-      <Fragment>
-        <antd.List
-          itemLayout="horizontal"
-          dataSource={data}
-          renderItem={item => (
-            <antd.List.Item actions={item.actions}>
-              <antd.List.Item.Meta title={item.title} description={item.description} />
-            </antd.List.Item>
-          )} />
-      </Fragment>
-    );
+      <div className={styles.main}>
+        <h2><Icons.NotificationOutlined /> Notifications</h2>
+      </div>
+    )
   }
 }
 
diff --git a/src/pages/settings/components/notification.less b/src/pages/settings/components/notification.less
new file mode 100644
index 00000000..0e1fea32
--- /dev/null
+++ b/src/pages/settings/components/notification.less
@@ -0,0 +1,16 @@
+@import '~themes/vars.less';
+
+.main{
+ 
+    :global{
+        h2{
+            font-weight: 500;
+        }
+        .anticon{
+            color: #2d2d2d;
+
+        }
+           
+        
+    }
+}
\ No newline at end of file
diff --git a/src/pages/settings/components/security.js b/src/pages/settings/components/security.js
index e1937669..a923e08e 100755
--- a/src/pages/settings/components/security.js
+++ b/src/pages/settings/components/security.js
@@ -1,84 +1,15 @@
-import React, { Component, Fragment } from 'react';
-import { List } from 'antd';
-
-const passwordStrength = {
-  strong: (
-    <span className="strong">
-      Strong
-    </span>
-  ),
-  medium: (
-    <span className="medium">
-      Medium
-    </span>
-  ),
-  weak: (
-    <span className="weak">
-      Weak
-    </span>
-  ),
-};
-
-class SecurityView extends Component {
-  getData = () => [
-    {
-      title: <h1>Password</h1>,
-      description: (
-        <Fragment>
-          <p>Something</p>
-          {passwordStrength.strong}
-        </Fragment>
-      ),
-      actions: [
-        <a key="Modify">
-          Modify
-        </a>,
-      ],
-    },
-    {
-      title: <h1>Security question</h1>,
-      description: 'Security cuesting seting',
-      actions: [
-        <a key="Set">
-          Set
-        </a>,
-      ],
-    },
-    {
-      title: 'Mail',
-      description: 'YourEmail@jeje.com',
-      actions: [
-        <a key="Modify">
-          Modify
-        </a>,
-      ],
-    },
-    {
-      title: 'mfa',
-      description: 'mfa settings',
-      actions: [
-        <a key="bind">
-          Bind
-        </a>,
-      ],
-    },
-  ];
+import React from 'react';
+import * as ycore from "ycore"
+import * as Icons from '@ant-design/icons'
+import styles from './security.less'
 
+class SecurityView extends React.Component {
   render() {
-    const data = this.getData();
     return (
-      <Fragment>
-        <List
-          itemLayout="horizontal"
-          dataSource={data}
-          renderItem={item => (
-            <List.Item actions={item.actions}>
-              <List.Item.Meta title={item.title} description={item.description} />
-            </List.Item>
-          )}
-        />
-      </Fragment>
-    );
+      <div className={styles.main}>
+        <h2><Icons.LockOutlined /> Your Security & Privacy</h2>
+      </div>
+    )
   }
 }
 
diff --git a/src/pages/settings/components/security.less b/src/pages/settings/components/security.less
new file mode 100644
index 00000000..0e1fea32
--- /dev/null
+++ b/src/pages/settings/components/security.less
@@ -0,0 +1,16 @@
+@import '~themes/vars.less';
+
+.main{
+ 
+    :global{
+        h2{
+            font-weight: 500;
+        }
+        .anticon{
+            color: #2d2d2d;
+
+        }
+           
+        
+    }
+}
\ No newline at end of file
diff --git a/src/pages/settings/index.js b/src/pages/settings/index.js
index f7201c9e..a2890cad 100755
--- a/src/pages/settings/index.js
+++ b/src/pages/settings/index.js
@@ -14,20 +14,18 @@ import Earnings from './components/earnings.js'
 
 const { Item } = Menu;
 const menuMap = {
-  base: 'General',
-  security: 'Security & Privacity',
-  notification: 'Notification',
-  earnings: 'Earnings',
-  about: 'About'
+  base: (<span><Icons.ControlOutlined /> General</span>),
+  security: (<span><Icons.SafetyCertificateOutlined /> Security & Privacity</span>),
+  notification: (<span><Icons.MailOutlined /> Notification</span>),
+  earnings: (<span><Icons.DollarCircleOutlined /> Earnings</span>),
+  about: (<span><Icons.ContainerOutlined /> About</span>)
 
 };
 
-const { Title } = Typography;
 class GeneralSettings extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      mode: 'inline',
       selectKey: 'base',
     };
   }
@@ -62,33 +60,22 @@ class GeneralSettings extends React.Component {
   };
 
   render() {
-    const { mode, selectKey } = this.state;
+    const { selectKey } = this.state;
     return (
-      <div>
-        <Title className={styles.titleHead}> {this.getMenu()} </Title>
-        <GridContent>
-          <div
-            className={styles.main}
-            ref={ref => {
-              if (ref) {
-                this.main = ref;
-              }
-            }}
+      <div className={styles.main}>
+        <div className={styles.leftMenu}>
+          <h2><Icons.SettingOutlined /> Settings </h2>
+          <Menu
+            mode="inline"
+            selectedKeys={[selectKey]}
+            onClick={({ key }) => this.selectKey(key)}
           >
-            <div className={styles.leftMenu}>
-              <Menu
-                mode={mode}
-                selectedKeys={[selectKey]}
-                onClick={({ key }) => this.selectKey(key)}
-              >
-                {this.getMenu()}
-              </Menu>
-            </div>
-            <div className={styles.right}>
-              {this.renderChildren()}
-            </div>
-          </div>
-        </GridContent>
+            {this.getMenu()}
+          </Menu>
+        </div>
+        <div className={styles.right}>
+          {this.renderChildren()}
+        </div>
       </div>
     );
   }
diff --git a/src/pages/settings/style.less b/src/pages/settings/style.less
index c9ac52f1..a89d19b7 100755
--- a/src/pages/settings/style.less
+++ b/src/pages/settings/style.less
@@ -1,21 +1,21 @@
 @import '~themes/vars.less';
 
-.titleHead{
-  font-family: "Nunito", sans-serif;
-}
+
 
 .main {
+  font-family: "Nunito", sans-serif;
+  margin: 20px 0 0 0;
   display: flex;
   width: 100%;
   height: 100%;
   overflow: auto;
   color: @DarkMode-color_container;
-  background-color: transparent;
+  background-color: #ffffff;
+  padding: 15px;
+  border-radius: 10px;
   .leftMenu {
     width: 224px;
-    border-right: @border-width-base @border-style-base @border-color-split;
     :global {
-      
       .ant-menu-inline {
         color: @DarkMode-color_container;
         background-color: transparent;
@@ -41,43 +41,19 @@
     }
   }
   :global {
-    .ant-list-split .ant-list-item:last-child {
-      border-bottom: 1px solid @border-color-split;
-    }
     .ant-list-item {
-      padding-top: 14px;
-      padding-bottom: 14px;
+      padding-top: 7px; 
+      padding-bottom: 7px;
+    }
+    .ant-list-split .ant-list-item {
+        border-bottom: 0;
+    }
+    .ant-list-item-meta-title {
+      color: rgba(0, 0, 0, 0.733);
+      font-size: 14px;
     }
   }
 }
-:global {
-  .ant-list-item-meta {
-    // 账号绑定图标
-    .taobao {
-      display: block;
-      color: #ff4000;
-      font-size: 48px;
-      line-height: 48px;
-      border-radius: @border-radius-base;
-    }
-    .dingding {
-      margin: 2px;
-      padding: 6px;
-      color: #fff;
-      font-size: 32px;
-      line-height: 32px;
-      background-color: #2eabff;
-      border-radius: @border-radius-base;
-    }
-    .alipay {
-      color: #2eabff;
-      font-size: 48px;
-      line-height: 48px;
-      border-radius: @border-radius-base;
-    }
-  }
-
-}
 
 @media screen and (max-width: @screen-md) {
   .main {