diff options
20 files changed, 372 insertions, 169 deletions
diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md index 6cb8cd0b0..642b972a2 100644 --- a/packages/website/CHANGELOG.md +++ b/packages/website/CHANGELOG.md @@ -1,5 +1,5 @@ # CHANGELOG -## v0.x.x - _TBD_ +## v0.0.1 - _February 16, 2018_ - * Added new team members to the about page (#317) + * Re-designed wiki + doc page template (#405) diff --git a/packages/website/less/all.less b/packages/website/less/all.less index 7f2a8fc67..113dff0be 100644 --- a/packages/website/less/all.less +++ b/packages/website/less/all.less @@ -61,7 +61,8 @@ a { */ ::-webkit-scrollbar { -webkit-appearance: none; - width: 7px; + width: 4px; + height: 2px; } ::-webkit-scrollbar-thumb { border-radius: 4px; @@ -85,19 +86,28 @@ a { } code { - font-family: 'Roboto'; - background-color: #f3f4f4; - color: rgb(36, 41, 46); - padding: 3px; - - &.hljs { - background-color: #dde4e9 !important; // blue gray - border-left: 5px solid #0091ea !important; // colors.lightBlueA700 - padding: 30px; - } + border: 1px solid #e3eefe; + font-family: 'Roboto Mono'; + background-color: #f2f6ff !important; // lightBlue } #wiki { + p { + color: #515151; // grey750 + fontsize: 15; + } + + a { + color: #1d5cde; // linkBlue + } + + h1, + h2, + h3, + h4 { + padding-top: 15px; + } + p, blockquote, ol, diff --git a/packages/website/public/css/github-gist.css b/packages/website/public/css/github-gist.css new file mode 100644 index 000000000..d5c8751c5 --- /dev/null +++ b/packages/website/public/css/github-gist.css @@ -0,0 +1,71 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png Binary files differnew file mode 100644 index 000000000..ba9bb8a3a --- /dev/null +++ b/packages/website/public/images/doc_icons/connect.png diff --git a/packages/website/public/images/doc_icons/contracts.png b/packages/website/public/images/doc_icons/contracts.png Binary files differnew file mode 100644 index 000000000..f5c6545ca --- /dev/null +++ b/packages/website/public/images/doc_icons/contracts.png diff --git a/packages/website/public/images/doc_icons/wiki.png b/packages/website/public/images/doc_icons/wiki.png Binary files differnew file mode 100644 index 000000000..d7854d54b --- /dev/null +++ b/packages/website/public/images/doc_icons/wiki.png diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png Binary files differnew file mode 100644 index 000000000..029777ffe --- /dev/null +++ b/packages/website/public/images/doc_icons/zeroExJs.png diff --git a/packages/website/public/index.html b/packages/website/public/index.html index d7006c518..3072ff03d 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -12,7 +12,7 @@ <title>0x: The Protocol for Trading Tokens</title> <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" /> - <link rel="stylesheet" href="/css/atom-one-light.css"> + <link rel="stylesheet" href="/css/github-gist.css"> <link rel="stylesheet" href="/css/material-design-iconic-font.min.css"> <link rel="stylesheet" href="/css/roboto.css"> <link rel="stylesheet" href="/css/roboto_mono.css"> diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index b1367be4f..a412007f2 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -228,52 +228,54 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > - {this._renderPortalMenu()} - {this._renderDocsMenu()} - {this._renderWiki()} - <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> - Website - </div> - <Link to={WebsitePaths.Home} className="text-decoration-none"> - <MenuItem className="py2">Home</MenuItem> - </Link> - <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> - <MenuItem className="py2">Wiki</MenuItem> - </Link> - {!this._isViewing0xjsDocs() && ( - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem className="py2">0x.js Docs</MenuItem> + <div className="clearfix"> + {this._renderPortalMenu()} + {this._renderDocsMenu()} + {this._renderWiki()} + <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> + Website + </div> + <Link to={WebsitePaths.Home} className="text-decoration-none"> + <MenuItem className="py2">Home</MenuItem> </Link> - )} - {!this._isViewingConnectDocs() && ( - <Link to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem className="py2">0x Connect Docs</MenuItem> + <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> + <MenuItem className="py2">Wiki</MenuItem> </Link> - )} - {!this._isViewingSmartContractsDocs() && ( - <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem className="py2">Smart Contract Docs</MenuItem> + {!this._isViewing0xjsDocs() && ( + <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <MenuItem className="py2">0x.js Docs</MenuItem> + </Link> + )} + {!this._isViewingConnectDocs() && ( + <Link to={WebsitePaths.Connect} className="text-decoration-none"> + <MenuItem className="py2">0x Connect Docs</MenuItem> + </Link> + )} + {!this._isViewingSmartContractsDocs() && ( + <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> + <MenuItem className="py2">Smart Contract Docs</MenuItem> + </Link> + )} + {!this._isViewingPortal() && ( + <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> + <MenuItem className="py2">Portal DApp</MenuItem> + </Link> + )} + <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> + <MenuItem className="py2">Whitepaper</MenuItem> + </a> + <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> + <MenuItem className="py2">About</MenuItem> </Link> - )} - {!this._isViewingPortal() && ( - <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> - <MenuItem className="py2">Portal DApp</MenuItem> + <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> + <MenuItem className="py2">Blog</MenuItem> + </a> + <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> + <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> + FAQ + </MenuItem> </Link> - )} - <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> - <MenuItem className="py2">Whitepaper</MenuItem> - </a> - <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> - <MenuItem className="py2">About</MenuItem> - </Link> - <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> - <MenuItem className="py2">Blog</MenuItem> - </a> - <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> - <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> - FAQ - </MenuItem> - </Link> + </div> </Drawer> ); } @@ -288,12 +290,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> - {sectionTitle} - </div> <NestedSidebarMenu topLevelMenu={this.props.menu} menuSubsectionsBySection={this.props.menuSubsectionsBySection} + title={this.props.docsInfo.displayName} shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} selectedVersion={this.props.docsVersion} @@ -310,12 +310,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> - 0x Protocol Wiki - </div> <NestedSidebarMenu topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} + title="Wiki" shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} /> diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx index 7f7ea006e..056d741e0 100644 --- a/packages/website/ts/components/ui/badge.tsx +++ b/packages/website/ts/components/ui/badge.tsx @@ -8,7 +8,6 @@ const styles: Styles = { fontSize: 11, height: 10, borderRadius: 5, - marginTop: 25, lineHeight: 0.9, fontFamily: 'Roboto Mono', marginLeft: 3, diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 7ad1d3b9c..da3728a60 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -37,12 +37,14 @@ import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { utils } from 'ts/utils/utils'; +const TOP_BAR_HEIGHT = 60; const SCROLL_TOP_ID = 'docsScrollTop'; const networkNameToColor: { [network: string]: string } = { [Networks.Kovan]: colors.purple, [Networks.Ropsten]: colors.red, [Networks.Mainnet]: colors.turquois, + [Networks.Rinkeby]: colors.darkYellow, }; export interface DocumentationAllProps { @@ -67,7 +69,7 @@ const styles: Styles = { right: 0, overflowZ: 'hidden', overflowY: 'scroll', - minHeight: 'calc(100vh - 1px)', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, WebkitOverflowScrolling: 'touch', }, menuContainer: { @@ -111,7 +113,6 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume availableDocVersions={this.props.availableDocVersions} menu={this.props.docsInfo.getMenu(this.props.docsVersion)} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={true} docsInfo={this.props.docsInfo} /> {_.isUndefined(this.state.docAgnosticFormat) ? ( @@ -129,30 +130,41 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume </div> </div> ) : ( - <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> - <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> + <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> + <div + className="mx-auto max-width-4 flex" + style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} + > <div - className="border-right absolute" - style={{ ...styles.menuContainer, ...styles.mainContainers }} + className="relative sm-hide xs-hide" + style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} > - <NestedSidebarMenu - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)} - menuSubsectionsBySection={menuSubsectionsBySection} - docPath={this.props.docsInfo.websitePath} - /> + <div + className="border-right absolute" + style={{ + ...styles.menuContainer, + ...styles.mainContainers, + height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + }} + > + <NestedSidebarMenu + selectedVersion={this.props.docsVersion} + versions={this.props.availableDocVersions} + title={this.props.docsInfo.displayName} + topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)} + menuSubsectionsBySection={menuSubsectionsBySection} + docPath={this.props.docsInfo.websitePath} + /> + </div> </div> - </div> - <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div id="documentation" style={styles.mainContainers} className="absolute"> - <div id={SCROLL_TOP_ID} /> - <h1 className="md-pl2 sm-pl3"> - <a href={this.props.docsInfo.packageUrl} target="_blank"> - {this.props.docsInfo.displayName} - </a> - </h1> - {this._renderDocumentation()} + <div + className="relative col lg-col-9 md-col-9 sm-col-12 col-12" + style={{ backgroundColor: colors.white }} + > + <div id="documentation" style={styles.mainContainers} className="absolute px1"> + <div id={SCROLL_TOP_ID} /> + {this._renderDocumentation()} + </div> </div> </div> </div> @@ -220,7 +232,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume }); return ( <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> - <div className="flex"> + <div className="flex pb2"> <div style={{ marginRight: 7 }}> <SectionHeader sectionName={sectionName} /> </div> diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index dfde5931b..1bc6aa4f4 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -28,8 +28,7 @@ const styles: Styles = { color: colors.white, height: 11, borderRadius: 14, - marginTop: 19, - lineHeight: 0.8, + lineHeight: 0.9, }, }; @@ -55,16 +54,18 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt onMouseOut={this._setAnchorVisibility.bind(this, false)} > {!method.isConstructor && ( - <div className="flex"> + <div className="flex pb2 pt2"> {(method as TypescriptMethod).isStatic && this._renderChip('Static')} {(method as SolidityMethod).isConstant && this._renderChip('Constant')} {(method as SolidityMethod).isPayable && this._renderChip('Payable')} - <AnchorTitle - headerSize={HeaderSizes.H3} - title={method.name} - id={`${this.props.sectionName}-${method.name}`} - shouldShowAnchor={this.state.shouldShowAnchor} - /> + <div style={{ lineHeight: 1.3 }}> + <AnchorTitle + headerSize={HeaderSizes.H3} + title={method.name} + id={`${this.props.sectionName}-${method.name}`} + shouldShowAnchor={this.state.shouldShowAnchor} + /> + </div> </div> )} <code className="hljs"> @@ -121,12 +122,17 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt style={{ borderBottom: '1px solid #f0f4f7' }} > <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12"> - <div className="bold">{parameter.name}</div> + <div + className="bold" + style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} + > + {parameter.name} + </div> <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}> {isOptional && 'optional'} </div> </div> - <div className="col lg-col-8 md-col-8 sm-col-12 col-12"> + <div className="col lg-col-8 md-col-8 sm-col-12 col-12" style={{ paddingLeft: 5 }}> {parameter.comment && <Comment comment={parameter.comment} />} </div> </div> diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index 041dcd093..22294e428 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Type } from 'ts/pages/documentation/type'; import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; @@ -22,26 +23,52 @@ const defaultProps = { export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => { const sectionName = constants.TYPES_SECTION_NAME; const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); - const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => { - return [prev, ', ', curr]; + const paramStringArray: any[] = []; + // HACK: For now we don't put params on newlines if there are less then 2 of them. + // Ideally we would check the character length of the resulting method signature and + // if it exceeds the available space, put params on their own lines. + const hasMoreThenTwoParams = parameters.length > 2; + _.each(parameters, (param: React.ReactNode, i: number) => { + const finalParam = hasMoreThenTwoParams ? ( + <span className="pl2" key={`param-${i}`}> + {param} + </span> + ) : ( + param + ); + paramStringArray.push(finalParam); + const comma = hasMoreThenTwoParams ? ( + <span key={`param-comma-${i}`}> + , <br /> + </span> + ) : ( + ', ' + ); + paramStringArray.push(comma); }); + if (!hasMoreThenTwoParams) { + paramStringArray.pop(); + } const methodName = props.shouldHideMethodName ? '' : props.method.name; const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ? undefined : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); return ( - <span> + <span style={{ fontSize: 15 }}> {props.method.callPath} {methodName} - {typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {typeParameterIfExists}({hasMoreThenTwoParams && <br />} + {paramStringArray}) {props.method.returnType && ( - <Type - type={props.method.returnType} - sectionName={sectionName} - typeDefinitionByName={props.typeDefinitionByName} - docsInfo={props.docsInfo} - /> + <span> + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + <Type + type={props.method.returnType} + sectionName={sectionName} + typeDefinitionByName={props.typeDefinitionByName} + docsInfo={props.docsInfo} + /> + </span> )} </span> ); diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx index db5be1f59..0270618a0 100644 --- a/packages/website/ts/pages/shared/anchor_title.tsx +++ b/packages/website/ts/pages/shared/anchor_title.tsx @@ -34,18 +34,13 @@ const styles: Styles = { }, h1: { fontSize: '1.8em', - WebkitMarginBefore: '0.83em', - WebkitMarginAfter: '0.83em', }, h2: { fontSize: '1.5em', - WebkitMarginBefore: '0.83em', - WebkitMarginAfter: '0.83em', + fontWeight: 400, }, h3: { fontSize: '1.17em', - WebkitMarginBefore: '1em', - WebkitMarginAfter: '1em', }, }; diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index be96fda16..98ca3aee6 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -17,7 +17,7 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M } public render() { return ( - <span style={{ fontSize: 16 }}> + <span style={{ fontSize: 14 }}> <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight> </span> ); diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 5487dc8cc..4d7d8b4ca 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -6,6 +6,7 @@ import { Element as ScrollElement } from 'react-scroll'; import { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; import { HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface MarkdownSectionProps { @@ -34,14 +35,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const id = utils.getIdFromName(sectionName); return ( <div - className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden" + className="md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > <ScrollElement name={id}> - <div className="clearfix"> + <div className="clearfix pt3"> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ textTransform: 'capitalize' }}> + <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> <AnchorTitle headerSize={this.props.headerSize} title={sectionName} @@ -50,17 +51,19 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd /> </span> </div> - <div className="col col-4 sm-hide xs-hide py2 right-align"> + <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}> {!_.isUndefined(this.props.githubLink) && ( - <RaisedButton + <a href={this.props.githubLink} target="_blank" - label="Edit on Github" - icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />} - /> + style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }} + > + Edit on Github + </a> )} </div> </div> + <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </ScrollElement> </div> diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 849c33504..ba794ee9f 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -11,12 +11,12 @@ import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; + title: string; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; docPath?: string; - isSectionHeaderClickable?: boolean; } interface NestedSidebarMenuState {} @@ -29,10 +29,20 @@ const styles: Styles = { minHeight: 48, }, menuItemInnerDivWithHeaders: { + color: colors.grey800, + fontSize: 14, lineHeight: 2, + padding: 0, }, }; +const titleToIcon: { [title: string]: string } = { + '0x.js': 'zeroExJs.png', + '0x Connect': 'connect.png', + '0x Smart Contracts': 'contracts.png', + Wiki: 'wiki.png', +}; + export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, @@ -44,17 +54,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return ( - <div key={`section-${sectionName}`} className="py1"> - <ScrollLink - to={id} - offset={-20} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > - <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1"> - {finalSectionName.toUpperCase()} - </div> - </ScrollLink> + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}> + <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1"> + {finalSectionName.toUpperCase()} + </div> {this._renderMenuItems(menuItems)} </div> ); @@ -64,6 +67,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N }); return ( <div> + {this._renderEmblem()} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && !_.isUndefined(this.props.docPath) && ( @@ -73,7 +77,32 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N docPath={this.props.docPath} /> )} - {navigation} + <div className="pl1">{navigation}</div> + </div> + ); + } + private _renderEmblem() { + return ( + <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> + <div className="flex" style={{ fontSize: 25 }}> + <div className="robotoMono" style={{ fontWeight: 'bold' }}> + 0x + </div> + <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> + docs + </div> + </div> + <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}> + | + </div> + <div className="flex"> + <div> + <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" /> + </div> + <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}> + {this.props.title} + </div> + </div> </div> ); } @@ -132,7 +161,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N onTouchTap={this._onMenuItemClick.bind(this, name)} style={{ minHeight: 35 }} innerDivStyle={{ - paddingLeft: 36, + paddingLeft: 16, fontSize: 14, lineHeight: '35px', }} diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index daf5c27a7..bbbda6eee 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; +import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { scroller } from 'react-scroll'; @@ -13,6 +14,7 @@ import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; +const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -22,6 +24,7 @@ export interface WikiProps { interface WikiState { articlesBySection: ArticlesBySection; + isHoveringSidebar: boolean; } const styles: Styles = { @@ -32,14 +35,13 @@ const styles: Styles = { bottom: 0, right: 0, overflowZ: 'hidden', - overflowY: 'scroll', - minHeight: 'calc(100vh - 1px)', + height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, WebkitOverflowScrolling: 'touch', }, menuContainer: { borderColor: colors.grey300, maxWidth: 330, - marginLeft: 20, + backgroundColor: colors.gray40, }, }; @@ -51,6 +53,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { this._isUnmounted = false; this.state = { articlesBySection: undefined, + isHoveringSidebar: false, }; } public componentWillMount() { @@ -65,6 +68,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) ? {} : this._getMenuSubsectionsBySection(this.state.articlesBySection); + const mainContainersStyle: React.CSSProperties = { + ...styles.mainContainers, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + }; return ( <div> <DocumentTitle title="0x Protocol Wiki" /> @@ -72,10 +79,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> { blockchainIsLoaded={false} location={this.props.location} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={true} /> {_.isUndefined(this.state.articlesBySection) ? ( - <div className="col col-12" style={styles.mainContainers}> + <div className="col col-12" style={mainContainersStyle}> <div className="relative sm-px2 sm-pt2 sm-m1" style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} @@ -89,28 +95,50 @@ export class Wiki extends React.Component<WikiProps, WikiState> { </div> </div> ) : ( - <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> - <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> + <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> + <div + className="mx-auto max-width-4 flex" + style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} + > <div - className="border-right absolute pt2" - style={{ ...styles.menuContainer, ...styles.mainContainers }} + className="relative lg-pl0 md-pl1 sm-hide xs-hide" + style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }} > - <NestedSidebarMenu - topLevelMenu={menuSubsectionsBySection} - menuSubsectionsBySection={menuSubsectionsBySection} - isSectionHeaderClickable={true} - /> + <div + className="absolute" + style={{ + ...styles.menuContainer, + ...mainContainersStyle, + height: 'calc(100vh - 76px)', + }} + onMouseEnter={this._onSidebarHover.bind(this)} + onMouseLeave={this._onSidebarHoverOff.bind(this)} + > + <NestedSidebarMenu + topLevelMenu={menuSubsectionsBySection} + menuSubsectionsBySection={menuSubsectionsBySection} + title="Wiki" + /> + </div> </div> - </div> - <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div id="documentation" style={styles.mainContainers} className="absolute"> - <div id="0xProtocolWiki" /> - <h1 className="md-pl2 sm-pl3"> - <a href={constants.URL_GITHUB_WIKI} target="_blank"> - 0x Protocol Wiki - </a> - </h1> - <div id="wiki">{this._renderWikiArticles()}</div> + <div + className="relative" + style={{ + width: '100%', + height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + backgroundColor: 'white', + }} + > + <div + id="documentation" + style={{ ...mainContainersStyle, overflow: 'auto' }} + className="absolute" + > + <div id="0xProtocolWiki" /> + <div id="wiki" style={{ paddingRight: 2 }}> + {this._renderWikiArticles()} + </div> + </div> </div> </div> </div> @@ -135,18 +163,22 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}> - See a way to make this article better?{' '} - <a href={githubLink} target="_blank"> - Edit here → - </a> + <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}> + <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}> + See a way to improve this article? + </div> + <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2"> + <RaisedButton href={githubLink} target="_blank" label="Edit on Github" /> + </div> </div> </div> ); }); return ( - <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> - <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} /> + <div key={`section-${sectionName}`} className="py2 md-px1 sm-px2"> + {/* <div className="pl2"> + <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} /> + </div> */} {renderedArticles} </div> ); @@ -203,4 +235,14 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } return menuSubsectionsBySection; } + private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff() { + this.setState({ + isHoveringSidebar: false, + }); + } } diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts index 58ce667e3..2eead95c7 100644 --- a/packages/website/ts/utils/colors.ts +++ b/packages/website/ts/utils/colors.ts @@ -2,12 +2,14 @@ import { colors as materialUiColors } from 'material-ui/styles'; export const colors = { ...materialUiColors, + gray40: '#F8F8F8', grey50: '#FAFAFA', grey100: '#F5F5F5', lightestGrey: '#F0F0F0', greyishPink: '#E6E5E5', grey300: '#E0E0E0', beigeWhite: '#E4E4E4', + grey350: '#cacaca', grey400: '#BDBDBD', lightGrey: '#BBBBBB', grey500: '#9E9E9E', @@ -15,6 +17,7 @@ export const colors = { darkGrey: '#818181', landingLinkGrey: '#919191', grey700: '#616161', + grey750: '#515151', grey800: '#424242', darkerGrey: '#393939', heroGrey: '#404040', @@ -23,6 +26,7 @@ export const colors = { dharmaDarkGrey: '#252525', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', turquois: '#058789', lightPurple: '#A81CA6', @@ -40,4 +44,5 @@ export const colors = { amber600: '#FFB300', orange: '#E69D00', amber800: '#FF8F00', + darkYellow: '#caca03', }; diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 69773eae7..8e359f8bd 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -39,6 +39,12 @@ export const configs = { [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f', }, + [Networks.Rinkeby]: { + [SmartContractDocSections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', + [SmartContractDocSections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + [SmartContractDocSections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8', + [SmartContractDocSections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + }, }, } as ContractAddresses, DEFAULT_DERIVATION_PATH: `44'/60'/0'`, |
