aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-02-16 11:12:47 +0800
committerFabio Berger <me@fabioberger.com>2018-02-16 11:12:47 +0800
commit5c91b4bfc625b02a303ff50732eccb2fddf3f679 (patch)
tree67f3f8bcca5884919da532538019aad4521e2f40 /packages/website/ts/pages
parente2b51c5dc46b30b21e0561689de1f9a3d0127554 (diff)
downloaddexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar
dexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.gz
dexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.bz2
dexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.lz
dexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.xz
dexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.zst
dexon-sol-tools-5c91b4bfc625b02a303ff50732eccb2fddf3f679.zip
Re-designed Wiki and half-redesigned docs pages
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx8
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx19
-rw-r--r--packages/website/ts/pages/shared/anchor_title.tsx7
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx2
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx17
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx42
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx105
7 files changed, 135 insertions, 65 deletions
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<DocumentationAllProps, Docume
<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}
@@ -147,11 +148,6 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
<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>
</div>
@@ -220,7 +216,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>
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<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">
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<MarkdownCodeBlockProps, M
}
public render() {
return (
- <span style={{ fontSize: 16 }}>
+ <span style={{ fontSize: 14 }}>
<HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
</span>
);
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<MarkdownSectionProps, Markd
const id = utils.getIdFromName(sectionName);
return (
<div
- className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
+ className="pt2 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="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>
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<NestedSidebarMenuProps, N
if (this.props.shouldDisplaySectionHeaders) {
const id = utils.getIdFromName(sectionName);
return (
- <div key={`section-${sectionName}`} className="py1">
+ <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
<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">
+ <div style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: 15 }} className="py1">
{finalSectionName.toUpperCase()}
</div>
</ScrollLink>
@@ -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,35 @@ 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: 'rgb(202, 202, 202)', paddingBottom: 9, paddingLeft: 14, height: 17 }}
+ >
+ |
+ </div>
+ <div className="flex">
+ <div>
+ <img src="/images/book.png" width="31" />
+ </div>
+ <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+ {this.props.title}
+ </div>
+ </div>
</div>
);
}
@@ -132,7 +164,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',
}}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index daf5c27a7..944f429be 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -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,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
blockchainIsLoaded={false}
location={this.props.location}
menuSubsectionsBySection={menuSubsectionsBySection}
- shouldFullWidth={true}
+ shouldFullWidth={false}
/>
{_.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 +96,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 +164,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 +236,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,
+ });
+ }
}