Add a profile post form to the user bio page

Lokiedu · Apr 4, 2017 · a034edd · a034edd
1 parent 9d475b0
commit a034edd
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/src/less/blocks/bio.less b/src/less/blocks/bio.less
@@ -57,9 +57,17 @@
         }
       }
       &_form {
+        .bio__title {
+          margin-left: 60px;
+        }
+
         @media (min-width: 768px) {
           padding-left: 60px;
         }
+
+        &.bio__river-item:first-child {
+          padding-top: 20px;
+        }
       }
     }
 

diff --git a/src/less/blocks/v2/layout.less b/src/less/blocks/v2/layout.less
@@ -181,6 +181,7 @@
 .media(@standard-desktop, { .generate-columns(@size: ~"l", @n: 23); });
 .media(@widescreen-desktop, { .generate-columns(@size: ~"xl", @n: 23); });
 
+.generate-margins(@size: ~"all");
 .media(@tablet-flexible, { .generate-margins(@size: ~"xs"); });
 .media(@tablet, { .generate-margins(@size: ~"s"); });
 .media(@narrow-desktop, { .generate-margins(@size: ~"m"); });

diff --git a/src/pages/user-bio.js b/src/pages/user-bio.js
@@ -39,6 +39,7 @@ import Button from '../components/button';
 import VisibilitySensor from '../components/visibility-sensor';
 import NotFound from './not-found';
 import BaseUserPageWithoutHeader from './base/user-without_header';
+import RiverItemCreateForm from '../components/river/type/text/create-form';
 
 class UserBioPage extends React.Component {
   static displayName = 'UserBioPage';
@@ -166,6 +167,30 @@ class UserBioPage extends React.Component {
             onUpdate={this.handleUpdateProfilePost}
           />
           {loadMore}
+          <div className="margin--all_top">
+            <div className="bio__river-item bio__river-item--type_form">
+              <h5 className="bio__title">Add:</h5>
+              <RiverItemCreateForm
+                cancel={{ hide: true }}
+                className="bio__create-post-form"
+                icon={
+                  <div className="bio__icon">
+                    <Avatar isRound={false} size={26} user={user} />
+                  </div>
+                }
+                input={{
+                  className: 'bio__post--type_text',
+                  placeholder: ''
+                }}
+                submit={{
+                  className: 'button-wide bio__button',
+                  color: 'dark_blue',
+                  title: 'Post'
+                }}
+                onSubmit={this.handleCreateProfilePost}
+              />
+            </div>
+          </div>
         </div>
       </BaseUserPageWithoutHeader>
     );