diff options
Diffstat (limited to 'packages')
7 files changed, 91 insertions, 39 deletions
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 589375da3..a412007f2 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -290,9 +290,6 @@ 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} diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.tsx index fd3029970..2c1de2970 100644 --- a/packages/website/ts/containers/connect_documentation.tsx +++ b/packages/website/ts/containers/connect_documentation.tsx @@ -24,8 +24,9 @@ const connectDocSections = { types: constants.TYPES_SECTION_NAME, }; -const s3BucketName = - configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-connect-docs-jsons' : 'connect-docs-jsons'; +// const s3BucketName = +// configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-connect-docs-jsons' : 'connect-docs-jsons'; +const s3BucketName = 'connect-docs-jsons'; const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`; const docsInfoConfig: DocsInfoConfig = { diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.tsx index eee2c7cc8..fd9eb5846 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.tsx +++ b/packages/website/ts/containers/zero_ex_js_documentation.tsx @@ -36,7 +36,8 @@ const zeroExJsDocSections = { types: constants.TYPES_SECTION_NAME, }; -const s3BucketName = configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons'; +// const s3BucketName = configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons'; +const s3BucketName = '0xjs-docs-jsons'; const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`; const docsInfoConfig: DocsInfoConfig = { 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<DocumentationAllProps, Docume availableDocVersions={this.props.availableDocVersions} menu={this.props.docsInfo.getMenu(this.props.docsVersion)} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={true} + shouldFullWidth={false} docsInfo={this.props.docsInfo} /> {_.isUndefined(this.state.docAgnosticFormat) ? ( @@ -129,26 +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} - title={this.props.docsInfo.displayName} - 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} /> - {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> 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<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..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<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[] = []; + _.each(parameters, (param: React.ReactNode, i: number) => { + const finalParam = + parameters.length > 2 ? ( + <span className="pl2" key={`param-${i}`}> + {param} + </span> + ) : ( + param + ); + paramStringArray.push(finalParam); + const comma = + parameters.length > 2 ? ( + <span key={`param-comma-${i}`}> + , <br /> + </span> + ) : ( + ', ' + ); + 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 ( - <span> + <span style={{ fontSize: 15 }}> {props.method.callPath} {methodName} - {typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {typeParameterIfExists}({parameters.length > 2 && <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/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<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, @@ -100,7 +107,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </div> <div className="flex"> <div> - <img src="/images/book.png" width="31" /> + <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} |