diff options
Diffstat (limited to 'packages/website/ts/pages/documentation/developers_page.tsx')
| -rw-r--r-- | packages/website/ts/pages/documentation/developers_page.tsx | 201 |
1 files changed, 0 insertions, 201 deletions
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx deleted file mode 100644 index 0b725c514..000000000 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import DocumentTitle from 'react-document-title'; -import { Helmet } from 'react-helmet'; -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 { media } from 'ts/style/media'; -import { styled } from 'ts/style/theme'; -import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -const THROTTLE_TIMEOUT = 100; -const TOP_BAR_HEIGHT = 80; -const browserType = utils.getBrowserType(); -let SCROLLBAR_WIDTH; -switch (browserType) { - case BrowserType.Firefox: - // HACK: Firefox doesn't allow styling of their scrollbar's. - // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox - const os = utils.getOperatingSystem(); - SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15; - break; - - case BrowserType.Edge: - // Edge's scrollbar is placed outside of the div content and doesn't - // need to be accounted for - SCROLLBAR_WIDTH = 0; - break; - - default: - SCROLLBAR_WIDTH = 4; -} -const SIDEBAR_PADDING = 22; - -export interface DevelopersPageProps { - location: Location; - translate: Translate; - screenWidth: ScreenWidths; - dispatcher: Dispatcher; - mainContent: React.ReactNode; - sidebar: React.ReactNode; -} - -export interface DevelopersPageState { - isSidebarScrolling: boolean; -} - -const isUserOnMobile = sharedUtils.isUserOnMobile(); - -const scrollableContainerStyles = ` - position: absolute; - top: ${TOP_BAR_HEIGHT}px; - left: 0px; - bottom: 0px; - right: 0px; - overflow-x: hidden; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - /* Required for hide/show onHover of scrollbar on Microsoft Edge */ - -ms-overflow-style: -ms-autohiding-scrollbar; -`; - -interface SidebarContainerProps { - className?: string; -} - -const SidebarContainer = styled.div<SidebarContainerProps>` - ${scrollableContainerStyles} - padding-top: 27px; - padding-left: ${SIDEBAR_PADDING}px; - padding-right: ${SIDEBAR_PADDING}px; - overflow: hidden; - &:hover { - overflow: auto; - padding-right: ${SIDEBAR_PADDING - SCROLLBAR_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 - SCROLLBAR_WIDTH}px; - overflow: auto; - } - ${media.small` - padding-left: 20px; - padding-right: 20px; - &:hover { - padding-right: ${20 - SCROLLBAR_WIDTH}px; - overflow: auto; - } - `} -`; - -export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> { - private readonly _throttledScreenWidthUpdate: () => void; - private readonly _throttledSidebarScrolling: () => void; - private _sidebarScrollClearingInterval: number; - constructor(props: DevelopersPageProps) { - super(props); - this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); - this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); - this.state = { - isSidebarScrolling: false, - }; - } - public componentDidMount(): void { - window.addEventListener('resize', this._throttledScreenWidthUpdate); - window.scrollTo(0, 0); - this._sidebarScrollClearingInterval = window.setInterval(() => { - this.setState({ - isSidebarScrolling: false, - }); - }, 1000); - } - public componentWillUnmount(): void { - window.removeEventListener('resize', this._throttledScreenWidthUpdate); - window.clearInterval(this._sidebarScrollClearingInterval); - } - public render(): React.ReactNode { - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - const mainContentPadding = isSmallScreen ? 20 : 50; - return ( - <Container - className="flex items-center overflow-hidden" - width="100%" - background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${ - colors.white - } 50%, ${colors.white} 100%)`} - > - <DocumentTitle title="0x Docs" /> - <Helmet> - <link rel="stylesheet" href="/css/github-gist.css" /> - </Helmet> - <Container className="flex mx-auto" height="100vh"> - <Container - className="sm-hide xs-hide relative" - width={270} - paddingLeft={22} - paddingRight={22} - paddingTop={0} - backgroundColor={colors.grey100} - > - <Container - borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} - paddingBottom="2px" - > - <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px"> - <DocsLogo /> - </Container> - </Container> - <SidebarContainer onWheel={this._throttledSidebarScrolling}> - <Container paddingBottom="100px"> - {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} - </Container> - </SidebarContainer> - </Container> - <Container - className="relative" - width={isSmallScreen ? '100vw' : 786} - paddingBottom="100px" - backgroundColor={colors.white} - > - <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}> - <DocsTopBar - location={this.props.location} - screenWidth={this.props.screenWidth} - translate={this.props.translate} - sidebar={this.props.sidebar} - /> - </Container> - <MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}> - {this.props.mainContent} - </MainContentContainer> - </Container> - </Container> - </Container> - ); - } - private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isSidebarScrolling: true, - }); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } -} // tslint:disable:max-file-line-count |