Progress

app/javascript/gabsocial/layouts/profile_layout.js

@@ -1,15 +1,25 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Sticky from 'react-stickynode'
+import { me } from '../initial_state'
+import LinkFooter from '../components/link_footer'
+import ProfileStatsPanel from '../components/panel/profile_stats_panel'
+import ProfileInfoPanel from '../components/panel/profile_info_panel'
+import MediaGalleryPanel from '../components/panel/media_gallery_panel'
 import NavigationBar from '../components/navigation_bar'
+import FooterBar from '../components/footer_bar'
 import ProfileHeader from '../components/profile_header'
+import ProfileNavigationBar from '../components/profile_navigation_bar'
+import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
+import Responsive from '../features/ui/util/responsive_component';
+import Divider from '../components/divider';
 
 export default class ProfileLayout extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
     children: PropTypes.node.isRequired,
-    layout: PropTypes.object,
     title: PropTypes.string,
   }
 
@@ -17,49 +27,103 @@ export default class ProfileLayout extends ImmutablePureComponent {
     const {
       account,
       children,
-      layout,
       title,
     } = this.props
 
     return (
       <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          {
+            !!me &&
+            <ProfileNavigationBar title={title} />
+          }
+          {
+            !me &&
+            <LoggedOutNavigationBar />
+          }
 
-        <NavigationBar />
+          <main role='main' className={[_s.default, _s.width100PC].join(' ')}>
 
-        <main role='main' className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.pb15].join(' ')}>
 
-          <div className={[_s.default, _s.width100PC, _s.flexRow, _s.pb15].join(' ')}>
+              <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+                <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
 
-            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-              <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+                  <ProfileHeader account={account}>
+                    <ProfileInfoPanel account={account} noPanel />
+                    <Divider isSmall />
+                    <ProfileStatsPanel account={account} noPanel />
+                  </ProfileHeader>
 
-                <ProfileHeader account={account} />
-
-                <div className={[_s.default, _s.width1015PX,, _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
-                  <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
-                    <Sticky top={63} enabled>
-                      <div className={[_s.default, _s.width340PX].join(' ')}>
-                        {layout}
+                  <div className={[_s.default, _s.width100PC, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
+                    <div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
+                      <div className={_s.default}>
+                        {children}
                       </div>
-                    </Sticky>
-                  </div>
-                  <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-                    <div className={_s.default}>
-                      {children}
                     </div>
                   </div>
-                </div>
 
+                </div>
               </div>
+
+
             </div>
 
+          </main>
 
-          </div>
+          <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+            <FooterBar />
+          </Responsive>
+        </Responsive>
 
-        </main>
+        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+          {
+            me &&
+            <NavigationBar />
+          }
+          {
+            !me &&
+            <LoggedOutNavigationBar />
+          }
+
+          <main role='main' className={[_s.default, _s.width100PC].join(' ')}>
+
+            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.pb15].join(' ')}>
+
+              <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+                <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+
+                  <ProfileHeader account={account} />
+
+                  <div className={[_s.default, _s.width1015PX, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
+                    <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
+                      <Sticky top={63} enabled>
+                        <div className={[_s.default, _s.width340PX].join(' ')}>
+                          <ProfileStatsPanel account={account} />
+                          <ProfileInfoPanel account={account} />
+                          <MediaGalleryPanel account={account} />
+                          <LinkFooter />
+                        </div>
+                      </Sticky>
+                    </div>
+                    <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                      <div className={_s.default}>
+                        {children}
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+
+
+            </div>
+
+          </main>
+        </Responsive>
 
       </div>
     )
   }
 
-}
+}