Progress

2020-05-06 02:24:16 -04:00 · 2020-05-06 02:24:16 -04:00 · 4dfb7c9fd6
parent e1e26afe11
commit 4dfb7c9fd6
7 changed files with 119 additions and 63 deletions
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/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}>
-                {
-                  !!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>
+              <div className={[_s.default, _s.flexRow].join(' ')}>

-              <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.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
+              <div className={[_s.default, _s.mlAuto].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>

--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/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' },
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/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(' ')}>
-              <span className={textClasses}>{title}</span>
-            </div>
-          </Responsive>
+          <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
+            <ResponsiveClassesComponent
+              classNames={[_s.default, _s.fontWeightNormal, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
+              classNamesSmall={[_s.default, _s.fontWeightNormal, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
+            >
+              {title}
+            </ResponsiveClassesComponent>
+          </div>

          {
            count > 0 &&
--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/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))
  },
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/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>
--- a/app/javascript/styles/global.css
+++ b/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 {
--- a/app/views/layouts/application.html.haml
+++ b/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 }/