diff options
Diffstat (limited to 'packages/website/ts/pages')
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, + }); + } } |