Progress

app/javascript/gabsocial/components/navigation_bar.js

@@ -4,6 +4,7 @@ import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 import Responsive from '../features/ui/util/responsive_component'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 import { CX } from '../constants'
 import Avatar from './avatar'
 import Button from './button'
@@ -20,6 +21,10 @@ export default
 @connect(mapStateToProps)
 class NavigationBar extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
   static propTypes = {
     account: ImmutablePropTypes.map,
     actions: PropTypes.array,
@@ -28,6 +33,18 @@ class NavigationBar extends ImmutablePureComponent {
     showBackBtn: PropTypes.bool,
   }
 
+  historyBack = () => {
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push('/home')
+    } else {
+      this.context.router.history.goBack()
+    }
+  }
+
+  handleBackClick = () => {
+    this.historyBack()
+  }
+
   handleProfileClick = () => {
 
   }
@@ -41,58 +58,33 @@ class NavigationBar extends ImmutablePureComponent {
       account,
     } = this.props
 
+
     return (
       <div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
         <div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
           <div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow].join(' ')}>
+            { /** Default */}
+            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
 
-              <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+              <div className={[_s.default, _s.flexRow].join(' ')}>
-                {
-                  !!account &&
-                  <button
-                    title={account.get('display_name')}
-                    onClick={this.handleProfileClick}
-                    className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}
-                  >
-                    <Avatar account={account} size={32} noHover />
-                  </button>
-                }
-                <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
-                  <Heading size='h1'>
-                    {title}
-                  </Heading>
-                </div>
-              </Responsive>
 
-              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                 <h1 className={[_s.default, _s.mr15].join(' ')}>
                   <Button to='/' isText title='Gab' 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} />
                   </Button>
                 </h1>
-              </Responsive>
 
-              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                 <div className={[_s.default, _s.width340PX].join(' ')}>
                   <Search />
                 </div>
-              </Responsive>
 
-            </div>
+              </div>
 
-            <div className={[_s.default, _s.mlAuto].join(' ')}>
+              <div className={[_s.default, _s.mlAuto].join(' ')}>
-              <div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
+                <div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
 
-                <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-                  <div>
-                    { /** actions */}
-                  </div>
-                </Responsive>
-
-                <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                   <NavigationBarButton title='Home' icon='home' to='/home' />
                   
                   <NavigationBarButtonDivider />
@@ -112,9 +104,69 @@ class NavigationBar extends ImmutablePureComponent {
                       <Avatar account={account} size={32} noHover />
                     </button>
                   }
-                </Responsive>
+                </div>
               </div>
-            </div>
+
+            </Responsive>
+            
+            { /** Mobile */}
+            <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+              <div className={[_s.default, _s.width84PX, _s.pl10].join(' ')}>
+                {
+                  !!account && !showBackBtn &&
+                  <button
+                    title={account.get('display_name')}
+                    onClick={this.handleProfileClick}
+                    className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter].join(' ')}
+                  >
+                    <Avatar account={account} size={32} noHover />
+                  </button>
+                }
+                {
+                  showBackBtn &&
+                  <Button
+                    noClasses
+                    color='primary'
+                    backgroundColor='none'
+                    className={[_s.alignItemsCenter, _s.height53PX, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
+                    icon='arrow-left'
+                    iconSize='32px'
+                    iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
+                    onClick={this.handleBackClick}
+                  />
+                }
+              </div>
+              
+              <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
+                <Heading size='h1'>
+                  {title}
+                </Heading>
+              </div>
+
+              <div className={[_s.default, _s.width84PX, _s.pr15].join(' ')}>
+                {
+                  !!actions &&
+                  <div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
+                    {
+                      actions.map((action, i) => (
+                        <Button
+                          isNarrow
+                          backgroundColor='none'
+                          color='primary'
+                          onClick={() => action.onClick()}
+                          key={`action-btn-${i}`}
+                          className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
+                          icon={action.icon}
+                          iconClassName={_s.fillPrimary}
+                          iconSize='14px'
+                        />
+                      ))
+                    }
+                  </div>
+                }
+              </div>
+              
+            </Responsive>
 
           </div>
 

app/javascript/gabsocial/components/sidebar.js

@@ -13,7 +13,6 @@ import SidebarSectionTitle from './sidebar_section_title'
 import SidebarSectionItem from './sidebar_section_item'
 import Heading from './heading'
 import Pills from './pills'
-import Divider from './divider'
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },

app/javascript/gabsocial/components/sidebar_section_item.js

@@ -1,11 +1,10 @@
 import {
   CX,
-  BREAKPOINT_SMALL
 } from '../constants'
 import Button from './button'
 import Icon from './icon'
 import Image from './image'
-import Responsive from '../features/ui/util/responsive_component'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 
 export default class SidebarSectionItem extends PureComponent {
 
@@ -76,19 +75,6 @@ export default class SidebarSectionItem extends PureComponent {
       bgPrimary: shouldShowActive,
     })
 
-    const textClasses = CX({
-      default: 1,
-      fontWeightNormal: 1,
-      fs15PX: 1,
-      text: 1,
-      textOverflowEllipsis: 1,
-      colorPrimary: 1,
-    })
-
-    const iconClasses = CX({
-      fillPrimary: 1,
-    })
-
     const countClasses = CX({
       default: 1,
       text: 1,
@@ -118,7 +104,7 @@ export default class SidebarSectionItem extends PureComponent {
         <div className={containerClasses}>
           {
             icon && 
-            <Icon id={icon} className={iconClasses} size={iconSize} />
+            <Icon id={icon} className={_s.fillPrimary} size={iconSize} />
           }
           
           {
@@ -132,11 +118,14 @@ export default class SidebarSectionItem extends PureComponent {
             />
           }
           
-          <Responsive min={BREAKPOINT_SMALL}>
+          <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
-            <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
+            <ResponsiveClassesComponent
-              <span className={textClasses}>{title}</span>
+              classNames={[_s.default, _s.fontWeightNormal, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
-            </div>
+              classNamesSmall={[_s.default, _s.fontWeightNormal, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
-          </Responsive>
+            >
+              {title}
+            </ResponsiveClassesComponent>
+          </div>
 
           {
             count > 0 &&

app/javascript/gabsocial/features/compose/containers/compose_form_container.js

@@ -76,6 +76,7 @@ const mapStateToProps = (state, { replyToId }) => {
 const mapDispatchToProps = (dispatch, { reduxReplyToId, replyToId }) => ({
 
   onChange(text, markdown, newReplyToId) {
+    // : todo :
     console.log("text:", text, newReplyToId, replyToId, reduxReplyToId)
     dispatch(changeCompose(text, markdown, newReplyToId))
   },

app/javascript/gabsocial/layouts/layout.js

@@ -6,6 +6,7 @@ import FooterBar from '../components/footer_bar'
 import FloatingActionButton from '../components/floating_action_button'
 import Responsive from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import Pills from '../components/pills'
 
 export default class Layout extends PureComponent {
 
@@ -41,6 +42,7 @@ export default class Layout extends PureComponent {
           actions={actions}
           tabs={tabs}
           title={title}
+          showBackBtn={showBackBtn}
         />
 
         <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
@@ -58,7 +60,8 @@ export default class Layout extends PureComponent {
           
           <ResponsiveClassesComponent
             classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s.default, _s.width100PC].join(' ')}
+            classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.default, _s.width100PC].join(' ')}
           >
             <main role='main'>
 
@@ -71,6 +74,16 @@ export default class Layout extends PureComponent {
                 {
                   !noRightSidebar &&
                   <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+
+                    {
+                      !!tabs &&
+                      <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+                        <div className={[_s.default, _s.mt10, _s.pb15].join(' ')}>
+                          <Pills pills={tabs} />
+                        </div>
+                      </Responsive>
+                    }
+
                     <div className={_s.default}>
                       {children}
                     </div>

app/javascript/styles/global.css

@@ -464,6 +464,7 @@ body {
 .width250PX { width: 240px; }
 .width240PX { width: 240px; }
 .width160PX { width: 160px; }
+.width84PX { width: 84px; }
 .width72PX { width: 72px; }
 .width50PX { width: 50px; }
 .width20PX { width: 20px; }
@@ -536,19 +537,19 @@ body {
 
 @media (min-width: 992px) and (max-width: 1080px) {
   .width1015PX {
-    width: 850px;
+    width: 780px;
   }
 
   .width645PX {
-    width: 525px;
+    width: 470px;
   }
 
   .width340PX {
-    width: 300px;
+    width: 285px;
   }
 
   .width240PX {
-    width: 100px;
+    width: 170px;
   }
 
   .width1255PX {
@@ -813,7 +814,7 @@ body {
 }
 
 .highlightedComment {
-  background-color: rgba(224, 234, 66, .3);
+  background-color: rgba(224, 234, 66, .25);
 }
 
 .searchInput::placeholder {

app/views/layouts/application.html.haml

@@ -2,7 +2,8 @@
 %html{ lang: I18n.locale }
   %head
     %meta{ charset: 'utf-8' }/
-    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1', 'viewport-fit': 'cover' }/
+
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no', 'viewport-fit': 'cover' }/
 
     - if cdn_host?
       %link{ rel: 'dns-prefetch', href: cdn_host }/