Added about routes pages to react app, layout, AboutSidebar

• Added:
- about routes pages to react app, layout, AboutSidebar
- about, dmca, investors, privacy policy, terms of sale, terms of service

app/javascript/gabsocial/components/about_sidebar.js

@@ -0,0 +1,77 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import { me } from '../initial_state'
+import SidebarSectionTitle from './sidebar_section_title'
+import SidebarSectionItem from './sidebar_section_item'
+import Heading from './heading'
+import BackButton from './back_button'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+
+const messages = defineMessages({
+  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
+  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  menu: { id: 'menu', defaultMessage: 'Menu' },
+})
+
+export default
+@injectIntl
+class AboutSidebar extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    account: ImmutablePropTypes.map,
+    title: PropTypes.string,
+    items: PropTypes.array.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      title,
+      items,
+    } = this.props
+
+    return (
+      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+        <ResponsiveClassesComponent
+          classNames={[_s.default, _s.width240PX].join(' ')}
+          classNamesXS={[_s.default, _s.width100PC].join(' ')}
+        >
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}
+            classNamesXS={[_s.default, _s.px15].join(' ')}
+          >
+            <ResponsiveClassesComponent
+              classNames={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
+              classNamesXS={[_s.default,  _s.alignItemsStart, _s.width100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+            >
+              <div className={[_s.default, _s.width100PC].join(' ')}>
+                <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                  {
+                    me && <BackButton icon='arrow-left' toHome />
+                  }
+                  <Heading size='h1'>
+                    {title}
+                  </Heading>
+                </div>
+
+              </div>
+              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+                <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
+                {
+                  items.map((menuItem, i) => (
+                    <SidebarSectionItem {...menuItem} key={`about-sidebar-item-menu-${i}`} />
+                  ))
+                }
+              </nav>
+
+            </ResponsiveClassesComponent>
+          </ResponsiveClassesComponent>
+        </ResponsiveClassesComponent>
+      </header>
+    )
+  }
+
+}

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

@@ -38,14 +38,18 @@ import ModalPage from '../../pages/modal_page'
 import SettingsPage from '../../pages/settings_page'
 import ProPage from '../../pages/pro_page'
 import ExplorePage from '../../pages/explore_page'
+import AboutPage from '../../pages/about_page'
+import AuthPage from '../../pages/auth_page'
 
 import {
+  About,
   AccountGallery,
   AccountTimeline,
   BlockedAccounts,
   BlockedDomains,
   CommunityTimeline,
   Compose,
+  DMCA,
   Explore,
   // Filters,
   Followers,
@@ -60,6 +64,7 @@ import {
   GroupTimeline,
   HashtagTimeline,
   HomeTimeline,
+  Investors,
   LikedStatuses,
   ListCreate,
   ListsDirectory,
@@ -67,12 +72,15 @@ import {
   ListTimeline,
   Mutes,
   Notifications,
+  PrivacyPolicy,
   ProTimeline,
   Search,
   // Shortcuts,
   StatusFeature,
   StatusLikes,
   StatusReposts,
+  TermsOfSale,
+  TermsOfService,
 } from './util/async_components'
 import { me, meUsername } from '../../initial_state'
 
@@ -151,7 +159,14 @@ class SwitchingArea extends PureComponent {
       <Switch>
         <Redirect from='/' to='/home' exact />
         <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
-        
+
+        <WrappedRoute path='/about' publicRoute exact page={AboutPage} component={About} content={children} componentParams={{ title: 'About' }} />
+        <WrappedRoute path='/about/dmca' publicRoute exact page={AboutPage} component={DMCA} content={children} componentParams={{ title: 'DMCA' }} />
+        <WrappedRoute path='/about/investors' publicRoute exact page={AboutPage} component={Investors} content={children} componentParams={{ title: 'Investors' }} />
+        <WrappedRoute path='/about/privacy' publicRoute exact page={AboutPage} component={PrivacyPolicy} content={children} componentParams={{ title: 'Privacy Policy' }} />
+        <WrappedRoute path='/about/sales' publicRoute exact page={AboutPage} component={TermsOfSale} content={children} componentParams={{ title: 'Terms of Sale' }} />
+        <WrappedRoute path='/about/tos' publicRoute exact page={AboutPage} component={TermsOfService} content={children} componentParams={{ title: 'Terms of Service' }} />
+
         <WrappedRoute path='/explore' publicRoute page={ExplorePage} component={Explore} content={children} componentParams={{ title: 'Explore' }} />
 
         <WrappedRoute path='/compose' exact page={BasicPage} component={Compose} content={children} componentParams={{ title: 'Compose' }} />

app/javascript/gabsocial/layouts/about_layout.js

@@ -0,0 +1,132 @@
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../constants'
+import { me } from '../initial_state'
+import SidebarXS from '../components/sidebar_xs'
+import NavigationBar from '../components/navigation_bar'
+import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
+import FooterBar from '../components/footer_bar'
+import GlobalFooter from '../components/global_footer'
+import Responsive from '../features/ui/util/responsive_component'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import AboutSidebar from '../components/about_sidebar'
+
+export default class SettingsLayout extends PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string,
+  }
+
+  componentWillMount() {
+    this.menuItems = [
+      {
+        title: 'About',
+        to: '/about',
+      },
+      {
+        title: 'Assets',
+        to: '/about/assets',
+      },
+      {
+        title: 'DMCA',
+        to: '/about/dmca',
+      },
+      {
+        title: 'Investors',
+        to: '/about/investors',
+      },
+      {
+        title: 'Press',
+        to: '/about/press',
+      },
+      {
+        title: 'Privacy Policy',
+        to: '/about/privacy',
+      },
+      {
+        title: 'Terms of Sale',
+        to: '/about/sales',
+      },
+      {
+        title: 'Terms of Service',
+        to: '/about/tos',
+      },
+    ]
+  }
+
+  render() {
+    const { children, title } = this.props
+    const { menuItems } = this
+
+    const mainBlockClasses = CX({
+      default: 1,
+      width1015PX: 1,
+      flexRow: 1,
+      justifyContentEnd: 1,
+      py15: 1,
+      mlAuto: !me,
+      mrAuto: !me,
+    })
+
+    return (
+      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgPrimary].join(' ')}>
+
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <SidebarXS />
+        </Responsive>
+
+        {
+          me &&
+          <NavigationBar title={title} noSearch />
+        }
+        {
+          !me &&
+          <LoggedOutNavigationBar />
+        }
+
+        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+
+          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+            <AboutSidebar title={title} items={menuItems} />
+          </Responsive>
+
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.default, _s.width100PC].join(' ')}
+          >
+            <main role='main'>
+
+              <ResponsiveClassesComponent
+                classNames={mainBlockClasses}
+                classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
+              >
+
+                <div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
+
+                  <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+                    <AboutSidebar title={title} items={menuItems} />
+                  </Responsive>
+      
+                  <div className={_s.default}>
+                    {children}
+                  </div>
+                </div>
+
+              </ResponsiveClassesComponent>
+
+            </main>
+          </ResponsiveClassesComponent>
+        </div>
+
+        <GlobalFooter />
+
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <FooterBar />
+        </Responsive>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/pages/about_page.js

@@ -0,0 +1,26 @@
+import PageTitle from '../features/ui/util/page_title'
+import AboutLayout from '../layouts/about_layout'
+
+export default class AboutPage extends PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+  }
+
+  render() {
+    const { children, title } = this.props
+
+    return (
+      <AboutLayout
+        noComposeButton
+        showBackBtn
+        title={title}
+      >
+        <PageTitle path={title} />
+        {children}
+      </AboutLayout>
+    )
+  }
+
+}