diff options
Diffstat (limited to 'packages/website/ts/pages')
| -rw-r--r-- | packages/website/ts/pages/documentation/developers_page.tsx | 164 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/doc_page.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/docs_home.tsx | 23 | ||||
| -rw-r--r-- | packages/website/ts/pages/wiki/wiki.tsx | 18 |
4 files changed, 112 insertions, 95 deletions
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 934a4cc36..361dbc86e 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants } from '@0x/react-shared'; +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -6,13 +6,34 @@ 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 { ScreenWidths } from 'ts/types'; +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 SCROLLER_WIDTH = 4; +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; @@ -24,11 +45,70 @@ export interface DevelopersPageProps { } export interface DevelopersPageState { - isHoveringSidebar: boolean; - isHoveringMainContent: boolean; 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; @@ -38,8 +118,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, }; } @@ -57,20 +135,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; return ( <Container className="flex items-center overflow-hidden" @@ -79,7 +145,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" @@ -96,28 +162,11 @@ 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, - }} - > + <SidebarContainer onWheel={this._throttledSidebarScrolling}> + <Container paddingBottom="100px"> {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} - </div> - </div> + </Container> + </SidebarContainer> </Container> <Container className="relative" @@ -133,43 +182,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 ? '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, diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 7157abfc9..28bf2dba1 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,13 +6,13 @@ import { SupportedDocJson, TypeDocUtils, } from '@0x/react-docs'; -import { NestedSidebarMenu } from '@0x/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import semverSort = require('semver-sort'); import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; import { Container } from 'ts/components/ui/container'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 74fd0135c..bbbee2d2d 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -1,8 +1,9 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0x/react-shared'; +import { ALink, colors, Link } from '@0x/react-shared'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; import { Button } from 'ts/components/ui/button'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -37,9 +38,9 @@ const TUTORIALS: TutorialInfo[] = [ }, { iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', - description: Key.UseSharedLiquidityDescription, + description: Key.UseNetworkedLiquidityDescription, link: { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, }, @@ -194,7 +195,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { }, { description: - "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { title: 'Aquaduct', to: 'https://www.npmjs.com/package/aqueduct', @@ -219,26 +220,26 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { }, }, { - description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users", link: { to: 'https://github.com/ERCdEX/widget', - title: 'ERCdex Widget', + title: 'ERCdEX Widget', shouldOpenInNewTab: true, }, }, { - description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { to: 'https://github.com/ERCdEX/java', - title: 'ERCdex Java SDK', + title: 'ERCdEX Java SDK', shouldOpenInNewTab: true, }, }, { - description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { to: 'https://github.com/ERCdEX/python', - title: 'ERCdex Python SDK', + title: 'ERCdEX Python SDK', shouldOpenInNewTab: true, }, }, @@ -368,7 +369,7 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { > <Button borderRadius="4px" - padding="0.4em 6px" + padding="0.4em 0.375em" width="100%" fontColor={colors.grey800} fontSize="14px" diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index fdca61e39..c1802b1f8 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -5,7 +5,6 @@ import { HeaderSizes, Link, MarkdownSection, - NestedSidebarMenu, utils as sharedUtils, } from '@0x/react-shared'; import { ObjectMap } from '@0x/types'; @@ -13,6 +12,7 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; @@ -49,9 +49,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { isHoveringSidebar: false, }; } - public componentDidMount(): void { - window.addEventListener('hashchange', this._onHashChanged.bind(this), false); - } public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchArticlesBySectionAsync(); @@ -59,7 +56,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { public componentWillUnmount(): void { this._isUnmounted = true; clearTimeout(this._wikiBackoffTimeoutId); - window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) @@ -73,10 +69,14 @@ export class Wiki extends React.Component<WikiProps, WikiState> { {this._renderWikiArticles()} </div> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = _.isUndefined(this.state.articlesBySection) ? ( <div /> ) : ( - <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} /> + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + /> ); return ( <DevelopersPage @@ -99,7 +99,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { > <Button borderRadius="4px" - padding="0.4em 6px" + padding="0.4em 0.375em" width="100%" fontColor={colors.grey800} fontSize="14px" @@ -194,8 +194,4 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } return sectionNameToLinks; } - private _onHashChanged(_event: any): void { - const hash = window.location.hash.slice(1); - sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); - } } |