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
This commit is contained in:
mgabdev
parent
ac229e0cc1
commit
57ce03ff37
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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' }} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue