aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx26
-rw-r--r--packages/website/ts/components/ui/button.tsx3
-rw-r--r--packages/website/ts/pages/documentation/docs_home.tsx34
-rw-r--r--packages/website/ts/utils/constants.ts29
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[],
};
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-30 08:17:10 +0800