diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/pages/documentation/developers_page.tsx | 140 |
1 files changed, 69 insertions, 71 deletions
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 9e4f6d413..4ea688529 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,6 +6,7 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { styled } from 'ts/style/theme'; import { BrowserType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -14,6 +15,7 @@ const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const browserType = utils.getBrowserType(); const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; +const SIDEBAR_PADDING = 22; export interface DevelopersPageProps { location: Location; @@ -25,11 +27,70 @@ export interface DevelopersPageProps { } export interface DevelopersPageState { - isHoveringSidebar: boolean; - isHoveringMainContent: boolean; isSidebarScrolling: boolean; } +const isUserOnMobile = sharedUtils.isUserOnMobile(); + +const scrollableContainerStyles = ` + position: absolute; + top: 80px; + left: 0px; + bottom: 0px; + right: 0px; + overflow-x: hidden; + overflow-y: scroll; + min-height: calc(100vh - ${TOP_BAR_HEIGHT}px); + -webkit-overflow-scrolling: touch; +`; + +interface SidebarContainerProps { + className?: string; +} + +const SidebarContainer = + styled.div < + SidebarContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 27px; + padding-bottom: 100px; + padding-left: ${SIDEBAR_PADDING}px; + padding-right: ${SIDEBAR_PADDING}px; + overflow: hidden; + &:hover { + overflow: auto; + padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px; + } +`; + +interface MainContentContainerProps { + className?: string; +} + +const MainContentContainer = + styled.div < + MainContentContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 0px; + padding-left: 50px; + padding-right: 50px; + overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; + &:hover { + padding-right: ${50 - SCROLLER_WIDTH}px; + overflow: auto; + } + @media (max-width: 40em) { + padding-left: 20px; + padding-right: 20px; + &:hover { + padding-right: ${20 - SCROLLER_WIDTH}px; + overflow: auto; + } + } +`; + export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> { private readonly _throttledScreenWidthUpdate: () => void; private readonly _throttledSidebarScrolling: () => void; @@ -39,8 +100,6 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); this.state = { - isHoveringSidebar: false, - isHoveringMainContent: false, isSidebarScrolling: false, }; } @@ -58,21 +117,8 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop window.clearInterval(this._sidebarScrollClearingInterval); } public render(): React.ReactNode { - const scrollableContainerStyles: React.CSSProperties = { - position: 'absolute', - top: 80, - left: 0, - bottom: 0, - right: 0, - overflowX: 'hidden', - overflowY: 'scroll', - minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }; const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const mainContentPadding = isSmallScreen ? 20 : 50; - const sidebarPadding = 22; - const isUserOnMobile = sharedUtils.isUserOnMobile(); return ( <Container className="flex items-center overflow-hidden" @@ -81,7 +127,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop colors.white } 50%, ${colors.white} 100%)`} > - <DocumentTitle title="0x Docs DevelopersPage" /> + <DocumentTitle title="0x Docs" /> <Container className="flex mx-auto" height="100vh"> <Container className="sm-hide xs-hide relative" @@ -98,28 +144,9 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop <DocsLogo height={36} /> </Container> </Container> - <div - style={{ - ...scrollableContainerStyles, - paddingTop: 27, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }} - onMouseEnter={this._onSidebarHover.bind(this, true)} - onMouseLeave={this._onSidebarHover.bind(this, false)} - onWheel={this._throttledSidebarScrolling} - > - <div - style={{ - paddingBottom: 100, - paddingLeft: sidebarPadding, - paddingRight: this.state.isHoveringSidebar - ? sidebarPadding - SCROLLER_WIDTH - : sidebarPadding, - }} - > - {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} - </div> - </div> + <SidebarContainer onWheel={this._throttledSidebarScrolling}> + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + </SidebarContainer> </Container> <Container className="relative" @@ -135,43 +162,14 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop sidebar={this.props.sidebar} /> </Container> - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - className="absolute" - style={{ - ...scrollableContainerStyles, - paddingTop: 0, - paddingLeft: mainContentPadding, - paddingRight: this.state.isHoveringMainContent - ? mainContentPadding - SCROLLER_WIDTH - : mainContentPadding, - overflow: this.state.isHoveringMainContent || isUserOnMobile ? 'auto' : 'hidden', - }} - onMouseEnter={this._onMainContentHover.bind(this, true)} - onMouseOver={this._onMainContentHover.bind(this, true)} - onMouseLeave={this._onMainContentHover.bind(this, false)} - > + <MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}> {this.props.mainContent} - </div> + </MainContentContainer> </Container> </Container> </Container> ); } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { this.setState({ isSidebarScrolling: true, |