aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-09-17 23:55:22 +0800
committerFabio Berger <me@fabioberger.com>2018-09-17 23:55:22 +0800
commitce51edcf80cbecab6f04db4704ddcf21c804f3b0 (patch)
treec2ad0a5f1236d5f18da48b6e2653fa2b2763e749 /packages/website/ts/components
parent60ef45722cd20fe243f58f5eaf8717081cbc39f1 (diff)
downloaddexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.tar
dexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.tar.gz
dexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.tar.bz2
dexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.tar.lz
dexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.tar.xz
dexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.tar.zst
dexon-sol-tools-ce51edcf80cbecab6f04db4704ddcf21c804f3b0.zip
Implement new responsive, dev section header and home scaffolding
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx47
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx15
-rw-r--r--packages/website/ts/components/ui/container.tsx1
3 files changed, 36 insertions, 27 deletions
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index c2bbfc417..148f2f7cb 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import * as React from 'react';
import { Link } from 'react-router-dom';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { Container } from 'ts/components/ui/container';
import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
@@ -17,17 +18,6 @@ interface DocsContentTopBarState {
isDrawerOpen: boolean;
}
-const styles: Styles = {
- menuItem: {
- fontSize: 14,
- color: colors.darkestGrey,
- paddingTop: 6,
- paddingBottom: 6,
- cursor: 'pointer',
- fontWeight: 400,
- },
-};
-
interface MenuItemInfo {
title: string;
url: string;
@@ -50,11 +40,6 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
}
}
public render(): React.ReactNode {
- const menuIconStyle = {
- fontSize: 25,
- color: 'black',
- cursor: 'pointer',
- };
const menuItemInfos: MenuItemInfo[] = [
{
title: this.props.translate.get(Key.Github, Deco.Cap),
@@ -76,9 +61,9 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
},
];
return (
- <div style={{ height: 75 }} className="pb1">
- <Container className="flex items-center" paddingTop={30} width="100%">
- <div className="col col-2">
+ <Container height={75} className="pb1">
+ <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
+ <div className="col col-2 sm-hide xs-hide">
<Link
to={WebsitePaths.Home}
style={{ color: colors.linkSectionGrey }}
@@ -90,14 +75,28 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
</div>
</Link>
</div>
- <div className="col col-10">
+ <div className="col col-4 md-hide sm-hide xs-hide" />
+ <div className="col col-6 md-pl4 md-ml4 sm-hide xs-hide">
<div className="flex items-center justify-between right" style={{ width: 300 }}>
{this._renderMenuItems(menuItemInfos)}
</div>
</div>
- <div className={'md-hide lg-hide'}>
- <div style={menuIconStyle}>
- <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
+ <div className="lg-hide md-hide">
+ <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} />
+ </div>
+ <div className="md-hide lg-hide absolute" style={{ right: 18, top: 12 }}>
+ <div
+ style={{
+ fontSize: 30,
+ color: 'black',
+ cursor: 'pointer',
+ }}
+ >
+ <i
+ className="zmdi zmdi-menu"
+ style={{ color: colors.grey700 }}
+ onClick={this._onMenuButtonClick.bind(this)}
+ />
</div>
</div>
</Container>
@@ -110,7 +109,7 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
}}
/>
{this._renderDrawer()}
- </div>
+ </Container>
);
}
private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode {
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 2a539c84b..9daf84ad0 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -2,12 +2,21 @@ import * as React from 'react';
import { Link } from 'react-router-dom';
import { WebsitePaths } from 'ts/types';
-export const DocsLogo = () => {
+export interface DocsLogoProps {
+ height: number;
+ containerStyle?: React.CSSProperties;
+}
+
+export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
return (
- <div style={{ paddingTop: 28 }}>
+ <div style={props.containerStyle}>
<Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
- <img src="/images/docs_logo.svg" height="36px" />
+ <img src="/images/docs_logo.svg" height={props.height} />
</Link>
</div>
);
};
+
+DocsLogo.defaultProps = {
+ containerStyle: {},
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index f2ae68b70..1e0bfd959 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
paddingRight?: StringOrNum;
paddingLeft?: StringOrNum;
backgroundColor?: string;
+ background?: string;
borderRadius?: StringOrNum;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;