Layout mobile A1

package.json

@@ -3,7 +3,7 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.3.01",
+  "version": "0.3.02",
   "stage": "dev-pre",
   "description": "",
   "main": "app/main.js",

src/@ycore/libs/app_functions/modals.js

@@ -3,7 +3,9 @@ import * as ycore from 'ycore'
 import * as antd from 'antd'
 import * as Icons from '@ant-design/icons'
 import styles from './modals.less';
+import classnames from 'classnames'
 
+const isMobile = localStorage.getItem('mobile_src')
 
 class __Model_postreport extends React.PureComponent {
     state = {
@@ -92,7 +94,7 @@ class __Model_postreport extends React.PureComponent {
 
     render(){
         return(
-            <div className={styles.post_report_main}>
+            <div className={classnames(styles.post_report_main, {[styles.mobile]: isMobile})}>
                 <div>
                     <antd.Steps>
                        <antd.Steps.Step status={this.status(1)} title="Summary" icon={<Icons.SolutionOutlined />} />

src/@ycore/libs/app_functions/modals.less

@@ -1,5 +1,8 @@
 .post_report_main{
     padding: 0 0 0 115px;
+    &.mobile{
+        padding: 0 0 60px 0;
+    }
 }
 .post_report_body{
     color: #2d2d2d!important;

src/@ycore/libs/app_functions/pre.js

@@ -105,6 +105,13 @@ export const router = {
       pathname: `/${e}`,
       search: window.location.search,
     })
+  },
+  goprofile: () => {
+    goTo.element('primaryContent')
+    umiRouter.push({
+      pathname: `/@${ycore.userData().username}`,
+      search: window.location.search,
+    })
   }
 }
 

src/components/HeaderSearch/index.less

@@ -5,7 +5,10 @@
   top: 0;
   display: flex;
   margin: auto;
-  width: 100%;
+  max-width: 510px;
+  min-width: 265px;
+  width: auto;
+  height: 50px;
 
   &.hidden {
     display: none;
@@ -13,23 +16,19 @@
 }
 
 .headerSearch {
-  margin: auto;
+  width: 100%;
+  height: 100%;
 
   :global {
     .ant-input-affix-wrapper {
-      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      display: flex;
+
+     
       margin: 0;
       padding: 0;
-      color: rgba(0, 0, 0, .65);
+    
-      font-size: 14px;
-      font-variant: tabular-nums;
-      line-height: 1.5;
-      list-style: none;
-      font-feature-settings: 'tnum';
-      position: relative;
-      display: inline-block;
-      width: 100%;
-      text-align: start;
     }
 
     .ant-input-affix-wrapper .ant-input-prefix {

src/components/Layout/Control.less

@@ -1,6 +1,7 @@
 @import '~themes/index.less';
 
 .ControlCard {
+  overflow: hidden;
   background-color: rgba(0, 0, 0, 0.1);
   width: auto;
   max-width: 60%;

src/components/Layout/Secondary/index.less

@@ -33,21 +33,61 @@
   }
 
   &.mobile {
-    height: 45px;
     width: 100%;
-    bottom: -70px;
+    height: 0;
-    top: unset;
-    overflow-y: hidden;
-    overflow-x: hidden;
-    >.secondary_layout_bg{
-      border-radius: 27px 27px 0 0;
-      overflow-y: hidden;
-      overflow-x: scroll;
-    }
-    &.active {
     bottom: 0;
-      height: 100vh;
+    opacity: 0;
 
+    top: unset;
+    overflow: hidden;
+    >.secondary_layout_bg{
+      border-radius: 12px 12px 0 0;
+      flex-direction: column;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      width: 100%;
+    }
+    .secondary_container_1{
+      height: 85vh;
+      width: 100%;
+    }
+    .secondary_container_2{
+      width: 100%;
+      padding: 10px 10px 60px 10px;
+      border-radius: 12px 12px 0 0;
+    }
+    :global{
+      .comments_body {
+        padding: 30px 10px 10px 10px;
+      }
+    }
+
+    &.active {
+      opacity: 1;
+      bottom: 0;
+      height: 100%;
+      width: 100%;
+    }
+    &.half{
+      opacity: 1;
+      bottom: 0;
+      height: 60%;
+      width: 100%;
+    }
+    &.unique {
+      opacity: 1;
+      bottom: 0;
+      height: 100%;
+      width: 100%;
+      >.secondary_layout_bg  {
+        background-color: #ffffff;
+        padding: 0;
+        border-radius: 12px 12px 0 0;
+        flex-direction: column;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        width: 100%;
+      }
     }
   }
 
@@ -164,17 +204,6 @@
     }
   }
   
-  &.mobile{
-    overflow-x: hidden;
-    &.active {
-      width: 400px;
-      right: -120px;
-      opacity: 1;
-   
-      
-    }
-  }
-  
   transition: all @__Global_SwapAnimDuration ease-in-out;
   
 }

src/components/Layout/Secondary/renders.less

@@ -199,7 +199,7 @@
     z-index: 100;
     background-color: #ffffffd7;
     padding-top: 20px;
-    padding-bottom: 40px;
+    padding-bottom: 60px;
     border-radius: 0 0 0 32px;
 
     .comment_box_body {

src/components/Layout/Sider/index.js

@@ -29,6 +29,7 @@ class Sider extends React.PureComponent {
   handleClickMenu = e => {
     e.key === 'SignOut' && ycore.app_session.logout()
     e.key === 'general_settings' && ycore.router.go('settings')
+    e.key === 'profile' && ycore.router.goprofile()
     e.key === 'saves' && this.onClickFunctions.saves(e.key)
     e.key === 'events' && this.onClickFunctions.events(e.key)
     e.key === 'marketplace' && this.onClickFunctions.marketplace(e.key)
@@ -38,7 +39,7 @@ class Sider extends React.PureComponent {
 
   render() {
     const { isMobile } = this.props
-    const sider_props = {handleClickMenu: this.handleClickMenu ,logo: config.LogoPath, menulist: null}
+    const sider_props = {handleClickMenu: this.handleClickMenu ,logo: config.LogoPath, menulist: null, userData: this.props.userData}
 
     if (isMobile) {
       return <Sider_Mobile {...sider_props} />

src/components/Layout/Sider/mobile.js

@@ -11,7 +11,7 @@ import CustomIcons from '../../CustomIcons'
 @withI18n()
 export default class Sider_Mobile extends React.PureComponent {
   render() {
-    const { handleClickMenu, logo } = this.props 
+    const { handleClickMenu, userData } = this.props
     return (
       <div className={styles.left_sider_wrapper}>
         <antd.Layout.Sider
@@ -27,25 +27,15 @@ export default class Sider_Mobile extends React.PureComponent {
                 </antd.Menu.Item>
 
                 <antd.Menu.Item key="saves">
-                  <Icon component={CustomIcons.SavedPostColor} />
+                  <Icons.HeartTwoTone twoToneColor={"#ff4d4f"} />
-                </antd.Menu.Item>
-
-               
-                <antd.Menu.Item key="marketplace">
-                  <Icons.ShoppingTwoTone twoToneColor={"#ff7a45"}/>
-                </antd.Menu.Item>
-         
-
-              <antd.Menu.Item key="events">
-                  <Icons.CarryOutTwoTone twoToneColor={"#ff4d4f"}/>
                 </antd.Menu.Item>
 
                 <antd.Menu.Item key="general_settings">
                     <Icons.SettingOutlined />
                 </antd.Menu.Item>
 
-                <antd.Menu.Item key="SignOut">
+                <antd.Menu.Item key="profile">
-                    <Icons.LogoutOutlined style={{ color: 'red' }} />
+                   <antd.Avatar size={20} shape="square" src={userData.avatar} />
                 </antd.Menu.Item>
 
 

src/components/Layout/Sider/mobile.less

@@ -2,7 +2,8 @@
 
 
 .left_sider_wrapper {
-    position: fixed;
+    overflow: hidden!important;
+    position: absolute;
     z-index: 500;
     bottom: 0;
     right: 0;

src/components/UserProfile/index.js

@@ -9,6 +9,9 @@ import * as Icons from '@ant-design/icons'
 import Icon from '@ant-design/icons'
 import Follow_btn from './components/Follow_btn.js'
 import { BadgesType } from 'globals/badges_list'
+import classnames from 'classnames'
+
+const isMobile = localStorage.getItem('mobile_src')
 
 class UserProfile extends React.PureComponent {
   constructor(props) {
@@ -91,9 +94,10 @@ class UserProfile extends React.PureComponent {
           Followed: ycore.booleanFix(rp['0'].is_following),
         })
 
-        ycore.comty_user.__tags((err, res) => {
+        ycore.comty_user.__tags(
+          (err, res) => {
             if (err) return false
-          let fn = [];
+            let fn = []
             const a = JSON.parse(res)['tags']
             const b = Object.entries(Object.assign({}, a[0]))
             const objectArray = b.slice(1, b.length)
@@ -109,16 +113,15 @@ class UserProfile extends React.PureComponent {
               this.require(item.require) ? fn.push(item) : null
             })
             this.setState({ UserTags: fn })
-        }, { id: this.state.UUID })
+          },
-
+          { id: this.state.UUID }
+        )
       } catch (err) {
         ycore.notify.error(err)
       }
     }, payload)
   }
 
-  
-
   render() {
     const { loading, UUID, invalid, RenderValue } = this.state
     return (
@@ -127,8 +130,12 @@ class UserProfile extends React.PureComponent {
           <antd.Skeleton active />
         ) : (
           <div>
-            {invalid ? null :
+            {invalid ? null : (
-              <div className={styles.userWrapper}>
+              <div
+                className={classnames(styles.userWrapper, {
+                  [styles.mobile]: isMobile,
+                })}
+              >
                 <div className={styles.UserCover}>
                   <img src={RenderValue.cover} />
                 </div>
@@ -141,7 +148,8 @@ class UserProfile extends React.PureComponent {
                       </div>
                       <div className={styles.content}>
                         <div className={styles.TagWrappers}>
-                        {this.state.UserTags.length>0? <antd.List 
+                          {this.state.UserTags.length > 0 ? (
+                            <antd.List
                               dataSource={this.state.UserTags}
                               renderItem={item => (
                                 <antd.Tooltip title={item.tip}>
@@ -149,14 +157,18 @@ class UserProfile extends React.PureComponent {
                                     {item.title} {item.icon}
                                   </antd.Tag>
                                 </antd.Tooltip>
-                        )} /> : null}
+                              )}
+                            />
+                          ) : null}
                         </div>
                         {ycore.IsThisUser.same(RenderValue.id) ? null : (
                           <div
                             className={styles.follow_wrapper}
                             onClick={() => this.handleFollowUser()}
                           >
-                            <Follow_btn followed={this.state.Followed ? true : false} />
+                            <Follow_btn
+                              followed={this.state.Followed ? true : false}
+                            />
                           </div>
                         )}
                         <div className={styles.contentTitle}>
@@ -165,7 +177,10 @@ class UserProfile extends React.PureComponent {
                             <antd.Tooltip title="User Verified">
                               {ycore.booleanFix(RenderValue.verified) ? (
                                 <Icon
-                                  style={{ color: 'blue', verticalAlign: 'top' }}
+                                  style={{
+                                    color: 'blue',
+                                    verticalAlign: 'top',
+                                  }}
                                   component={CustomIcons.VerifiedBadge}
                                 />
                               ) : null}
@@ -178,14 +193,17 @@ class UserProfile extends React.PureComponent {
                               lineHeight: '0',
                               marginBottom: '5px',
                             }}
-                            dangerouslySetInnerHTML={{ __html: RenderValue.about }}
+                            dangerouslySetInnerHTML={{
+                              __html: RenderValue.about,
+                            }}
                           />
                         </div>
                       </div>
                     </div>
                   }
                 />
-            </div>}
+              </div>
+            )}
             {ycore.IsThisUser.same(UUID) ? (
               <PostCreator userData={ycore.userData()} />
             ) : null}

src/components/UserProfile/styles.less

@@ -29,7 +29,12 @@
 .userWrapper {
   padding: 0 68px 15px 68px;
   margin: auto;
-
+  &.mobile{
+    max-width: 510px;
+    min-width: 265px;
+    width: auto;
+    padding: 0 15px 0 15px;
+  }
   :global {
     .ant-page-header-content {
       padding-top: 0;
@@ -75,6 +80,8 @@
 
 .avatar {
   transform: translate(-25px, -45px);
+  max-height: 200px;
+  max-width: 120px;
   
   &>span {
     position: relative;

src/layouts/PrimaryLayout.js

@@ -48,6 +48,7 @@ class PrimaryLayout extends React.Component {
         this.setState({
           isMobile: mobile,
         })
+        store.set('mobile_src', mobile)
       }
     })
   }

src/layouts/PrimaryLayout.less

@@ -8,8 +8,7 @@
 }
 
 .primary_layout {
-    overflow-x: hidden!important;
+    overflow: hidden;
-    overflow-y: hidden!important;
     background-color: @primary_layout_backgroud;
     margin: auto;
     &.mobile{
@@ -17,9 +16,11 @@
         border-radius: 0;
         margin: 0;
         padding: 0;
+        overflow-y: overlay;
+        overflow-x: hidden;
       }
-      >.primary_layout_content{
+      .primary_layout_content{
-        padding: 0;
+        padding: 35px 15px 15px 15px;
       }
     }
 }

src/themes/base/index.less

@@ -17,6 +17,7 @@
 @ease-in: ease-in;
 
 ::-webkit-scrollbar {
+    position: absolute;
     width: 14px;
     height: 18px;
   }
@@ -45,15 +46,17 @@ body {
   //  min-width: 430px;
   background-color: transparent;
 
-  // overflow-y: hidden;
+  overflow: hidden;
-  // overflow-x: hidden;
-  // overflow: hidden;
 
   font-size: @base-font-size;
   line-height: @base-line-height;
 
 }
 
+#root {
+  overflow: hidden;
+}
+
 @media (min-width: @bp-medium) {
   
 }