- Website
+ {
const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
return (
+ {this._renderPortalMenu()}
+ {this._renderDocsMenu()}
+ {this._renderWiki()}
+
-
-
-
-
-
-
- {!this._isViewing0xjsDocs() && (
-
-
-
- )}
- {!this._isViewingConnectDocs() && (
-
-
-
- )}
- {!this._isViewingSmartContractsDocs() && (
-
-
-
- )}
- {!this._isViewingPortal() && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
);
}
@@ -288,12 +290,10 @@ export class TopBar extends React.Component
+ Website
+
+
+
+
+
+
+
+ {!this._isViewing0xjsDocs() && (
+
+
+
+ )}
+ {!this._isViewingConnectDocs() && (
+
+
+
+ )}
+ {!this._isViewingSmartContractsDocs() && (
+
+
+
+ )}
+ {!this._isViewingPortal() && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
- {
return (
- {sectionTitle}
-
-
) : (
-
- 0x Protocol Wiki
-
-
+
+
-
-
-
-
+
-
@@ -220,7 +231,7 @@ export class Documentation extends React.Component
-
-
- - {this.props.docsInfo.displayName} - -
- {this._renderDocumentation()} +
+
+
+ {this._renderDocumentation()}
+
+
{!method.isConstructor && (
-
+
{(method as TypescriptMethod).isStatic && this._renderChip('Static')}
{(method as SolidityMethod).isConstant && this._renderChip('Constant')}
{(method as SolidityMethod).isPayable && this._renderChip('Payable')}
-
)}
+
@@ -121,12 +122,17 @@ export class MethodBlock extends React.Component
- {parameter.name}
+
+ {parameter.name}
+
{isOptional && 'optional'}
-
+
{parameter.comment && = (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 ? (
+
+ {param}
+
+ ) : (
+ param
+ );
+ paramStringArray.push(finalParam);
+ const comma = hasMoreThenTwoParams ? (
+
+ ,
+
+ ) : (
+ ', '
+ );
+ 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 (
-
+
{props.method.callPath}
{methodName}
- {typeParameterIfExists}({paramString})
- {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
+ {typeParameterIfExists}({hasMoreThenTwoParams &&
}
+ {paramStringArray})
{props.method.returnType && (
-
+
{this.props.literal}
);
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 5487dc8cc9..4d7d8b4ca0 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
-
+
-
+
{
public static defaultProps: Partial = {
shouldDisplaySectionHeaders: true,
@@ -44,17 +54,10 @@ export class NestedSidebarMenu extends React.Component
-
-
- {finalSectionName.toUpperCase()}
-
-
+
+
+ {finalSectionName.toUpperCase()}
+
{this._renderMenuItems(menuItems)}
);
@@ -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,32 @@ export class NestedSidebarMenu extends React.Component
+ );
+ }
+ private _renderEmblem() {
+ return (
+
+
+
+ 0x
+
+
+ docs
+
+
+
+ |
+
+
+
+ 
+
+
+ {this.props.title}
+
+
);
}
@@ -132,7 +161,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 (
{
blockchainIsLoaded={false}
location={this.props.location}
menuSubsectionsBySection={menuSubsectionsBySection}
- shouldFullWidth={true}
/>
{_.isUndefined(this.state.articlesBySection) ? (
-
+
{
) : (
-
-
+
+
-
-
- 0x Protocol Wiki
-
-
- {this._renderWikiArticles()}
+
+
+
+
+ {this._renderWikiArticles()}
+
+
@@ -135,18 +163,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 menuSubsectionsBySection;
}
+ private _onSidebarHover(event: React.FormEvent) {
+ 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 58ce667e30..b55543151f 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',