aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-03 19:14:22 +0800
committerFabio Berger <me@fabioberger.com>2018-10-03 19:14:22 +0800
commit55d61b0dc759255ce15b7c6be1a4dab2d9df792d (patch)
tree81372897b7bb8431fd65dd3c840b943d899b6974 /packages/website/ts
parentf13c48216160e0e1e58354ff09d0c583dfe30d10 (diff)
downloaddexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.tar
dexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.tar.gz
dexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.tar.bz2
dexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.tar.lz
dexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.tar.xz
dexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.tar.zst
dexon-0x-contracts-55d61b0dc759255ce15b7c6be1a4dab2d9df792d.zip
Add border underneath logo while user is scrolling
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/pages/documentation/home.tsx35
2 files changed, 30 insertions, 6 deletions
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 1e0bfd959..782ab3b6f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -17,6 +17,7 @@ export interface ContainerProps {
backgroundColor?: string;
background?: string;
borderRadius?: StringOrNum;
+ borderBottom?: StringOrNum;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index 0aefc4662..19a3f9eaf 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -360,24 +360,35 @@ export interface HomeProps {
export interface HomeState {
isHoveringSidebar: boolean;
isHoveringMainContent: boolean;
+ isSidebarScrolling: boolean;
}
export class Home extends React.Component<HomeProps, HomeState> {
private readonly _throttledScreenWidthUpdate: () => void;
+ private readonly _throttledSidebarScrolling: () => void;
+ private _sidebarScrollClearingInterval: number;
constructor(props: HomeProps) {
super(props);
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,
};
}
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 scrollableContainerStyles: React.CSSProperties = {
@@ -422,10 +433,14 @@ export class Home extends React.Component<HomeProps, HomeState> {
width={234}
paddingLeft={22}
paddingRight={22}
- paddingTop={2}
+ paddingTop={0}
backgroundColor={colors.grey100}
>
- <DocsLogo height={36} containerStyle={{ paddingTop: 30, paddingBottom: 12 }} />
+ <Container
+ borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'}
+ >
+ <DocsLogo height={36} containerStyle={{ paddingTop: 30, paddingBottom: 10 }} />
+ </Container>
<div
style={{
...scrollableContainerStyles,
@@ -434,6 +449,7 @@ export class Home extends React.Component<HomeProps, HomeState> {
}}
onMouseEnter={this._onSidebarHover.bind(this, true)}
onMouseLeave={this._onSidebarHover.bind(this, false)}
+ onWheel={this._throttledSidebarScrolling}
>
{this._renderMenu(sectionNameToLinks)}
</div>
@@ -524,7 +540,7 @@ export class Home extends React.Component<HomeProps, HomeState> {
);
});
return (
- <Container paddingLeft="22px" paddingBottom="100px">
+ <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px">
{navigation}
</Container>
);
@@ -625,9 +641,11 @@ export class Home extends React.Component<HomeProps, HomeState> {
);
}
private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
- this.setState({
- isHoveringSidebar: isHovering,
- });
+ if (isHovering !== this.state.isHoveringSidebar) {
+ this.setState({
+ isHoveringSidebar: isHovering,
+ });
+ }
}
private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
if (isHovering !== this.state.isHoveringMainContent) {
@@ -636,6 +654,11 @@ export class Home extends React.Component<HomeProps, HomeState> {
});
}
}
+ private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void {
+ this.setState({
+ isSidebarScrolling: true,
+ });
+ }
private _updateScreenWidth(): void {
const newScreenWidth = utils.getScreenWidth();
this.props.dispatcher.updateScreenWidth(newScreenWidth);