Progress

app/javascript/gabsocial/actions/notifications.js

@@ -157,6 +157,8 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
       return;
     }
 
+    console.log("activeFilter:", activeFilter)
+
     const params = {
       max_id: maxId,
       exclude_types: activeFilter === 'all' ? null : excludeTypesFromFilter(activeFilter),

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -236,7 +236,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       outlineNone: 1,
       lineHeight125: 1,
       colorPrimary: 1,
-      height100PC: small,
       width100PC: !small,
       pt15: !small,
       px15: !small,
@@ -253,7 +252,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       default: 1,
       maxWidth100PC: 1,
       flexGrow1: small,
-      height100PC: small,
       justifyContentCenter: small,
     })
 
@@ -261,7 +259,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       return (
         <Fragment>
           <div className={textareaContainerClasses}>
-            <Textarea
+            {/*<Textarea
               inputRef={this.setTextbox}
               className={textareaClasses}
               disabled={disabled}
@@ -275,9 +273,9 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
               // onBlur={this.onBlur}
               // onPaste={this.onPaste}
               aria-autocomplete='list'
-            />
+            />*/}
 
-            {/*<Composer
+            <Composer
               inputRef={this.setTextbox}
               disabled={disabled}
               placeholder={placeholder}
@@ -290,7 +288,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
               onBlur={this.onBlur}
               onPaste={this.onPaste}
               small={small}
-            />*/}
+            />
 
             {children}
           </div>

app/javascript/gabsocial/components/back_button.js

@@ -0,0 +1,48 @@
+import Button from './button'
+
+export default class BackButton extends PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  static propTypes = {
+    classNames: PropTypes.string,
+    iconClassName: PropTypes.string,
+    iconSize: PropTypes.string,
+  }
+
+  historyBack = () => {
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push('/home')
+    } else {
+      this.context.router.history.goBack()
+    }
+  }
+
+  handleBackClick = () => {
+    this.historyBack()
+  }
+
+  render() {
+    const {
+      classNames,
+      iconClassName,
+      iconSize,
+    } = this.props
+              
+    return (
+      <Button
+        noClasses
+        color='primary'
+        backgroundColor='none'
+        className={classNames || [_s.alignItemsCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
+        icon='arrow-left'
+        iconSize={iconSize || '24px'}
+        iconClassName={iconClassName || [_s.mr5, _s.fillPrimary].join(' ')}
+        onClick={this.handleBackClick}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/comment_list.js

@@ -4,7 +4,7 @@ import Button from './button'
 import Comment from './comment'
 import ScrollableList from './scrollable_list'
 import Text from './text'
-import { PureComponent } from 'react';
+import Dummy from './dummy'
 
 export default class CommentList extends ImmutablePureComponent {
 
@@ -27,7 +27,7 @@ export default class CommentList extends ImmutablePureComponent {
     const upperLimit = commentsLimited ? 6 : size
     const max = Math.min(commentsLimited ? 2 : upperLimit, size)
 
-    const Wrapper = !commentsLimited ? ScrollableList : DummyContainer
+    const Wrapper = !commentsLimited ? ScrollableList : Dummy
 
     return (
       <div>
@@ -70,10 +70,4 @@ export default class CommentList extends ImmutablePureComponent {
     )
   }
 
-}
-
-class DummyContainer extends PureComponent {
-  render() {
-    return <div>{this.props.children}</div>
-  }
 }

app/javascript/gabsocial/components/composer.js

@@ -201,8 +201,9 @@ class Composer extends PureComponent {
       pt15: !small,
       px15: !small,
       px10: small,
-      pt10: small,
+      pt5: small,
-      pb10: 1,
+      pb5: small,
+      pb10: !small,
     })
 
     return (

app/javascript/gabsocial/components/dummy.js

@@ -0,0 +1,5 @@
+export default class Dummy extends PureComponent {
+  render() {
+    return <div>{this.props.children}</div>
+  }
+}

app/javascript/gabsocial/components/error_boundary.js

@@ -71,7 +71,7 @@ export default class ErrorBoundary extends PureComponent {
 
               <h1 className={[_s.default, _s.mr15].join(' ')}>
                 <Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
-                  <Icon id='gab-logo' className={_s.fillWhite} />
+                  <Icon id='logo' className={_s.fillWhite} />
                 </Button>
               </h1>
 

app/javascript/gabsocial/components/group_header.js

@@ -4,7 +4,11 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { openPopover, closePopover } from '../actions/popover'
 import { openModal } from '../actions/modal'
 import { joinGroup, leaveGroup } from '../actions/groups'
-import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants'
+import {
+  PLACEHOLDER_MISSING_HEADER_SRC,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../constants'
+import Responsive from '../features/ui/util/responsive_component'
 import Button from './button'
 import Block from './block'
 import Image from './image'
@@ -46,6 +50,7 @@ class GroupHeader extends ImmutablePureComponent {
 
   static propTypes = {
     group: ImmutablePropTypes.map,
+    children: PropTypes.any,
     intl: PropTypes.object.isRequired,
     onToggleMembership: PropTypes.func.isRequired,
     onOpenGroupOptions: PropTypes.func.isRequired,
@@ -67,6 +72,7 @@ class GroupHeader extends ImmutablePureComponent {
 
   render() {
     const {
+      children,
       group,
       intl,
       relationships,
@@ -90,8 +96,8 @@ class GroupHeader extends ImmutablePureComponent {
       actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave)
       if (isMember) {
         actionButtonOptions = {
-          backgroundColor: 'tertiary',
+          backgroundColor: 'danger',
-          color: 'primary',
+          color: 'white',
         }
       }
     }
@@ -99,25 +105,24 @@ class GroupHeader extends ImmutablePureComponent {
     // : todo :
     // {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
 
-    // const adminMenu = [
-    // 	{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
-    // 	{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
-    // ]
-
     return (
       <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
-        <Block>
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
-            
+            <div className={[_s.default, _s.width100PC].join(' ')}>
-            {
-              coverSrc && !coverSrcMissing &&
-              <Image className={_s.height350PX} src={coverSrc} alt={title} />
-            }
 
-            <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
+              {
-              <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
+                coverSrc && !coverSrcMissing &&
-                <TabBar tabs={tabs} />
+                <Image className={_s.height200PX} src={coverSrc} alt={title} />
-                <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
+              }
+
+              <div className={[_s.default, _s.width100PC].join(' ')}>
+
+                <div className={[_s.default, _s.width100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
+                  {children}
+                </div>
+
+                <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.mt5, _s.pt15, _s.height100PC, _s.px15].join(' ')}>
                   {
                     !!actionButtonTitle &&
                     <Button
@@ -126,12 +131,12 @@ class GroupHeader extends ImmutablePureComponent {
                       onClick={this.handleOnToggleMembership}
                       {...actionButtonOptions}
                     >
-                      <Text color='inherit' size='small'>
+                      <Text color='inherit' size='small' className={_s.px10}>
                         {actionButtonTitle}
                       </Text>
                     </Button>
                   }
-                 
+
                   <Button
                     radiusSmall
                     color='primary'
@@ -142,10 +147,60 @@ class GroupHeader extends ImmutablePureComponent {
                     buttonRef={this.setInfoBtn}
                   />
                 </div>
+
+                <div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt15, _s.pt10, _s.px10].join(' ')}>
+
+                  <TabBar tabs={tabs} />
+
+                </div>
               </div>
             </div>
           </div>
-        </Block>
+        </Responsive>
+
+        { /** desktop */}
+        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+          <Block>
+            <div className={[_s.default, _s.width100PC].join(' ')}>
+
+              {
+                coverSrc && !coverSrcMissing &&
+                <Image className={_s.height350PX} src={coverSrc} alt={title} />
+              }
+
+              <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
+                <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
+                  <TabBar tabs={tabs} />
+                  <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
+                    {
+                      !!actionButtonTitle &&
+                      <Button
+                        radiusSmall
+                        className={_s.mr5}
+                        onClick={this.handleOnToggleMembership}
+                        {...actionButtonOptions}
+                      >
+                        <Text color='inherit' size='small' className={_s.px10}>
+                          {actionButtonTitle}
+                        </Text>
+                      </Button>
+                    }
+
+                    <Button
+                      radiusSmall
+                      color='primary'
+                      backgroundColor='tertiary'
+                      className={_s.mr5}
+                      icon='ellipsis'
+                      onClick={this.handleOnOpenGroupOptions}
+                      buttonRef={this.setInfoBtn}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Block>
+        </Responsive>
       </div>
     )
   }

app/javascript/gabsocial/components/icon.js

@@ -96,7 +96,7 @@ const ICONS = {
   'error': ErrorIcon,
   'explore': ExploreIcon,
   'fullscreen': FullscreenIcon,
-  'gab-logo': GabLogoIcon,
+  'logo': GabLogoIcon,
   'gif': GifIcon,
   'globe': GlobeIcon,
   'group': GroupIcon,

app/javascript/gabsocial/components/logged_out_navigation_bar.js

@@ -0,0 +1,80 @@
+import Button from './button'
+import Search from './search'
+import Text from './text'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component';
+
+export default class LoggedOutNavigationBar extends PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+  }
+
+  render() {
+    return (
+      <ResponsiveClassesComponent
+        classNames={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}
+        classNamesXS={[_s.default, _s.z4, _s.height98PX, _s.width100PC].join(' ')}
+      >
+        <ResponsiveClassesComponent
+          classNames={[_s.default, _s.height53PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNamesXS={[_s.default, _s.height98PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+        >
+
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.flexRow, _s.width330PX].join(' ')}
+            classNamesXS={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
+          >
+
+            <Button
+              href='/'
+              color='none'
+              backgroundColor='none'
+              icon='logo'
+              iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
+            />
+
+            <div className={[_s.default, _s.flexGrow1, _s.mr10].join(' ')}>
+              <Search />
+            </div>
+
+          </ResponsiveClassesComponent>
+
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width330PX, _s.mlAuto].join(' ')}
+            classNamesXS={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width100PC].join(' ')}
+          >
+
+            <Button
+              isNarrow
+              isOutline
+              color='white'
+              backgroundColor='none'
+              href='/auth/log_in'
+              className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py5].join(' ')}
+            >
+              <Text color='inherit' weight='medium' align='center'>
+                Log in
+              </Text>
+            </Button>
+
+            <Button
+              isNarrow
+              color='brand'
+              backgroundColor='white'
+              href='/auth/sign_up'
+              className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py5].join(' ')}
+            >
+              <Text color='inherit' weight='bold' align='center'>
+                Sign up
+              </Text>
+            </Button>
+
+          </ResponsiveClassesComponent>
+
+        </ResponsiveClassesComponent>
+      </ResponsiveClassesComponent>
+    )
+  }
+
+}

app/javascript/gabsocial/components/navigation_bar.js

@@ -80,7 +80,7 @@ class NavigationBar extends ImmutablePureComponent {
                     backgroundColor='none'
                     className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
                   >
-                    <Icon id='gab-logo' className={_s.fillNavigationBrand} />
+                    <Icon id='logo' className={_s.fillNavigationBrand} />
                   </Button>
                 </h1>
 

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -8,6 +8,7 @@ import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
 import Button from '../button'
 import Divider from '../divider'
+import Dummy from '../dummy'
 import Icon from '../icon'
 import Text from '../text'
 import RelativeTimestamp from '../relative_timestamp'
@@ -19,7 +20,6 @@ const messages = defineMessages({
 
 const mapDispatchToProps = (dispatch) => ({
   onOpenGroupMembersModal(groupId) {
-    console.log("onOpenGroupMembersModal:", groupId)
     dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
   },
 })
@@ -33,6 +33,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
     group: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
     onOpenGroupMembersModal: PropTypes.func.isRequired,
+    noPanel: PropTypes.bool,
   }
 
   handleOnOpenGroupMembersModal = () => {
@@ -40,10 +41,12 @@ class GroupInfoPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, group } = this.props
+    const { intl, group, noPanel } = this.props
+
+    const Wrapper = noPanel ? Dummy : PanelLayout
 
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
+      <Wrapper title={intl.formatMessage(messages.title)}>
         {
           !!group &&
           <Fragment>
@@ -102,7 +105,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
             </Text>
           </Fragment>
         }
-      </PanelLayout>
+      </Wrapper>
     )
   }
 }

app/javascript/gabsocial/components/panel/lists_panel.js

@@ -38,20 +38,8 @@ class ListsPanel extends ImmutablePureComponent {
     'lists',
   ]
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  componentDidMount(prevProps, prevState, snapshot) {
-    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
+    this.props.onFetchLists()
-      return {
-        fetched: true,
-      }
-    }
-
-    return null
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (!prevState.fetched && this.state.fetched) {
-      this.props.onFetchLists()
-    }
   }
 
   render() {

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -81,4 +81,4 @@ class MediaGalleryPanel extends ImmutablePureComponent {
       </PanelLayout>
     )
   }
-}
+}

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -9,6 +9,7 @@ import PanelLayout from './panel_layout'
 import Divider from '../divider'
 import Icon from '../icon'
 import Text from '../text'
+import Dummy from '../dummy'
 
 const messages = defineMessages({
   title: { id: 'about', defaultMessage: 'About' },
@@ -39,6 +40,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
   static propTypes = {
     identityProofs: ImmutablePropTypes.list,
     account: ImmutablePropTypes.map,
+    noPanel: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   }
 
@@ -47,7 +49,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, account, identityProofs } = this.props
+    const {
+      intl,
+      account,
+      identityProofs,
+      noPanel
+    } = this.props
 
     if (!account) return null
 
@@ -60,8 +67,10 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const isInvestor = account.get('is_investor')
     const hasBadges = isPro || isDonor || isInvestor
 
+    const Wrapper = noPanel ? Dummy : PanelLayout
+
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
+      <Wrapper title={intl.formatMessage(messages.title)}>
         <div className={[_s.default].join(' ')}>
           {
             hasNote &&
@@ -166,7 +175,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
           )}
 
         </div>
-      </PanelLayout>
+      </Wrapper>
     )
   }
 }

app/javascript/gabsocial/components/panel/profile_stats_panel.js

@@ -5,6 +5,8 @@ import { me, favouritesCount } from '../../initial_state'
 import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
 import UserStat from '../user_stat'
+import Dummy from '../dummy'
+import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
 
 const messages = defineMessages({
   gabs: { id: 'account.gabs', defaultMessage: 'Gabs' },
@@ -20,32 +22,45 @@ class ProfileStatsPanel extends ImmutablePureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
+    noPanel: PropTypes.bool,
   }
 
   render() {
-    const { intl, account } = this.props
+    const {
+      intl,
+      account,
+      noPanel
+    } = this.props
 
     if (!account) return null
 
+    const Wrapper = noPanel ? Dummy : PanelLayout
+
     return (
-      <PanelLayout>
+      <Wrapper>
         {
           !!account &&
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.flexRow].join(' ')}
+            classNamesXS={[_s.default, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
+          >
             <UserStat
               title={intl.formatMessage(messages.gabs)}
               value={shortNumberFormat(account.get('statuses_count'))}
               to={`/${account.get('acct')}`}
+              isCentered={noPanel}
             />
             <UserStat
               title={intl.formatMessage(messages.follows)}
               value={shortNumberFormat(account.get('following_count'))}
               to={`/${account.get('acct')}/following`}
+              isCentered={noPanel}
             />
             <UserStat
               title={intl.formatMessage(messages.followers)}
               value={shortNumberFormat(account.get('followers_count'))}
               to={`/${account.get('acct')}/followers`}
+              isCentered={noPanel}
             />
             {
               account.get('id') === me &&
@@ -53,11 +68,12 @@ class ProfileStatsPanel extends ImmutablePureComponent {
                 title={intl.formatMessage(messages.likes)}
                 value={shortNumberFormat(favouritesCount)}
                 to={`/${account.get('acct')}/likes`}
+                isCentered={noPanel}
               />
             }
-          </div>
+          </ResponsiveClassesComponent>
         }
-      </PanelLayout>
+      </Wrapper>
     )
   }
 }

app/javascript/gabsocial/components/profile_header.js

@@ -7,6 +7,7 @@ import {
   POPOVER_PROFILE_OPTIONS,
   PLACEHOLDER_MISSING_HEADER_SRC,
   MODAL_EDIT_PROFILE,
+  BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
 import { openModal } from '../actions/modal'
 import { openPopover } from '../actions/popover'
@@ -19,6 +20,7 @@ import Image from './image'
 import MovedNote from './moved_note'
 import TabBar from './tab_bar'
 import Text from './text'
+import Responsive from '../features/ui/util/responsive_component';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -51,6 +53,7 @@ class ProfileHeader extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
+    children: PropTypes.any,
     intl: PropTypes.object.isRequired,
     onEditProfile: PropTypes.func.isRequired,
     openProfileOptionsPopover: PropTypes.func.isRequired,
@@ -87,7 +90,11 @@ class ProfileHeader extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl } = this.props
+    const {
+      account,
+      children,
+      intl,
+    } = this.props
     const { stickied } = this.state
 
     const tabs = !account ? null : [
@@ -108,7 +115,7 @@ class ProfileHeader extends ImmutablePureComponent {
     const headerSrc = !!account ? account.get('header') : ''
     const headerMissing = headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !headerSrc
     const avatarSize = headerMissing ? 75 : 150
-    const top = headerMissing ? -30 : -380
+    const top = headerMissing ? -46 : -380
 
     const avatarContainerClasses = CX({
       default: 1,
@@ -130,55 +137,51 @@ class ProfileHeader extends ImmutablePureComponent {
       displayNone: stickied,
     })
 
+    const mobileAvatarContainerClasses = CX({
+      default: 1,
+      circle: 1,
+      boxShadowProfileAvatar: 1,
+      mtNeg50PX: !headerMissing,
+    })
+
     return (
       <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
-        <Sticky top={top} enabled onStateChange={this.onStickyStateChange}>
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
 
-            <div className={[_s.default, _s.width1015PX].join(' ')}>
+            <div className={[_s.default, _s.width100PC].join(' ')}>
               {
                 !headerMissing &&
-                <div className={[_s.default, _s.height350PX, _s.width100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
+                <div className={[_s.default, _s.height200PX, _s.px10, _s.width100PC, _s.mt10, _s.overflowHidden].join(' ')}>
                   <Image
                     alt={intl.formatMessage(messages.headerPhoto)}
-                    className={_s.height350PX}
+                    className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.height100PC].join(' ')}
                     src={headerSrc}
                   />
                 </div>
               }
               {
                 headerMissing &&
-                <div className={[_s.default, _s.py10, _s.width100PC].join(' ')} />
+                <div className={[_s.default, _s.height20PX, _s.width100PC].join(' ')} />
               }
 
               <div className={[_s.default, _s.width100PC].join(' ')}>
 
-                <div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
+                <div className={[_s.default, _s.alignItemsCenter, _s.px15, _s.mb5].join(' ')}>
-                  <div className={avatarContainerClasses}>
+                  <div className={mobileAvatarContainerClasses}>
-                    <Avatar size={avatarSize} account={account} noHover />
+                    <Avatar size={100} account={account} noHover />
                   </div>
 
-                  <div className={[_s.default, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
+                  <div className={[_s.default, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
                     <DisplayName account={account} isMultiline noRelationship isLarge noHover />
                   </div>
                 </div>
 
 
-                <div className={[_s.default, _s.flexRow, _s.bgPrimary, _s.height53PX].join(' ')}>
+                <div className={[_s.default, _s.bgPrimary, _s.alignItemsCenter].join(' ')}>
-                  <div className={tabBarContainerClasses}>
-                    <TabBar tabs={tabs} isLarge />
-                  </div>
-
-                  <div className={stickyBarContainerClasses}>
-                    <Avatar size={36} account={account} noHover />
-                    <div className={[_s.default, _s.ml10].join(' ')}>
-                      <DisplayName account={account} noUsername noRelationship noHover isLarge />
-                    </div>
-                  </div>
-
                   {
                     account && account.get('id') === me &&
-                    <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                    <div className={[_s.default,_s.py5].join(' ')}>
                       <Button
                         isOutline
                         backgroundColor='none'
@@ -195,18 +198,7 @@ class ProfileHeader extends ImmutablePureComponent {
 
                   {
                     account && account.get('id') !== me &&
-                    <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                    <div className={[_s.default, _s.flexRow, _s.py5].join(' ')}>
-                      <Button
-                        isOutline
-                        icon='ellipsis'
-                        iconSize='18px'
-                        iconClassName={_s.inheritFill}
-                        color='brand'
-                        backgroundColor='none'
-                        className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
-                        onClick={this.handleOpenMore}
-                        buttonRef={this.setOpenMoreNodeRef}
-                      />
 
                       <form action='https://chat.gab.com/private-message' method='POST'>
                         <Button
@@ -221,16 +213,148 @@ class ProfileHeader extends ImmutablePureComponent {
                         />
                         <input type='hidden' value={account.get('username')} name='username' />
                       </form>
+                      
+                      <div className={[_s.default, _s.flexRow, _s.pb3, _s.mr10].join(' ')}>
+                        <AccountActionButton account={account} />
+                      </div>
 
-                      <AccountActionButton account={account} />
+                      <div>
+                        <Button
+                          isOutline
+                          icon='ellipsis'
+                          iconSize='18px'
+                          iconClassName={_s.inheritFill}
+                          color='brand'
+                          backgroundColor='none'
+                          className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.px10].join(' ')}
+                          onClick={this.handleOpenMore}
+                          buttonRef={this.setOpenMoreNodeRef}
+                        />
+                      </div>
 
                     </div>
                   }
+
+                  <div className={[_s.default, _s.width100PC, _s.px15, _s.mt15, _s.mb10, _s.pt15, _s.pb10].join(' ')}>
+                    {children}
+                  </div>
+
+                  <div className={[_s.default, _s.mt10].join(' ')}>
+                    <TabBar tabs={tabs} isLarge />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </Sticky>
+
+        </Responsive>
+
+        { /** desktop */ }
+        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+          <Sticky top={top} enabled onStateChange={this.onStickyStateChange}>
+            <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+
+              <div className={[_s.default, _s.width1015PX].join(' ')}>
+                {
+                  !headerMissing &&
+                  <div className={[_s.default, _s.height350PX, _s.width100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
+                    <Image
+                      alt={intl.formatMessage(messages.headerPhoto)}
+                      className={_s.height100PC}
+                      src={headerSrc}
+                    />
+                  </div>
+                }
+                {
+                  headerMissing &&
+                  <div className={[_s.default, _s.height20PX, _s.width100PC].join(' ')} />
+                }
+
+                <div className={[_s.default, _s.width100PC].join(' ')}>
+
+                  <div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
+                    <div className={avatarContainerClasses}>
+                      <Avatar size={avatarSize} account={account} noHover />
+                    </div>
+
+                    <div className={[_s.default, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
+                      <DisplayName account={account} isMultiline noRelationship isLarge noHover />
+                    </div>
+                  </div>
+
+
+                  <div className={[_s.default, _s.flexRow, _s.bgPrimary, _s.height53PX].join(' ')}>
+                    <div className={tabBarContainerClasses}>
+                      <TabBar tabs={tabs} isLarge />
+                    </div>
+
+                    <div className={stickyBarContainerClasses}>
+                      <Avatar size={36} account={account} noHover />
+                      <div className={[_s.default, _s.ml10].join(' ')}>
+                        <DisplayName account={account} noUsername noRelationship noHover isLarge />
+                      </div>
+                    </div>
+
+                    {
+                      account && account.get('id') === me &&
+                      <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                        <Button
+                          isOutline
+                          backgroundColor='none'
+                          color='brand'
+                          className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+                          onClick={this.handleOnEditProfile}
+                        >
+                          <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
+                            {intl.formatMessage(messages.editProfile)}
+                          </Text>
+                        </Button>
+                      </div>
+                    }
+
+                    {
+                      account && account.get('id') !== me &&
+                      <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                        <div>
+                          <Button
+                            isOutline
+                            icon='ellipsis'
+                            iconSize='18px'
+                            iconClassName={_s.inheritFill}
+                            color='brand'
+                            backgroundColor='none'
+                            className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
+                            onClick={this.handleOpenMore}
+                            buttonRef={this.setOpenMoreNodeRef}
+                          />
+                        </div>
+
+                        <form action='https://chat.gab.com/private-message' method='POST'>
+                          <Button
+                            isOutline
+                            type='submit'
+                            icon='chat'
+                            iconSize='18px'
+                            iconClassName={_s.inheritFill}
+                            color='brand'
+                            backgroundColor='none'
+                            className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
+                          />
+                          <input type='hidden' value={account.get('username')} name='username' />
+                        </form>
+
+                        <div className={[_s.default, _s.flexRow, _s.pb3].join(' ')}>
+                          <AccountActionButton account={account} />
+                        </div>
+
+                      </div>
+                    }
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Sticky>
+        </Responsive>
       </div>
     )
   }

app/javascript/gabsocial/components/profile_navigation_bar.js

@@ -0,0 +1,41 @@
+import BackButton from './back_button'
+import Heading from './heading'
+
+export default class ProfileNavigationBar extends PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+  }
+
+  render() {
+    const { title } = this.props
+
+    return (
+      <div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.height53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+
+          <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+
+            <BackButton
+              classNames={[_s.height53PX, _s.bgTransparent, _s.ml10, _s.mr10, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
+              iconSize='32px'
+              iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
+            />
+
+            <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
+              <Heading size='h1'>
+                <span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
+                  {title}
+                </span>
+              </Heading>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/search.js

@@ -1,5 +1,6 @@
 import { withRouter } from 'react-router-dom'
 import queryString from 'query-string'
+import { me } from '../initial_state'
 import { CX } from '../constants'
 import {
   changeSearch,
@@ -128,7 +129,7 @@ class Search extends PureComponent {
     })
 
     const prependIconColor = highlighted ? 'brand' : 'white'
-
+    const placeholder = !me ? 'Search Gab' : 'Search for people, groups or news'
     const id = 'nav-search'
       
     return (
@@ -140,7 +141,7 @@ class Search extends PureComponent {
             id={id}
             className={inputClasses}
             type='text'
-            placeholder='Search for people, groups or news'
+            placeholder={placeholder}
             ref={this.setTextbox}
             value={value}
             onKeyUp={this.handleKeyUp}

app/javascript/gabsocial/components/sidebar.js

@@ -12,6 +12,7 @@ import Responsive from '../features/ui/util/responsive_component'
 import SidebarSectionTitle from './sidebar_section_title'
 import SidebarSectionItem from './sidebar_section_item'
 import Heading from './heading'
+import BackButton from './back_button'
 import Pills from './pills'
 
 const messages = defineMessages({
@@ -227,16 +228,7 @@ class Sidebar extends ImmutablePureComponent {
                   <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                     {
                       showBackBtn &&
-                      <Button
+                      <BackButton />
-                        noClasses
-                        color='primary'
-                        backgroundColor='none'
-                        className={[_s.alignItemsCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
-                        icon='arrow-left'
-                        iconSize='24px'
-                        iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
-                        onClick={this.handleBackClick}
-                      />
                     }
                     <Heading size='h1'>
                       {title}

app/javascript/gabsocial/components/status.js

@@ -535,9 +535,12 @@ class Status extends ImmutablePureComponent {
 
                   {
                     !isChild && !compactMode && !!me &&
-                    <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}>
+                    <ResponsiveClassesComponent
+                      classNames={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
+                      classNamesXS={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}
+                    >
                       <ComposeFormContainer replyToId={status.get('id')} shouldCondense />
-                    </div>
+                    </ResponsiveClassesComponent>
                   }
 
                   {

app/javascript/gabsocial/components/tab_bar.js

@@ -1,3 +1,4 @@
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component';
 import TabBarItem from './tab_bar_item'
 
 /**
@@ -16,7 +17,10 @@ export default class TabBar extends PureComponent {
     const { tabs, isLarge } = this.props
 
     return (
-      <div className={[_s.default, _s.height53PX, _s.px5, _s.flexRow].join(' ')}>
+      <ResponsiveClassesComponent
+        classNames={[_s.default, _s.height53PX, _s.px5, _s.flexRow].join(' ')}
+        classNamesXS={[_s.default, _s.height40PX, _s.px5, _s.flexRow].join(' ')}
+      >
         {
           // Check for if tabs exist or not.
           // We don't `return null` because it maintains 53px height if no tabs.
@@ -32,7 +36,7 @@ export default class TabBar extends PureComponent {
             />
           ))
         }
-      </div>
+      </ResponsiveClassesComponent>
     )
   }
 

app/javascript/gabsocial/components/tab_bar_item.js

@@ -56,7 +56,7 @@ class TabBarItem extends PureComponent {
 
     const containerClasses = CX({
       default: 1,
-      height53PX: 1,
+      height100PC: 1,
       noUnderline: 1,
       text: 1,
       displayFlex: 1,

app/javascript/gabsocial/components/user_stat.js

@@ -1,4 +1,5 @@
 import { NavLink } from 'react-router-dom'
+import { CX } from '../constants'
 import Text from './text'
 
 /**
@@ -17,6 +18,7 @@ export default class UserStat extends PureComponent {
       PropTypes.number,
       PropTypes.object,
     ]).isRequired,
+    isCentered: PropTypes.bool.isRequired,
   }
 
   state = {
@@ -32,21 +34,36 @@ export default class UserStat extends PureComponent {
   }
 
   render() {
-    const { to, title, value } = this.props
+    const {
+      to,
+      title,
+      value,
+      isCentered,
+    } = this.props
     const { hovering } = this.state
 
+    const align = isCentered ? 'center' : 'left'
+    const containerClasses = CX({
+      default: 1,
+      cursorPointer: 1,
+      noUnderline: 1,
+      flexNormal: isCentered,
+      flexGrow1: !isCentered,
+      pr15: !isCentered,
+    })
+
     return (
       <NavLink
         to={to}
         title={`${value} ${title}`}
-        className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.pr15].join(' ')}
+        className={containerClasses}
         onMouseEnter={this.handleOnMouseEnter}
         onMouseLeave={this.handleOnMouseLeave}
       >
-        <Text size='large' weight='bold' color='brand'>
+        <Text size='large' weight='bold' color='brand' align={align}>
           {value}
         </Text>
-        <Text size='small' weight='medium' color='secondary' hasUnderline={hovering}>
+        <Text size='small' weight='medium' color='secondary' hasUnderline={hovering} align={align}>
           {title}
         </Text>
       </NavLink>

app/javascript/gabsocial/containers/status_container.js

@@ -208,6 +208,18 @@ const mapDispatchToProps = (dispatch) => ({
     }
   },
 
+  onOpenLikes(status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
+    dispatch(openModal('STATUS_LIKES', { status }))
+  },
+    
+  onOpenReposts(status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
+    dispatch(openModal('STATUS_REPOSTS', { status }))
+  },
+  
   onFetchComments(statusId) {
     dispatch(fetchComments(statusId))
   },
@@ -216,14 +228,6 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(fetchContext(statusId))
   },
 
-  onOpenLikes(status) {
-    dispatch(openModal('STATUS_LIKES', { status }))
-  },
-    
-  onOpenReposts(status) {
-    dispatch(openModal('STATUS_REPOSTS', { status }))
-  },
-
 });
 
 export default connect(makeMapStateToProps, mapDispatchToProps)(Status);

app/javascript/gabsocial/features/compose/components/compose_extra_button.js

@@ -27,6 +27,14 @@ export default class ComposeExtraButton extends PureComponent {
     } = this.props
 
     const btnClasses = cx({
+      default: 1,
+      circle: 1,
+      noUnderline: 1,
+      font: 1,
+      cursorPointer: 1,
+      textAlignCenter: 1,
+      outlineNone: 1,
+      bgTransparent: 1,
       bgSubtle_onHover: !active,
       bgBrandLight: active,
       py10: !small,
@@ -45,6 +53,7 @@ export default class ComposeExtraButton extends PureComponent {
 
     const button = (
       <Button
+        noClasses
         className={btnClasses}
         title={title}
         isDisabled={disabled}

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -12,6 +12,7 @@ import {
 } from '../../../constants'
 import AutosuggestTextbox from '../../../components/autosuggest_textbox'
 import Responsive from '../../ui/util/responsive_component'
+import ResponsiveClassesComponent from '../../ui/util/responsive_classes_component'
 import Avatar from '../../../components/avatar'
 import Button from '../../../components/button'
 import CharacterCounter from '../../../components/character_counter'
@@ -254,6 +255,8 @@ class ComposeForm extends ImmutablePureComponent {
       flexWrap: 1,
       overflowHidden: 1,
       flex1: 1,
+      heightMin28PX: 1,
+      py2: shouldCondense,
       alignItemsEnd: shouldCondense,
       flexRow: shouldCondense,
       radiusSmall: shouldCondense,
@@ -267,8 +270,9 @@ class ComposeForm extends ImmutablePureComponent {
       alignItemsCenter: !shouldCondense,
       alignItemsStart: shouldCondense,
       mt10: !shouldCondense,
-      px15: !shouldCondense,
+      px10: !shouldCondense,
       mlAuto: shouldCondense,
+      flexWrap: !shouldCondense,
     })
 
     const commentPublishBtnClasses = CX({
@@ -285,7 +289,7 @@ class ComposeForm extends ImmutablePureComponent {
             <div className={[_s.default, _s.width100PC].join(' ')}>
 
               <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.mr10, _s.mt5].join(' ')}>
+                <div className={[_s.default, _s.mr10].join(' ')}>
                   <Avatar account={account} size={28} noHover />
                 </div>
 

app/javascript/gabsocial/features/search.js

@@ -1,16 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { FormattedMessage } from 'react-intl'
 import { withRouter } from 'react-router-dom'
 import { fetchSuggestions, dismissSuggestion } from '../actions/suggestions'
+import { me } from '../initial_state'
 import HashtagItem from '../components/hashtag_item'
-import Icon from '../components/icon'
-import { WhoToFollowPanel } from '../components/panel'
-// import TrendsPanel from '../ui/components/trends_panel'
 import GroupListItem from '../components/group_list_item'
-import Block from '../components/block'
-import Heading from '../components/heading'
-import Button from '../components/button'
 import Text from '../components/text'
 import Account from '../components/account'
 import PanelLayout from '../components/panel/panel_layout'
@@ -91,7 +85,7 @@ class Search extends ImmutablePureComponent {
       )
     }
 
-    if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
+    if (results.get('groups') && results.get('groups').size > 0 && me && (isTop || showGroups)) {
       const size = isTop ? Math.min(results.get('groups').size, theLimit) : results.get('groups').size;
       const isMax = size === results.get('groups').size
 
@@ -123,7 +117,7 @@ class Search extends ImmutablePureComponent {
       )
     }
 
-    if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
+    if (results.get('hashtags') && results.get('hashtags').size > 0 && me && (isTop || showHashtags)) {
       const size = isTop ? Math.min(results.get('hashtags').size, theLimit) : results.get('hashtags').size;
       const isMax = size === results.get('hashtags').size
 

app/javascript/gabsocial/features/ui/ui.js

@@ -170,7 +170,7 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/notifications' exact page={NotificationsPage} component={Notifications} content={children} />
 
         <WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
-        <WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />
+        <WrappedRoute path='/search/people' exact publicRoute page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
 
@@ -350,12 +350,8 @@ class UI extends PureComponent {
     }
   }
 
-  // componentWillMount() {
-    
-  // }
-
   componentDidMount() {
-    // if (!me) return
+    if (!me) return
 
     window.addEventListener('beforeunload', this.handleBeforeUnload, false)
 
@@ -373,13 +369,12 @@ class UI extends PureComponent {
       window.setTimeout(() => Notification.requestPermission(), 120 * 1000)
     }
 
-    if (me) {
+    this.props.dispatch(expandHomeTimeline())
-      this.props.dispatch(expandHomeTimeline())
+    this.props.dispatch(initializeNotifications())
-      this.props.dispatch(expandNotifications())
-      this.props.dispatch(initializeNotifications())
 
-      setTimeout(() => this.props.dispatch(fetchFilters()), 500)
+    setTimeout(() => {
-    }
+      this.props.dispatch(fetchFilters())
+    }, 500)
     // this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
     //   return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName)
     // }
@@ -394,11 +389,11 @@ class UI extends PureComponent {
     document.removeEventListener('dragend', this.handleDragEnd)
   }
 
-  setRef = c => {
+  setRef = (c) => {
     this.node = c
   }
 
-  handleHotkeyNew = e => {
+  handleHotkeyNew = (e) => {
     e.preventDefault()
 
     const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea')
@@ -408,7 +403,7 @@ class UI extends PureComponent {
     }
   }
 
-  handleHotkeySearch = e => {
+  handleHotkeySearch = (e) => {
     e.preventDefault()
 
     const element = this.node.querySelector('.search__input')
@@ -418,7 +413,7 @@ class UI extends PureComponent {
     }
   }
 
-  handleHotkeyForceNew = e => {
+  handleHotkeyForceNew = (e) => {
     this.handleHotkeyNew(e)
     this.props.dispatch(resetCompose())
   }
@@ -431,7 +426,7 @@ class UI extends PureComponent {
     }
   }
 
-  setHotkeysRef = c => {
+  setHotkeysRef = (c) => {
     this.hotkeys = c
   }
 

app/javascript/gabsocial/layouts/group_layout.js

@@ -1,8 +1,14 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Sticky from 'react-stickynode'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Layout from './layout'
+import GroupInfoPanel from '../components/panel/group_info_panel'
+import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+import GroupSidebarPanel from '../components/panel/groups_panel'
+import LinkFooter from '../components/link_footer'
 import GroupHeader from '../components/group_header'
+import Responsive from '../features/ui/util/responsive_component';
 
 export default class GroupLayout extends ImmutablePureComponent {
 
@@ -25,6 +31,7 @@ export default class GroupLayout extends ImmutablePureComponent {
       relationships,
       showBackBtn,
       title,
+      noComposeButton,
     } = this.props
 
     return (
@@ -33,28 +40,47 @@ export default class GroupLayout extends ImmutablePureComponent {
         actions={actions}
         showBackBtn={showBackBtn}
         title={title}
+        noComposeButton
       >
-        <div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <div className={[_s.default, _s.width100PC].join(' ')}>
 
-          <GroupHeader group={group} relationships={relationships} />
+            <GroupHeader group={group} relationships={relationships}>
+              <GroupInfoPanel group={group} noPanel />
+            </GroupHeader>
 
-          <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
+            <div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
-            <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+              {children}
-              <div className={_s.default}>
+            </div>
-                {children}
+
+          </div>
+        </Responsive>
+
+        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+          <div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
+
+            <GroupHeader group={group} relationships={relationships} />
+
+            <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
+              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                <div className={_s.default}>
+                  {children}
+                </div>
+              </div>
+
+              <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
+                <Sticky top={73} enabled>
+                  <div className={[_s.default, _s.width340PX].join(' ')}>
+                    <GroupInfoPanel group={group} />
+                    <WhoToFollowPanel />
+                    <GroupSidebarPanel isSlim />
+                    <LinkFooter />
+                  </div>
+                </Sticky>
               </div>
             </div>
-
-            <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
-              <Sticky top={73} enabled>
-                <div className={[_s.default, _s.width340PX].join(' ')}>
-                  {layout}
-                </div>
-              </Sticky>
-            </div>
           </div>
-
+        </Responsive>
-        </div>
       </Layout>
     )
   }

app/javascript/gabsocial/layouts/layout.js

@@ -1,7 +1,9 @@
 import Sticky from 'react-stickynode'
 import Sidebar from '../components/sidebar'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import { me } from '../initial_state'
 import NavigationBar from '../components/navigation_bar'
+import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
 import FooterBar from '../components/footer_bar'
 import FloatingActionButton from '../components/floating_action_button'
 import Responsive from '../features/ui/util/responsive_component'
@@ -38,12 +40,19 @@ export default class Layout extends PureComponent {
     return (
       <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
-        <NavigationBar
+        {
-          actions={actions}
+          me &&
-          tabs={tabs}
+          <NavigationBar
-          title={title}
+            actions={actions}
-          showBackBtn={showBackBtn}
+            tabs={tabs}
-        />
+            title={title}
+            showBackBtn={showBackBtn}
+          />
+        }
+        {
+          !me &&
+          <LoggedOutNavigationBar />
+        }
 
         <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
           {
@@ -57,7 +66,7 @@ export default class Layout extends PureComponent {
               />
             </Responsive>
           }
-          
+
           <ResponsiveClassesComponent
             classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
             classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}

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(' ')}>
+                  <ProfileHeader account={account}>
-              <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+                    <ProfileInfoPanel account={account} noPanel />
+                    <Divider isSmall />
+                    <ProfileStatsPanel account={account} noPanel />
+                  </ProfileHeader>
 
-                <ProfileHeader account={account} />
+                  <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, _s.width1015PX,, _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
+                      <div className={_s.default}>
-                  <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
+                        {children}
-                    <Sticky top={63} enabled>
-                      <div className={[_s.default, _s.width340PX].join(' ')}>
-                        {layout}
                       </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>
     )
   }
 
-}
+}

app/javascript/gabsocial/pages/group_page.js

@@ -4,11 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { fetchGroup } from '../actions/groups'
 import PageTitle from '../features/ui/util/page_title'
-import GroupInfoPanel from '../components/panel/group_info_panel'
 import GroupLayout from '../layouts/group_layout'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import LinkFooter from '../components/link_footer'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
 
@@ -21,8 +17,10 @@ const mapStateToProps = (state, { params: { id } }) => ({
 	relationships: state.getIn(['group_relationships', id]),
 })
 
-const mapDispatchToProps = () => ({
+const mapDispatchToProps = (dispatch) => ({
-	fetchGroup,
+	onFetchGroup(groupId) {
+		dispatch(fetchGroup(groupId))
+	}
 })
 
 export default
@@ -35,11 +33,12 @@ class GroupPage extends ImmutablePureComponent {
 		group: ImmutablePropTypes.map,
 		children: PropTypes.node.isRequired,
 		relationships: ImmutablePropTypes.map,
-		fetchGroup: PropTypes.func.isRequired,
+		onFetchGroup: PropTypes.func.isRequired,
 	}
 	
 	componentDidMount() {
-		this.props.fetchGroup(this.props.params.id)
+		console.log("group page mounted:", this.props.params.id)
+		this.props.onFetchGroup(this.props.params.id)
 	}
 
 	render() {
@@ -65,14 +64,6 @@ class GroupPage extends ImmutablePureComponent {
 					// 	onClick: null,
 					// },
 				]}
-				layout={(
-					<Fragment>
-						<GroupInfoPanel group={group} />
-						<WhoToFollowPanel />
-						<GroupSidebarPanel isSlim />
-						<LinkFooter />
-					</Fragment>
-				)}
 			>
 				<PageTitle path={[groupTitle, intl.formatMessage(messages.group)]} />
 

app/javascript/gabsocial/pages/home_page.js

@@ -2,8 +2,8 @@ import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
-import IntersectionObserverArticle from '../components/intersection_observer_article'
+// import IntersectionObserverArticle from '../components/intersection_observer_article'
-import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
+// import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
 import PageTitle from '../features/ui/util/page_title'
 import GroupsPanel from '../components/panel/groups_panel'
 import ListsPanel from '../components/panel/lists_panel'
@@ -43,23 +43,23 @@ class HomePage extends PureComponent {
     totalQueuedItemsCount: PropTypes.number.isRequired,
   }
 
-  intersectionObserverWrapper = new IntersectionObserverWrapper()
+  // intersectionObserverWrapper = new IntersectionObserverWrapper()
 
-  componentDidMount() {
+  // componentDidMount() {
-    this.attachIntersectionObserver()
+  //   this.attachIntersectionObserver()
-  }
+  // }
 
-  componentWillUnmount() {
+  // componentWillUnmount() {
-    this.detachIntersectionObserver()
+  //   this.detachIntersectionObserver()
-  }
+  // }
 
-  attachIntersectionObserver() {
+  // attachIntersectionObserver() {
-    this.intersectionObserverWrapper.connect()
+  //   this.intersectionObserverWrapper.connect()
-  }
+  // }
 
-  detachIntersectionObserver() {
+  // detachIntersectionObserver() {
-    this.intersectionObserverWrapper.disconnect()
+  //   this.intersectionObserverWrapper.disconnect()
-  }
+  // }
 
   render() {
     const {
@@ -87,30 +87,9 @@ class HomePage extends PureComponent {
             <UserPanel />
             <ProgressPanel />
             <TrendsPanel />
-            <IntersectionObserverArticle
+            <ListsPanel />
-              id={'home-sidebar-lists-panel'}
+            <WhoToFollowPanel />
-              listLength={7}
+            <GroupsPanel />
-              index={4}
-              intersectionObserverWrapper={this.intersectionObserverWrapper}
-            >
-              <ListsPanel />
-            </IntersectionObserverArticle>
-            <IntersectionObserverArticle
-              id={'home-sidebar-wtf-panel'}
-              listLength={7}
-              index={5}
-              intersectionObserverWrapper={this.intersectionObserverWrapper}
-            >
-              <WhoToFollowPanel />
-            </IntersectionObserverArticle>
-            <IntersectionObserverArticle
-              id={'home-sidebar-groups-panel'}
-              listLength={7}
-              index={6}
-              intersectionObserverWrapper={this.intersectionObserverWrapper}
-            >
-              <GroupsPanel isLazy />
-            </IntersectionObserverArticle>
             <LinkFooter />
           </Fragment>
         )}

app/javascript/gabsocial/pages/notifications_page.js

@@ -35,6 +35,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   setFilter(value) {
+    console.log("SETTING ACTIVE FILTER:", value)
     dispatch(setFilter('active', value))
   },
 })
@@ -56,7 +57,9 @@ class NotificationsPage extends PureComponent {
     selectedFilter: PropTypes.string.isRequired,
   }
 
-  componentDidMount() {
+  componentWill
+
+  UNSAFE_componentWillMount() {
     this.checkForQueryStringChange(this.context.router.route.location)
   }
 

app/javascript/gabsocial/pages/profile_page.js

@@ -5,10 +5,6 @@ import { fetchAccountByUsername } from '../actions/accounts'
 import { makeGetAccount } from '../selectors'
 import { me } from '../initial_state'
 import PageTitle from '../features/ui/util/page_title'
-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 ColumnIndicator from '../components/column_indicator'
 import ProfileLayout from '../layouts/profile_layout'
 
@@ -66,14 +62,7 @@ class ProfilePage extends ImmutablePureComponent {
     return (
       <ProfileLayout
         account={account}
-        layout={(
+        title={name}
-          <Fragment>
-            <ProfileStatsPanel account={account} />
-            <ProfileInfoPanel account={account} />
-            { !unavailable && <MediaGalleryPanel account={account} /> }
-            <LinkFooter />
-          </Fragment>
-        )}
       >
         <PageTitle path={`${name} (@${username})`} />
         {

app/javascript/gabsocial/pages/search_page.js

@@ -5,6 +5,7 @@ import Responsive from '../features/ui/util/responsive_component'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import SearchFilterPanel from '../components/panel/search_filter_panel'
+import TrendsPanel from '../components/panel/trends_panel'
 import Search from '../components/search'
 import Layout from '../layouts/layout'
 
@@ -57,6 +58,7 @@ class SearchPage extends PureComponent {
         layout={(
           <Fragment>
             <SearchFilterPanel />
+            <TrendsPanel />
             <LinkFooter />
           </Fragment>
         )}

app/javascript/styles/global.css

@@ -240,6 +240,7 @@ body {
 
 .flexRow { flex-direction: row; }
 .flexWrap { flex-wrap: wrap; }
+.flexColumnReverse { flex-direction: column-reverse; }
 
 .alignItemsEnd { align-items: flex-end; }
 .alignItemsStart { align-items: flex-start; }
@@ -451,14 +452,17 @@ body {
 .heightMin80PX { min-height: 80px; }
 .heightMin58PX { min-height: 58px; }
 .heightMin50PX { min-height: 50px; }
+.heightMin28PX { min-height: 28px; }
 
 .height100PC { height: 100%; }
 .height350PX { height: 350px; }
 .height260PX { height: 260px; }
 .height220PX { height: 220px; }
 .height215PX { height: 215px; }
+.height200PX { height: 200px; }
 .height158PX { height: 158px; }
 .height122PX { height: 122px; }
+.height98PX { height: 98px; }
 .height72PX { height: 72px; }
 .height60PX { height: 60px; }
 .height53PX { height: 53px; }
@@ -664,11 +668,13 @@ body {
 .mb5 { margin-bottom: 5px; }
 .mbNeg5PX { margin-bottom: -5px; }
 
+.mt15 { margin-top: 10px; }
 .mt10 { margin-top: 10px; }
 .mt5 { margin-top: 5px; }
 .mt2 { margin-top: 2px; }
 .mtAuto { margin-top: auto; }
 .mtNeg32PX { margin-top: -32px; }
+.mtNeg50PX { margin-top: -50px; }
 .mtNeg75PX { margin-top: -75px; }
 
 .pt5625PC { padding-top: 56.25%; }
@@ -682,6 +688,7 @@ body {
 .pb15 { padding-bottom: 15px; }
 .pb10 { padding-bottom: 10px; }
 .pb5 { padding-bottom: 5px; }
+.pb3 { padding-bottom: 3px; }
 
 .pl35 { padding-left: 35px; }
 .pl25 { padding-left: 25px; }