diff options
Diffstat (limited to 'packages/website/ts/pages/documentation/documentation.tsx')
| -rw-r--r-- | packages/website/ts/pages/documentation/documentation.tsx | 54 |
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> |