diff options
| -rw-r--r-- | packages/website/ts/components/documentation/docs_top_bar.tsx | 26 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/button.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/docs_home.tsx | 34 | ||||
| -rw-r--r-- | packages/website/ts/utils/constants.ts | 29 |
4 files changed, 65 insertions, 27 deletions
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index d6e0c124d..9a9b9a616 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; -import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -35,26 +35,6 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState } } public render(): React.ReactNode { - const menuItemLinks: ALink[] = [ - { - title: this.props.translate.get(Key.Home, Deco.Cap), - to: WebsitePaths.Home, - }, - { - title: this.props.translate.get(Key.Wiki, Deco.Cap), - to: WebsitePaths.Wiki, - }, - { - title: this.props.translate.get(Key.Forum, Deco.Cap), - to: constants.URL_FORUM, - shouldOpenInNewTab: true, - }, - { - title: this.props.translate.get(Key.LiveChat, Deco.Cap), - to: constants.URL_ZEROEX_CHAT, - shouldOpenInNewTab: true, - }, - ]; return ( <Container height={80}> <Container @@ -63,7 +43,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState > <Container className="sm-hide xs-hide"> <Container className="flex items-center justify-between right" width="300px"> - {this._renderMenuItems(menuItemLinks)} + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} </Container> </Container> <Container className="lg-hide md-hide"> @@ -98,7 +78,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState > <Container className="flex items-center" paddingLeft="4px"> <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> - {menuItemInfo.title} + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} </Text> </Container> </Link> diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index ccaadc800..2a6a1f477 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -16,6 +16,7 @@ export interface ButtonProps { type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( @@ -35,6 +36,7 @@ export const Button = styled(PlainButton)` outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; + text-align: ${props => props.textAlign}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { @@ -59,6 +61,7 @@ Button.defaultProps = { fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 1059bb844..359f6b7e9 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -1,11 +1,13 @@ -import { ALink, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { Button } from 'ts/components/ui/button'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; const TUTORIALS: TutorialInfo[] = [ @@ -330,8 +332,13 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { categoryToPackages={CATEGORY_TO_PACKAGES} /> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = ( - <NestedSidebarMenu sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} /> + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + shouldReformatMenuItemNames={false} + /> ); return ( <DevelopersPage @@ -344,4 +351,27 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { /> ); } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 6px" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + return menuItems; + } } diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 0809fb438..e76d40bd3 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -1,4 +1,9 @@ +import { ALink } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Key, WebsitePaths } from 'ts/types'; + +const URL_FORUM = 'https://forum.0xproject.com'; +const URL_ZEROEX_CHAT = 'https://chat.0xproject.com'; export const constants = { DECIMAL_PLACES_ETH: 18, @@ -74,7 +79,7 @@ export const constants = { URL_TESTNET_FAUCET: 'https://faucet.0xproject.com', URL_GITHUB_ORG: 'https://github.com/0xProject', URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', - URL_FORUM: 'https://forum.0xproject.com', + URL_FORUM, URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', URL_COINBASE_WALLET_IOS_APP_STORE: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8', @@ -89,7 +94,7 @@ export const constants = { URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_TWITTER: 'https://twitter.com/0xproject', URL_WETH_IO: 'https://weth.io/', - URL_ZEROEX_CHAT: 'https://chat.0xproject.com', + URL_ZEROEX_CHAT, URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API', URL_WEB3_DECODED_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123', @@ -97,4 +102,24 @@ export const constants = { URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', + DEVELOPER_TOPBAR_LINKS: [ + { + title: Key.Home, + to: WebsitePaths.Home, + }, + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Forum, + to: URL_FORUM, + shouldOpenInNewTab: true, + }, + { + title: Key.LiveChat, + to: URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, + }, + ] as ALink[], }; |