update: 0.3.18

package.json

@@ -3,7 +3,7 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.3.13",
+  "version": "0.3.18",
   "stage": "dev-pre",
   "description": "",
   "author": "RageStudio",

src/@ycore/libs/comty_ng/comty_user.js

@@ -3,6 +3,22 @@ import { comty_rsa } from '../rs_cloud/pre'
 
 export const comty_user = {
   setData: () => {},
+  getFollowers: (callback, payload) => {
+    if (!payload)return false
+    const { user_id } = payload
+
+    let formdata = new FormData()
+    formdata.append('user_id', user_id)
+    formdata.append('fetch', 'followers')
+
+    API_Call(
+      (err,res) => {
+        return callback(err,res)
+      },
+      comty_rsa.endpoint('get-user-data'),
+      formdata
+    )
+  },
   follow: (callback, payload) => {
     if (!payload) {
       return false

src/components/Layout/Secondary/components/__sec.less

@@ -26,11 +26,12 @@
       opacity: 0;
   
       top: unset;
-      overflow: hidden;
      
+      transform: translate(0, 86%);
       border-radius: 12px 12px 0 0;
       flex-direction: column;
-      overflow-y: scroll;
+
+      overflow-y: overlay;
       overflow-x: hidden;
   
       touch-action: none;
@@ -56,7 +57,6 @@
       &.active {
         opacity: 1;
         height: 100%;
-        transform: translate(0, 86%);
       }
   
       &.full_open {

src/components/Layout/Secondary/components/__sec.tsx

@@ -23,9 +23,6 @@ const isOpen = (props: __sec_props) => {
     }
     return false
 }
-const isMobile = (props: __sec_props) => {
-    props.isMobile? true : false
-} 
 
 const renderExit = (props: __sec_props) => {
     const {functs} = props
@@ -38,9 +35,9 @@ const renderExit = (props: __sec_props) => {
 }
 
 const __sec = (props: __sec_props) => {
-    const { render, getRef, y, type } = props
+    const { render, getRef, y, type, isMobile } = props
-    const t_full = type === 'full_open'? true : false
+    const t_full = type == 'full_open'? true : false
-    const t_def = type === 'active'? true: false 
+    const t_def = type == 'active'? true: false 
     return (
         <div
             id="secondary_layout__sec"
@@ -50,7 +47,6 @@ const __sec = (props: __sec_props) => {
                 [styles.full_open]: t_full,
             })}
             style={{
-                position: 'relative',
                 top: y,
             }}
             ref={getRef}

src/components/Layout/Secondary/index.js

@@ -13,6 +13,7 @@ import {
   __priSearch,
   __trendings,
   __pro,
+  __footer
 } from './renders.js'
 
 export const SwapMode = {
@@ -185,9 +186,17 @@ export default class Secondary extends React.PureComponent {
 
   componentDidMount() {
     this.handle_genData()
+    if(this.props.isMobile){
+      window.addEventListener('popstate', function(event) {
+        SwapMode.close()
+      }, false);
+    }
   }
 
   componentWillUnmount() {
+    if(this.props.isMobile){
+      document.removeEventListener('popstate', null)
+    }
     document.removeEventListener('keydown', this.handle_Exit, false)
   }
 
@@ -203,10 +212,15 @@ export default class Secondary extends React.PureComponent {
     try {
       const trending_data = JSON.parse(this.state.gen_data)['trending_hashtag']
       return (
+        <>
         <div className={styles.secondary_main}>
           {ycore.IsThisUser.pro() ? <__pro /> : <__pro />}
           <__trendings data={trending_data} />
+          
+          {__footer()}
         </div>
+         
+        </>
       )
     } catch (error) {
       return null
@@ -271,6 +285,7 @@ export default class Secondary extends React.PureComponent {
   render() {
     const { userData, isMobile } = this.props
     const __sec_functs = (this.Swapper)
+    
     if (!this.state.loading)
       return (
         <>
@@ -307,7 +322,7 @@ export default class Secondary extends React.PureComponent {
                 {this.renderTarget('__pri')}
               </div>
             </div>
-            <__sec render={this.renderTarget('__sec')} isMobile={this.state.isMobile} functs={__sec_functs} type={this.state.__sec_full? "full_open" : this.state.__sec_active? "active" : null} />
+            <__sec render={this.renderTarget('__sec')} isMobile={isMobile} functs={__sec_functs} type={this.state.__sec_full? "full_open" : this.state.__sec_active? "active" : null} />
             
       
 

src/components/Layout/Secondary/index.less

@@ -131,8 +131,6 @@
    
     border-radius: 12px 12px 0 0;
     flex-direction: column;
-    overflow-y: scroll;
-    overflow-x: hidden;
  
     :global{
       .comments_body {
@@ -151,7 +149,7 @@
 
     &.half {
       opacity: 1;
-      height: 75vh;
+      height: 95vh;
     }
 
   }

src/components/Layout/Secondary/renders.js

@@ -25,25 +25,10 @@ export class __priPost extends React.PureComponent {
   renderContent(payload) {
     const { id, postText, postFile_full, post_time, publisher } = payload
     const {isMobile}= this.props
-    if (!postFile_full) {
+
-      return (
-        <div className={styles.contentWrapper}>
-        {postText ? (
-          <div className={styles.postContent}>
-            <h3 dangerouslySetInnerHTML={{ __html: postText }} />{' '}
-          </div>
-        ) : null}
-      </div>
-      )
-    }
     return (
       <div className={styles.contentWrapper}>
         {postFile_full ? <MediaPlayer isMobile={isMobile} entire={true} file={postFile_full} /> : null}
-        {postText ? (
-          <div className={styles.postContent}>
-            <h3 dangerouslySetInnerHTML={{ __html: postText }} />{' '}
-          </div>
-        ) : null}
       </div>
     )
   }
@@ -334,3 +319,11 @@ export class __pro extends React.PureComponent {
     )
   }
 }
+
+const _info = ycore.AppInfo
+
+export const __footer = () =>{
+  return <div className={styles.__footer}>
+    v{ycore.AppInfo.version}  |  About  |  Legal  |  Help
+  </div>
+}

src/components/Layout/Secondary/renders.less

@@ -93,7 +93,7 @@
   position: absolute;
   vertical-align: bottom;
   border-radius: 7px;
-  bottom: 0;
+  top: 0;
   max-width: 50vw;
 
   background-color: #2d2d2d4b;
@@ -145,13 +145,14 @@
 
   .comments_cards_wrapper {
     z-index: 50;
-    overflow: scroll;
+    overflow-y: scroll!important;
     height: 84%;
     :global {
-      overflow: scroll;
+      overflow-y: scroll!important;
     }
 
     .comment_card {
+      overflow-y: scroll!important;
       position: relative;
       width: 100%;
       background-color: #ffffff;
@@ -354,3 +355,13 @@
     }
   }
 }
+
+.__footer{
+  position: absolute;
+  bottom: 0;
+  font-size: 11px;
+  margin-bottom: 10px;
+  color: #f3f3f3;
+  letter-spacing: 2px;
+  width: 100%;
+}

src/components/MediaPlayer/index.less

@@ -19,8 +19,8 @@
 
 
   &.entire {
-    max-width: 52vw;
+    max-width: 52%;
-    max-height: 80vh;
+    max-height: 80%;
     position: fixed;
     top: 50%;
     left: 50%;
@@ -49,19 +49,23 @@
   }
 
   &.mobile {
-    max-width: 52vw;
+    max-width: unset;
-    max-height: 80vh;
+    max-height: unset;
-    position: fixed;
+    top: unset;
-    top: 50%;
+    left: unset;
-    left: 50%;
+    transform: unset;
-    transform: translate(-50%, -50%);
+    
+    width: 100%;
+    position: relative;
+    height: 60vh;
+    display: flex;
 
     img {
       object-fit: contain;
-      height: 100%;
+      height: auto;
       width: 100%;
-      max-width: 52vw;
+      max-width: unset;
-      max-height: 80vh;
+      max-height: unset;
     }
 
     audio {
@@ -71,10 +75,10 @@
 
     video {
       object-fit: contain;
-      height: 100%;
+      height: auto;
       width: 100%;
-      max-width: 52vw;
+      max-width: unset;
-      max-height: 80vh;
+      max-height: unset;
     }
   }
 }

src/components/UserProfile/index.js

@@ -10,7 +10,7 @@ import Follow_btn from './components/Follow_btn.js'
 import { BadgesType } from 'globals/badges_list'
 import classnames from 'classnames'
 
-const isMobile = localStorage.getItem('mobile_src')
+import * as reducers from './reducers.js'
 
 class UserProfile extends React.PureComponent {
   constructor(props) {
@@ -93,6 +93,15 @@ class UserProfile extends React.PureComponent {
           Followed: ycore.booleanFix(rp['0'].is_following),
         })
 
+        reducers.get.followers((res)=>{
+          try {
+            this.setState({followers_data: res, followers: res.length})
+          } catch (error) {
+            return false
+          }
+
+        },rp['0'].user_id)
+
         ycore.comty_user.__tags(
           (err, res) => {
             if (err) return false
@@ -125,104 +134,100 @@ class UserProfile extends React.PureComponent {
     
 const moreMenu = (
   <antd.Menu>
-    <antd.Menu.Item>1st antd.Menu item</antd.Menu.Item>
+    <antd.Menu.Item>__</antd.Menu.Item>
-    <antd.Menu.Item>2nd antd.Menu item</antd.Menu.Item>
+    <antd.Menu.Item>__set2</antd.Menu.Item>
   </antd.Menu>
 );
 
-    const { loading, UUID, invalid, RenderValue } = this.state
+    const { loading, UUID, invalid, RenderValue, followers } = this.state
+    const { isMobile } = this.props
+    if(loading) return <antd.Skeleton active />
+    if(invalid) return null
     return (
       <div>
-        {loading ? (
+            <div
-          <antd.Skeleton active />
+className={classnames(styles.userWrapper, {
-        ) : (
+  [styles.mobile]: isMobile,
-          <div>
+})}
-            {invalid ? null : (
+>
-              <div
-                className={classnames(styles.userWrapper, {
-                  [styles.mobile]: isMobile,
-                })}
-              >
-                <div className={styles.UserCover}>
-                  <img src={RenderValue.cover} />
-                </div>
 
-                <div>
+<div className={styles.UserCover}>
+  <img src={RenderValue.cover} />
+</div>
 
-                    <div className={styles.pageHeaderContent}>
-                      <div className={styles.avatar}>
-                        <antd.Avatar shape="square" src={RenderValue.avatar} />
-                      </div>
-                      <div className={styles.content}>
-                        <div className={styles.TagWrappers}>
-                          {this.state.UserTags.length > 0 ? (
-                            <antd.List
-                              dataSource={this.state.UserTags}
-                              renderItem={item => (
-                                <antd.Tooltip title={item.tip}>
-                                  <antd.Tag id={item.id} color={item.color}>
-                                    {item.title} {item.icon}
-                                  </antd.Tag>
-                                </antd.Tooltip>
-                              )}
-                            />
-                          ) : null}
-                        </div>
-                        {ycore.IsThisUser.same(RenderValue.id) ? null : (
-                          <div
-                            className={styles.follow_wrapper}
-                            onClick={() => this.handleFollowUser()}
-                          >
-                            <Follow_btn
-                              followed={this.state.Followed ? true : false}
-                            />
-                          </div>
-                        )}
-                        <div className={styles.contentTitle}>
-                          <h1 style={{ marginBottom: '0px' }}>
-                            {RenderValue.username}
-                            <antd.Tooltip title="User Verified">
-                              {ycore.booleanFix(RenderValue.verified) ? (
-                                <Icon
-                                  style={{
-                                    color: 'blue',
-                                    verticalAlign: 'top',
-                                  }}
-                                  component={CustomIcons.VerifiedBadge}
-                                />
-                              ) : null}
-                            </antd.Tooltip>
   
-                            { ycore.IsThisUser.same(UUID)? 
+    <div className={styles.pageHeaderContent}>
-                            <antd.Dropdown overlay={moreMenu}>
+      <div className={classnames(styles.avatar, {[styles.mobile]: isMobile})}>
-                              <Icons.MoreOutlined className={styles.user_more_menu} />
+        <antd.Avatar shape="square" src={RenderValue.avatar} />
-                            </antd.Dropdown> 
+      </div>
-                            : null }
+      <div className={styles.content}>
-
+        <div className={styles.TagWrappers}>
-                          </h1>
+          {this.state.UserTags.length > 0 ? (
-                          <span
+            <antd.List
-                            style={{
+              dataSource={this.state.UserTags}
-                              fontSize: '14px',
+              renderItem={item => (
-                              fontWeight: '100',
+                <antd.Tooltip title={item.tip}>
-                              lineHeight: '0',
+                  <antd.Tag id={item.id} color={item.color}>
-                              marginBottom: '5px',
+                    {item.title} {item.icon}
-                            }}
+                  </antd.Tag>
-                            dangerouslySetInnerHTML={{
+                </antd.Tooltip>
-                              __html: RenderValue.about,
+              )}
-                            }}
+            />
-                          />
+          ) : null}
-                        </div>
+        </div>
-                      </div>
+        {ycore.IsThisUser.same(RenderValue.id) ? null : (
-                    </div>
+          <div
-                </div>
+            className={styles.follow_wrapper}
-              </div>
+            onClick={() => this.handleFollowUser()}
-            )}
+          >
-            {ycore.IsThisUser.same(UUID) ? (
+            <Follow_btn
-              <PostCreator userData={ycore.userData()} />
+              followed={this.state.Followed ? true : false}
-            ) : null}
+            />
-            <MainFeed get="user" uid={UUID} />
           </div>
         )}
+      
+        <div className={styles.contentTitle}>
+          <h1 style={{ marginBottom: '0px' }}>
+            
+            <antd.Tooltip title={`${this.state.followers} Followers`}>
+              {RenderValue.username}
+            </antd.Tooltip>
+
+            <antd.Tooltip title="User Verified">
+              {ycore.booleanFix(RenderValue.verified) ? (
+                <Icon
+                  style={{
+                    color: 'blue',
+                    verticalAlign: 'top',
+                  }}
+                  component={CustomIcons.VerifiedBadge}
+                />
+              ) : null}
+            </antd.Tooltip>
+          
+            { ycore.IsThisUser.same(UUID)? 
+            <antd.Dropdown overlay={moreMenu}>
+              <Icons.MoreOutlined className={styles.user_more_menu} />
+            </antd.Dropdown> 
+            : null }
+          </h1>
+          <span
+            style={{
+              fontSize: '14px',
+              fontWeight: '100',
+              lineHeight: '0',
+              marginBottom: '5px',
+            }}
+            dangerouslySetInnerHTML={{
+              __html: RenderValue.about,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+</div>
+            {ycore.IsThisUser.same(UUID) ? (<PostCreator userData={ycore.userData()} />) : null}
+            <MainFeed get="user" uid={UUID} />
       </div>
     )
   }

src/components/UserProfile/reducers.js

@@ -0,0 +1,18 @@
+import * as ycore from 'ycore'
+
+// REDUCERS, USERPROFILE
+export const get = {
+    followers: (callback,id) => {
+        const payload = { user_id: id }
+        ycore.comty_user.getFollowers((err,res) => {
+           try {
+            const a = JSON.parse(res)['followers']
+            callback(a)
+            return false
+           } catch (error) {
+             callback(false)
+             return false
+           }
+        }, payload)
+    },
+}

src/components/UserProfile/styles.less

@@ -29,26 +29,20 @@
 .userWrapper {
   padding: 0 68px 15px 68px;
   margin: auto;
+  background-color: #ffffff;
+  border-radius: 0 0 20px 20px;
+  padding: 20px 0 3px 0;
+ 
+  padding-top: 0;
+  overflow: initial !important;
+  
   &.mobile{
     max-width: 510px;
     min-width: 265px;
     width: auto;
-    padding: 0 15px 0 15px;
-  }
-  :global {
-    .ant-page-header-content {
-      padding-top: 0;
-      overflow: initial !important;
-    }
 
-    .ant-page-header {
-      padding: 20px 0 3px 0;
-    }
-
-    .ant-pro-page-header-wrap-page-header-warp {
-      border-radius: 0 0 20px 20px;
-    }
   }
+
 }
 
 .TagWrappers {
@@ -58,6 +52,19 @@
   margin: 0 0 7px 0 !important;
 }
 
+.followers_count{
+  float: right;
+  font-size: 14px;
+  width: auto;
+  max-width: 200px;
+  padding: 0 20px;
+  background-color: #f3f3f3;
+  text-align: center;
+  border-radius: 8px;
+  transform: translate(90px, -64px);
+  
+}
+
 .UserCover {
   border-radius: 15px 15px 0 0;
   position: relative;
@@ -90,6 +97,11 @@
     height: 100%;
   }
 
+  &.mobile{
+    transform: translate(0,-90px);
+    margin: auto;
+  }
+
   :global {
     .ant-avatar {
       box-shadow: 13px 13px 17px 4px rgba(69, 69, 69, 0.151);
@@ -105,6 +117,7 @@
 .pageHeaderContent {
   vertical-align: top;
   display: flex;
+  padding: 20px;
 
   .content {
     font-family: "Poppins", sans-serif;

src/layouts/PrimaryLayout.js

@@ -91,7 +91,7 @@ class PrimaryLayout extends React.Component {
     return (
       <React.Fragment>
           {/* {isMobile ? <MobileWarning /> : null} */}
-          <div className={styles.__ControlBar}>
+          <div className={classnames(styles.__ControlBar, {[styles.mobile]: isMobile})}>
             <Control mobile={isMobile} />
           </div>
           <antd.Layout id="primaryLayout" className={classnames(styles.primary_layout, {[styles.mobile]: isMobile})}>

src/layouts/PrimaryLayout.less

@@ -5,6 +5,10 @@
   position: absolute;
   bottom: 0;
   z-index: 30;
+  &.mobile{
+    top: 0;
+    bottom: unset;
+  }
 }
 
 .primary_layout {

src/pages/$page/index.js

@@ -15,7 +15,7 @@ class PageIndexer extends PureComponent {
       ycore.yconsole.log(`User matched!  ${location.pathname}`)
       return (
         <div>
-          <UserProfile regx={matchUser} />
+          <UserProfile {...this.props} regx={matchUser} />
         </div>
       )
     }

src/themes/base/index.less

@@ -138,7 +138,7 @@ body {
 // .secondary_*
 @__secondary_colider_width: 31.2vw;
 @secondary_wrapper_hidden_width: 22vw;
-@secondary_wrapper_showFull_width: 94.2vw;
+@secondary_wrapper_showFull_width: 94.2%;
 @secondary_wrapper_showHalf_width: 35vw;
 @secondary_container_bg_background: #201F23;
 @secondary_container_1_color: #fff;
@@ -161,7 +161,7 @@ body {
 // .post_card*
 @post_card_general_border-rd: 7px;
 @post_card_wrapper_shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-@post_card_wrapper_actions_backgroud: rgba(235, 235, 235, 0.815);
+@post_card_wrapper_actions_backgroud: rgb(235, 235, 235);
 @post_card_wrapper_actions_icon_backgroud: #fff;
 
 @post_card_wrapper_tags_color_default: rgb(249, 179, 64);