aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-19 18:27:42 +0800
committerFabio Berger <me@fabioberger.com>2018-10-19 18:27:42 +0800
commit7742df8614e6fd8c0508e29aec47bc86f9359a8b (patch)
treecbcbfe9495200bde382d0d983b2da490b0ba8266
parent26cd5ec1493adab55cbaf0801b0725ca99b8fc8e (diff)
downloaddexon-0x-contracts-7742df8614e6fd8c0508e29aec47bc86f9359a8b.tar.gz
dexon-0x-contracts-7742df8614e6fd8c0508e29aec47bc86f9359a8b.tar.zst
dexon-0x-contracts-7742df8614e6fd8c0508e29aec47bc86f9359a8b.zip
chore: Replace state with styled-components for hover detection
-rw-r--r--packages/website/ts/pages/documentation/developers_page.tsx140
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,