From ee6bb229e0f912e2ccd9aff70ebf82d98b312251 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 09:44:27 +0100 Subject: Don't show topBar menu items in sidebar on wiki --- packages/website/ts/pages/wiki/wiki.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index fdca61e39..e62300ddf 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -73,10 +73,14 @@ export class Wiki extends React.Component { {this._renderWikiArticles()} ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = _.isUndefined(this.state.articlesBySection) ? (
) : ( - + ); return ( Date: Fri, 19 Oct 2018 09:44:52 +0100 Subject: fix: Make sure page scrollable on mobile --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 934a4cc36..918a3a635 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'); @@ -71,6 +71,7 @@ export class DevelopersPage extends React.Component Date: Fri, 19 Oct 2018 09:56:34 +0100 Subject: copy: Networked liquidity -> shared liquidity --- packages/website/translations/chinese.json | 4 ++-- packages/website/translations/english.json | 4 ++-- packages/website/translations/korean.json | 4 ++-- packages/website/translations/russian.json | 4 ++-- packages/website/translations/spanish.json | 4 ++-- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- packages/website/ts/pages/documentation/docs_home.tsx | 4 ++-- packages/website/ts/types.ts | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) (limited to 'packages/website') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 2d3ad6974..4f779282f 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -85,8 +85,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index fab8ed56b..510b3a05b 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -89,8 +89,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 8470bf9a0..be7d00228 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -85,8 +85,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index b2bc151ab..d75b2a459 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -85,8 +85,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index fefb92447..a64db197c 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -86,8 +86,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index f5d21535a..b279566e0 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -24,7 +24,7 @@ const gettingStartedKeyToLinkInfo2: ALink[] = [ to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 74fd0135c..a8dcff43b 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -37,9 +37,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`, }, }, diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index f85317c7b..d3bdd880e 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -468,8 +468,8 @@ export enum Key { DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', OrderBasics = 'ORDER_BASICS', OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', - UseSharedLiquidity = 'USE_SHARED_LIQUIDITY', - UseSharedLiquidityDescription = 'USE_SHARED_LIQUIDITY_DESCRIPTION', + UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', + UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', -- cgit From 0eb9769cd41f86333670b2f77b01c0e9c203a499 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:00:30 +0100 Subject: Switch tutorial descriptions --- packages/website/translations/chinese.json | 4 ++-- packages/website/translations/english.json | 4 ++-- packages/website/translations/korean.json | 4 ++-- packages/website/translations/russian.json | 4 ++-- packages/website/translations/spanish.json | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) (limited to 'packages/website') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 4f779282f..95b9bda62 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -80,9 +80,9 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "开发人员", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 510b3a05b..465bd49b4 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -84,9 +84,9 @@ "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index be7d00228..5485e5583 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -80,9 +80,9 @@ "ROCKETCHAT": "Rocket.chat", "DEVELOPERS": "개발자", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index d75b2a459..a2e2a8cef 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -80,9 +80,9 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "Для разработчиков", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index a64db197c..acbc59c3d 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -81,9 +81,9 @@ "HOME": "rocket.chat", "ROCKETCHAT": "desarrolladores", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", -- cgit From c26b3f5dfcea86b1885dcf2070580baec82430ea Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:05:19 +0100 Subject: copy: consistently name ERCdEX with correct capitalization --- packages/website/ts/pages/documentation/docs_home.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index a8dcff43b..cf229cb3b 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -194,7 +194,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { }, { 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 +219,26 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { }, }, { - 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, }, }, -- cgit From da0c5dd9d3e92b48a87585d4c08e2e9bd1279090 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:35:34 +0100 Subject: chore: Fix scroll issue by bumping version and installing from new branch --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index 777790ca9..771b1b908 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,7 +52,7 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", "redux": "^3.6.0", -- cgit From 26cd5ec1493adab55cbaf0801b0725ca99b8fc8e Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:46:55 +0100 Subject: style: accomodate different scrollbar widths on Firefox vs. Chrome/Safari --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 918a3a635..9e4f6d413 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,13 +6,14 @@ 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 { BrowserType, 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(); +const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; export interface DevelopersPageProps { location: Location; -- cgit From 7742df8614e6fd8c0508e29aec47bc86f9359a8b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 11:27:42 +0100 Subject: chore: Replace state with styled-components for hover detection --- .../ts/pages/documentation/developers_page.tsx | 140 ++++++++++----------- 1 file changed, 69 insertions(+), 71 deletions(-) (limited to 'packages/website') 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 { private readonly _throttledScreenWidthUpdate: () => void; private readonly _throttledSidebarScrolling: () => void; @@ -39,8 +100,6 @@ export class DevelopersPage extends React.Component - + -
-
- {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} -
-
+ + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + -
+ {this.props.mainContent} -
+ ); } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } private _onSidebarScroll(_event: React.FormEvent): void { this.setState({ isSidebarScrolling: true, -- cgit From a7a17c85dce26c8384165b821f0bf60ce531b987 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 11:48:15 +0100 Subject: chore: improve sidebar scroll --- packages/website/ts/pages/documentation/developers_page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 4ea688529..0bbc6252d 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -40,8 +40,8 @@ const scrollableContainerStyles = ` right: 0px; overflow-x: hidden; overflow-y: scroll; - min-height: calc(100vh - ${TOP_BAR_HEIGHT}px); -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; `; interface SidebarContainerProps { -- cgit From 724f3b9cf7fb3a740d56e28c5375665b944919f3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 12:25:31 +0100 Subject: Improve sidebar logic to handle MS Edge, Firefox differences between Windows & Mac --- .../ts/pages/documentation/developers_page.tsx | 30 +++++++++++++++++----- packages/website/ts/types.ts | 2 ++ packages/website/ts/utils/utils.ts | 4 +++ 3 files changed, 30 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 0bbc6252d..30b79552f 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -7,14 +7,31 @@ 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 { 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(); -const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; +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 { @@ -34,13 +51,14 @@ const isUserOnMobile = sharedUtils.isUserOnMobile(); const scrollableContainerStyles = ` position: absolute; - top: 80px; + 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; `; @@ -60,7 +78,7 @@ const SidebarContainer = overflow: hidden; &:hover { overflow: auto; - padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px; + padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px; } `; @@ -78,14 +96,14 @@ const MainContentContainer = padding-right: 50px; overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; &:hover { - padding-right: ${50 - SCROLLER_WIDTH}px; + padding-right: ${50 - SCROLLBAR_WIDTH}px; overflow: auto; } @media (max-width: 40em) { padding-left: 20px; padding-right: 20px; &:hover { - padding-right: ${20 - SCROLLER_WIDTH}px; + padding-right: ${20 - SCROLLBAR_WIDTH}px; overflow: auto; } } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index d3bdd880e..22bfd2cb4 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -590,6 +590,8 @@ export enum BrowserType { Chrome = 'Chrome', Firefox = 'Firefox', Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', Other = 'Other', } diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index d4ad5f611..87aa48018 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -413,6 +413,10 @@ export const utils = { return BrowserType.Firefox; } else if (bowser.opera) { return BrowserType.Opera; + } else if (bowser.msedge) { + return BrowserType.Edge; + } else if (bowser.safari) { + return BrowserType.Safari; } else { return BrowserType.Other; } -- cgit