From 5c91b4bfc625b02a303ff50732eccb2fddf3f679 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Feb 2018 20:12:47 -0700 Subject: Re-designed Wiki and half-redesigned docs pages --- .../ts/pages/documentation/documentation.tsx | 8 +- .../ts/pages/documentation/method_block.tsx | 19 ++-- packages/website/ts/pages/shared/anchor_title.tsx | 7 +- .../ts/pages/shared/markdown_code_block.tsx | 2 +- .../website/ts/pages/shared/markdown_section.tsx | 17 ++-- .../ts/pages/shared/nested_sidebar_menu.tsx | 42 ++++++++- packages/website/ts/pages/wiki/wiki.tsx | 105 +++++++++++++++------ 7 files changed, 135 insertions(+), 65 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 7ad1d3b9c..e20040bc0 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -138,6 +138,7 @@ export class Documentation extends React.Component
-

- - {this.props.docsInfo.displayName} - -

{this._renderDocumentation()}
@@ -220,7 +216,7 @@ export class Documentation extends React.Component -
+
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index dfde5931b..78ba2ba1e 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 {!method.isConstructor && ( -
+
{(method as TypescriptMethod).isStatic && this._renderChip('Static')} {(method as SolidityMethod).isConstant && this._renderChip('Constant')} {(method as SolidityMethod).isPayable && this._renderChip('Payable')} - +
+ +
)} 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 + {this.props.literal} ); diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 5487dc8cc..0ce348c98 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
- +
-
+
{!_.isUndefined(this.props.githubLink) && ( - } - /> + style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }} + > + Edit on Github + )}
+
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 849c33504..fde6ef7ae 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,7 +29,10 @@ const styles: Styles = { minHeight: 48, }, menuItemInnerDivWithHeaders: { + color: colors.grey800, + fontSize: 14, lineHeight: 2, + padding: 0, }, }; @@ -44,14 +47,14 @@ export class NestedSidebarMenu extends React.Component +
-
+
{finalSectionName.toUpperCase()}
@@ -64,6 +67,7 @@ export class NestedSidebarMenu extends React.Component + {this._renderEmblem()} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && !_.isUndefined(this.props.docPath) && ( @@ -73,7 +77,35 @@ export class NestedSidebarMenu extends React.Component )} - {navigation} +
{navigation}
+
+ ); + } + private _renderEmblem() { + return ( +
+
+
+ 0x +
+
+ docs +
+
+
+ | +
+
+
+ +
+
+ {this.props.title} +
+
); } @@ -132,7 +164,7 @@ export class NestedSidebarMenu extends React.Component { this._isUnmounted = false; this.state = { articlesBySection: undefined, + isHoveringSidebar: false, }; } public componentWillMount() { @@ -65,6 +68,10 @@ export class Wiki extends React.Component { const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) ? {} : this._getMenuSubsectionsBySection(this.state.articlesBySection); + const mainContainersStyle: React.CSSProperties = { + ...styles.mainContainers, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + }; return (
@@ -72,10 +79,10 @@ export class Wiki extends React.Component { blockchainIsLoaded={false} location={this.props.location} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={true} + shouldFullWidth={false} /> {_.isUndefined(this.state.articlesBySection) ? ( -
+
{
) : ( -
-
+
+
- +
+ +
-
-
-
-
-

- - 0x Protocol Wiki - -

-
{this._renderWikiArticles()}
+
+
+
+
+ {this._renderWikiArticles()} +
+
@@ -135,18 +164,22 @@ export class Wiki extends React.Component { headerSize={HeaderSizes.H2} githubLink={githubLink} /> -
- See a way to make this article better?{' '} - - Edit here → - +
+
+ See a way to improve this article? +
+
+ +
); }); return ( -
- +
+ {/*
+ +
*/} {renderedArticles}
); @@ -203,4 +236,14 @@ export class Wiki extends React.Component { } return menuSubsectionsBySection; } + private _onSidebarHover(event: React.FormEvent) { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff() { + this.setState({ + isHoveringSidebar: false, + }); + } } -- cgit v1.2.3 From 2778f96483ea21f5ec33f4222c19d7864eca2f1f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Feb 2018 21:51:49 -0700 Subject: Re-design docs pages --- .../ts/pages/documentation/documentation.tsx | 54 ++++++++++++++-------- .../ts/pages/documentation/method_block.tsx | 9 +++- .../ts/pages/documentation/method_signature.tsx | 47 ++++++++++++++----- .../ts/pages/shared/nested_sidebar_menu.tsx | 9 +++- 4 files changed, 86 insertions(+), 33 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index e20040bc0..2227f59d3 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -37,6 +37,7 @@ 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 } = { @@ -67,7 +68,7 @@ const styles: Styles = { right: 0, overflowZ: 'hidden', overflowY: 'scroll', - minHeight: 'calc(100vh - 1px)', + minHeight: 'calc(100vh - 60px)', WebkitOverflowScrolling: 'touch', }, menuContainer: { @@ -111,7 +112,7 @@ export class Documentation extends React.Component {_.isUndefined(this.state.docAgnosticFormat) ? ( @@ -129,26 +130,41 @@ export class Documentation extends React.Component
) : ( -
-
+
+
- +
+ +
-
-
-
-
- {this._renderDocumentation()} +
+
+
+ {this._renderDocumentation()} +
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index 78ba2ba1e..1bc6aa4f4 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -122,12 +122,17 @@ export class MethodBlock extends React.Component
-
{parameter.name}
+
+ {parameter.name} +
{isOptional && 'optional'}
-
+
{parameter.comment && }
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index 041dcd093..a24d35924 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,50 @@ const defaultProps = { export const MethodSignature: React.SFC = (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[] = []; + _.each(parameters, (param: React.ReactNode, i: number) => { + const finalParam = + parameters.length > 2 ? ( + + {param} + + ) : ( + param + ); + paramStringArray.push(finalParam); + const comma = + parameters.length > 2 ? ( + + ,
+ + ) : ( + ', ' + ); + paramStringArray.push(comma); }); + if (parameters.length <= 2) { + 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 ( - + {props.method.callPath} {methodName} - {typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {typeParameterIfExists}({parameters.length > 2 &&
} + {paramStringArray}) {props.method.returnType && ( - + + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + + )} ); diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index fde6ef7ae..1b63f5203 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -36,6 +36,13 @@ const styles: Styles = { }, }; +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 { public static defaultProps: Partial = { shouldDisplaySectionHeaders: true, @@ -100,7 +107,7 @@ export class NestedSidebarMenu extends React.Component
- +
{this.props.title} -- cgit v1.2.3 From c6ecdbd86e3066b76e62f4f6eae5990414e9c84a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Feb 2018 23:52:40 -0700 Subject: use const over hard-coding --- packages/website/ts/pages/documentation/documentation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 2227f59d3..9591ddabe 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -68,7 +68,7 @@ const styles: Styles = { right: 0, overflowZ: 'hidden', overflowY: 'scroll', - minHeight: 'calc(100vh - 60px)', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, WebkitOverflowScrolling: 'touch', }, menuContainer: { -- cgit v1.2.3 From 8a52ffe7b7d4e2079b119f2c2b5cb885b17f1cd5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Feb 2018 23:52:49 -0700 Subject: Remove unneeded props --- packages/website/ts/pages/documentation/documentation.tsx | 1 - packages/website/ts/pages/wiki/wiki.tsx | 1 - 2 files changed, 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 9591ddabe..691a5e9be 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -112,7 +112,6 @@ export class Documentation extends React.Component {_.isUndefined(this.state.docAgnosticFormat) ? ( diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 944f429be..bbbda6eee 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -79,7 +79,6 @@ export class Wiki extends React.Component { blockchainIsLoaded={false} location={this.props.location} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={false} /> {_.isUndefined(this.state.articlesBySection) ? (
-- cgit v1.2.3 From 974fab72844d51314f726316d25161e1a8c14cc1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Feb 2018 23:54:36 -0700 Subject: replace repeated conditionals with variable --- .../ts/pages/documentation/method_signature.tsx | 35 +++++++++++----------- 1 file changed, 17 insertions(+), 18 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index a24d35924..f94524b48 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -24,27 +24,26 @@ export const MethodSignature: React.SFC = (props: MethodSi const sectionName = constants.TYPES_SECTION_NAME; const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); const paramStringArray: any[] = []; + const hasMoreThenTwoParams = parameters.length > 2; _.each(parameters, (param: React.ReactNode, i: number) => { - const finalParam = - parameters.length > 2 ? ( - - {param} - - ) : ( - param - ); + const finalParam = hasMoreThenTwoParams ? ( + + {param} + + ) : ( + param + ); paramStringArray.push(finalParam); - const comma = - parameters.length > 2 ? ( - - ,
- - ) : ( - ', ' - ); + const comma = hasMoreThenTwoParams ? ( + + ,
+ + ) : ( + ', ' + ); paramStringArray.push(comma); }); - if (parameters.length <= 2) { + if (!hasMoreThenTwoParams) { paramStringArray.pop(); } const methodName = props.shouldHideMethodName ? '' : props.method.name; @@ -55,7 +54,7 @@ export const MethodSignature: React.SFC = (props: MethodSi {props.method.callPath} {methodName} - {typeParameterIfExists}({parameters.length > 2 &&
} + {typeParameterIfExists}({hasMoreThenTwoParams &&
} {paramStringArray}) {props.method.returnType && ( -- cgit v1.2.3 From 9349752baa3d17b8c8d25eec0c4594f1f547fceb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Feb 2018 23:56:19 -0700 Subject: Add hack comment explaining param count short-cut --- packages/website/ts/pages/documentation/method_signature.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index f94524b48..22294e428 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -24,6 +24,9 @@ export const MethodSignature: React.SFC = (props: MethodSi const sectionName = constants.TYPES_SECTION_NAME; const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); 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 ? ( -- cgit v1.2.3 From 05c3a66543a04af25e668e9e4041eaa9291d9102 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 16 Feb 2018 00:08:57 -0700 Subject: Add more padding on top of section title --- packages/website/ts/pages/shared/markdown_section.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 0ce348c98..4d7d8b4ca 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -35,12 +35,12 @@ export class MarkdownSection extends React.Component -
+
Date: Fri, 16 Feb 2018 00:09:10 -0700 Subject: Remove section links until they go somewhere --- packages/website/ts/pages/shared/nested_sidebar_menu.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 1b63f5203..9285f0215 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -55,16 +55,9 @@ export class NestedSidebarMenu extends React.Component - -
- {finalSectionName.toUpperCase()} -
- +
+ {finalSectionName.toUpperCase()} +
{this._renderMenuItems(menuItems)}
); -- cgit v1.2.3 From 0114fc960862d92a08ce57ebc06e6bdf1714ac08 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 16 Feb 2018 00:12:27 -0700 Subject: remove hard-coded color --- packages/website/ts/pages/shared/nested_sidebar_menu.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 9285f0215..ba794ee9f 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -92,10 +92,7 @@ export class NestedSidebarMenu extends React.Component
-
+
|
-- cgit v1.2.3