0.1.16-T2 Tags & Posts Update

src/components/MainSidebar/index.js

@@ -7,12 +7,9 @@ import styles from './index.less'
 var userData = ycore.SDCP()
 
 class MainSidebar extends React.Component {
-
     state = {
         collapsed: false,
     };
-
-
     render(){
         return(
             <div className={styles.main_menuWrapper}>

src/components/MainSidebar/index.less

@@ -1,8 +1,7 @@
 @import '~themes/vars.less';
 
 .main_menuWrapper{
-    position: absolute;
-    left: 2%;
+    float: left;
     margin: 0 auto 0 auto;
     top: 70px;
     width: 20vw;

src/components/MicroHeader/index.js

@@ -2,19 +2,7 @@ import React from 'react'
 import * as ycore from 'ycore'
 import * as antd from 'antd'
 import styles from './index.less'
-import Radium, {StyleRoot}from 'radium';
-import { fadeInUp, bounceOutDown } from 'react-animations'
-
-const animationStyles = {
-    fadeInUp: {
-        animation: 'x 0.5s',
-        animationName: Radium.keyframes(fadeInUp, 'fadeInUp')
-    },
-    bounceOutDown: {
-        animation: 'x 1s',
-        animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown')
-    }
-}
+import { HandleVisibility } from 'components/PostCreator'
 
 export function HandleShow(){
     window.MicroHeaderComponent.toogleShow();
@@ -25,8 +13,8 @@ class MicroHeader extends React.Component {
         super(props),
         window.MicroHeaderComponent = this;
         this.state = {
-            FadeIN: true,
-            Show: false
+            FadeIN: false,
+            Show: true
         }
     }
     toogleShow(){
@@ -34,18 +22,15 @@ class MicroHeader extends React.Component {
         this.state.FadeIN? this.setState({ Show: true }) : setTimeout(() => this.setState({ Show: false }), 1000)
     }
     render(){
-        const { FadeIN, Show } = this.state
+        const { Show } = this.state
         return(
             Show? (
-            <StyleRoot>
-                <div style={FadeIN? animationStyles.fadeInUp : animationStyles.bounceOutDown }>
+                <div>
                     <antd.Card bordered={false} className={styles.MicroHeader}> 
-                      <React.Fragment>
-                          <span>Gatitos el gai</span>
-                      </React.Fragment> 
+                         <antd.Button icon="plus" onClick={() => HandleVisibility()} />
                     </antd.Card>
+              
                 </div>
-            </StyleRoot>
             ) : null
         )
     }

src/components/MicroHeader/index.less

@@ -5,7 +5,7 @@
     width: 100%;
     height: auto;
     position: absolute;
-    z-index: 100;
+    z-index: 10;
     top: 0;
     text-align: center;
     :global {
@@ -14,9 +14,17 @@
             max-width: 7%;
             margin: auto;
             padding: 5px;
+            border-radius: 0 0 13px 13px;
+            transform: translate(0, -30px);
+            transition: all 150ms ease-in;
+        }
+        .ant-card-body:hover {
+
+            transform: translate(0, 0px);
+            transition: all 150ms ease-in;
         }
         .ant-btn {
-            background-color: rgba(0, 0, 0, 0.1);
+            background-color: transparent;
             margin: 3px;
         }
     }

src/components/PostCard/index.js

@@ -57,7 +57,7 @@ class PostCard extends React.PureComponent{
     
     render(){
         const { payload, customActions,  } = this.props
-        const { user, ago, avatar, content, file, postFileName, publisher, post_likes } = payload || emptyPayload;
+        const { user, ago, avatar, content, file, postFileName, publisher, post_likes, is_post_pinned } = payload || emptyPayload;
         const defaultActions = [<div><LikeBTN active={true} key="like" /><span>{post_likes}</span></div>,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]
         const actions = customActions || defaultActions;
         return(
@@ -65,7 +65,7 @@ class PostCard extends React.PureComponent{
              <antd.Card actions={actions} >
                 <Meta
                     avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
-                    title={<div><a href={`/@${user}`}><h4 className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}</h4></a></div>}
+                    title={<div className={styles.titleWrapper} ><a href={`/@${user}`}><h4 className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4></a> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? <antd.Icon type="pushpin" /> : null }</div> </div>}
                     description={<span className={styles.textAgo}>{ago}</span>}
                     bordered="false"
                 />

src/components/PostCard/index.less

@@ -68,7 +68,23 @@
     font-size: 10px;
     margin: 0 0 0 53px;
 }
+.PostTags{
+    float: right;
+    color:rgb(249, 179, 64);
+    width: 100%;
+    z-index: 10;
+    i{
+        float: right;
+        margin: -0 6px 0 0;;
+        font-size: 17px;
+    }
+}
+.titleWrapper{
+    display: flex;
+    
+}
 .postContent{
+    word-break: break-all;
     display: flex;
     border-radius: 3px;
     margin: 23px 24px 23px 24px;

src/components/UserProfile/index.js

@@ -28,10 +28,15 @@ const UserHeader = ({ values }) => {
                <antd.Avatar shape="square" size={140} src={values.avatar} /> 
             </div>
             <div className={styles.content}>
+              <div className={styles.TagWrappers}>
+                {ycore.booleanFix(values.nsfw_flag)? <antd.Tag color="volcano" >NSFW</antd.Tag> : null}
+                  
+              </div>
               <div className={styles.contentTitle}>
                  <h1 style={{ marginBottom: '0px' }} >{values.username}<antd.Tooltip title="User Verified">{ycore.booleanFix(values.verified)? <antd.Icon style={{ color: 'blue', verticalAlign:'top' }} component={CustomIcons.VerifiedBadge} /> : null}</antd.Tooltip></h1> 
                  <span style={{ fontSize: '14px', fontWeight: '100', lineHeight: '0', marginBottom: '5px' }}>{values.about}</span> 
               </div>
+             
             </div>
           </div>
          } />

src/components/UserProfile/styles.less

@@ -1,8 +1,13 @@
 @import '~themes/vars.less';
+
 .userWrapper{
   padding: 0 68px 15px 68px;
   margin: auto;
 }
+.TagWrappers{
+  float: right;
+  position: relative;
+}
 .UserCover {
   border-radius: 15px 15px 0 0;
   position: relative;

src/pages/main/index.js

@@ -20,8 +20,9 @@ class Main extends React.Component {
     render(){
         return (
             <div> 
-                <PostCreator />
-                <MainFeed get="feed" />
+                <div><antd.Card bordered="false" > Kintxy xikito </antd.Card></div>
+                <div><PostCreator /></div>
+                <div><MainFeed get="feed" /></div>
             </div>
         )
     }