diff options
author | Fabio Berger <me@fabioberger.com> | 2018-02-16 11:12:47 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-02-16 11:12:47 +0800 |
commit | 5c91b4bfc625b02a303ff50732eccb2fddf3f679 (patch) | |
tree | 67f3f8bcca5884919da532538019aad4521e2f40 | |
parent | e2b51c5dc46b30b21e0561689de1f9a3d0127554 (diff) | |
download | dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.gz dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.bz2 dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.lz dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.xz dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.tar.zst dexon-0x-contracts-5c91b4bfc625b02a303ff50732eccb2fddf3f679.zip |
Re-designed Wiki and half-redesigned docs pages
-rw-r--r-- | packages/website/less/all.less | 32 | ||||
-rw-r--r-- | packages/website/public/css/github-gist.css | 71 | ||||
-rw-r--r-- | packages/website/public/images/book.png | bin | 0 -> 963 bytes | |||
-rw-r--r-- | packages/website/public/index.html | 2 | ||||
-rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 91 | ||||
-rw-r--r-- | packages/website/ts/components/ui/badge.tsx | 1 | ||||
-rw-r--r-- | packages/website/ts/pages/documentation/documentation.tsx | 8 | ||||
-rw-r--r-- | packages/website/ts/pages/documentation/method_block.tsx | 19 | ||||
-rw-r--r-- | packages/website/ts/pages/shared/anchor_title.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/pages/shared/markdown_code_block.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/pages/shared/markdown_section.tsx | 17 | ||||
-rw-r--r-- | packages/website/ts/pages/shared/nested_sidebar_menu.tsx | 42 | ||||
-rw-r--r-- | packages/website/ts/pages/wiki/wiki.tsx | 105 | ||||
-rw-r--r-- | packages/website/ts/utils/colors.ts | 3 |
14 files changed, 277 insertions, 123 deletions
diff --git a/packages/website/less/all.less b/packages/website/less/all.less index 7f2a8fc67..113dff0be 100644 --- a/packages/website/less/all.less +++ b/packages/website/less/all.less @@ -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, diff --git a/packages/website/public/css/github-gist.css b/packages/website/public/css/github-gist.css new file mode 100644 index 000000000..d5c8751c5 --- /dev/null +++ b/packages/website/public/css/github-gist.css @@ -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; +} diff --git a/packages/website/public/images/book.png b/packages/website/public/images/book.png Binary files differnew file mode 100644 index 000000000..0b0598f66 --- /dev/null +++ b/packages/website/public/images/book.png diff --git a/packages/website/public/index.html b/packages/website/public/index.html index d7006c518..3072ff03d 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -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"> diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index b1367be4f..589375da3 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -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> - <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> + <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> - )} - {!this._isViewingConnectDocs() && ( - <Link to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem className="py2">0x Connect Docs</MenuItem> + <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> + <MenuItem className="py2">Wiki</MenuItem> </Link> - )} - {!this._isViewingSmartContractsDocs() && ( - <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem className="py2">Smart Contract Docs</MenuItem> + {!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> - )} - {!this._isViewingPortal() && ( - <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> - <MenuItem className="py2">Portal DApp</MenuItem> + <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> - )} - <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> </Drawer> ); } @@ -294,6 +296,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <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 +313,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)} /> diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx index 7f7ea006e..056d741e0 100644 --- a/packages/website/ts/components/ui/badge.tsx +++ b/packages/website/ts/components/ui/badge.tsx @@ -8,7 +8,6 @@ const styles: Styles = { fontSize: 11, height: 10, borderRadius: 5, - marginTop: 25, lineHeight: 0.9, fontFamily: 'Roboto Mono', marginLeft: 3, 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, + }); + } } diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts index 58ce667e3..b6b5a31e7 100644 --- a/packages/website/ts/utils/colors.ts +++ b/packages/website/ts/utils/colors.ts @@ -2,6 +2,7 @@ import { colors as materialUiColors } from 'material-ui/styles'; export const colors = { ...materialUiColors, + gray40: '#F8F8F8', grey50: '#FAFAFA', grey100: '#F5F5F5', lightestGrey: '#F0F0F0', @@ -15,6 +16,7 @@ export const colors = { darkGrey: '#818181', landingLinkGrey: '#919191', grey700: '#616161', + grey750: '#515151', grey800: '#424242', darkerGrey: '#393939', heroGrey: '#404040', @@ -23,6 +25,7 @@ export const colors = { dharmaDarkGrey: '#252525', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', turquois: '#058789', lightPurple: '#A81CA6', |