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

Re-design docs pages

Browse Source
This commit is contained in:
Fabio Berger
2018-02-15 21:51:49 -07:00
parent 6cd4e7a17e
commit 2778f96483
7 changed files with 91 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
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 - 60px)',
WebkitOverflowScrolling: 'touch',
},
menuContainer: {
@@ -111,7 +112,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
availableDocVersions={this.props.availableDocVersions}
menu={this.props.docsInfo.getMenu(this.props.docsVersion)}
menuSubsectionsBySection={menuSubsectionsBySection}
shouldFullWidth={true}
shouldFullWidth={false}
docsInfo={this.props.docsInfo}
/>
{_.isUndefined(this.state.docAgnosticFormat) ? (
@@ -129,26 +130,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}
title={this.props.docsInfo.displayName}
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} />
{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>