crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #405 from 0xProject/refactor/docs-redesign

Browse Source 
Re-design Wiki + Doc pages
This commit is contained in:
Fabio Berger 2018-02-16 07:45:55 -08:00 committed by GitHub
commit 4fd64ca492
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 365 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/website/less/all.less
View File

@ -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,

71
packages/website/public/css/github-gist.css Normal file
View File

@ -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;
}

BIN
packages/website/public/images/doc_icons/connect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 361 B

BIN
packages/website/public/images/doc_icons/contracts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
packages/website/public/images/doc_icons/wiki.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 760 B

BIN
packages/website/public/images/doc_icons/zeroExJs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
packages/website/public/index.html
View File

@ -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">

100
packages/website/ts/components/top_bar/top_bar.tsx
View File

@ -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 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>
<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>
</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>
<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>
<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>
</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>
<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>
</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)}
/>

1
packages/website/ts/components/ui/badge.tsx
View File

@ -8,7 +8,6 @@ const styles: Styles = {
fontSize: 11,
height: 10,
borderRadius: 5,
marginTop: 25,
lineHeight: 0.9,
fontFamily: 'Roboto Mono',
marginLeft: 3,

59
packages/website/ts/pages/documentation/documentation.tsx
View File

@ -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 - ${TOP_BAR_HEIGHT}px)`,
WebkitOverflowScrolling: 'touch',
},
menuContainer: {
@ -111,7 +112,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 +129,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 +231,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>

28
packages/website/ts/pages/documentation/method_block.tsx
View File

@ -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>

49
packages/website/ts/pages/documentation/method_signature.tsx
View File

@ -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>
);

7
packages/website/ts/pages/shared/anchor_title.tsx
View File

@ -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',
},
};

2
packages/website/ts/pages/shared/markdown_code_block.tsx
View File

@ -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>
);

19
packages/website/ts/pages/shared/markdown_section.tsx
View File

@ -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>

57
packages/website/ts/pages/shared/nested_sidebar_menu.tsx
View File

@ -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',
}}

104
packages/website/ts/pages/wiki/wiki.tsx
View File

@ -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,
});
}
}

4
packages/website/ts/utils/colors.ts
View File

@ -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',