aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/documentation/documentation.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/documentation/documentation.tsx')
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx54
1 files changed, 35 insertions, 19 deletions
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index e20040bc0..2227f59d3 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -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>