aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/documentation
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-02-16 12:51:49 +0800
committerFabio Berger <me@fabioberger.com>2018-02-16 12:51:49 +0800
commit2778f96483ea21f5ec33f4222c19d7864eca2f1f (patch)
tree0f25fb213f5e3877c2f7bf44a156d4d18bb65d15 /packages/website/ts/pages/documentation
parent6cd4e7a17edbb474de6a82f0e665a1238b3724ba (diff)
downloaddexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.tar
dexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.tar.gz
dexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.tar.bz2
dexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.tar.lz
dexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.tar.xz
dexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.tar.zst
dexon-sol-tools-2778f96483ea21f5ec33f4222c19d7864eca2f1f.zip
Re-design docs pages
Diffstat (limited to 'packages/website/ts/pages/documentation')
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx54
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx9
-rw-r--r--packages/website/ts/pages/documentation/method_signature.tsx47
3 files changed, 78 insertions, 32 deletions
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>
);