crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove "Home" menu item, instead make different parts of logo link to different sections of the website

Browse Source
This commit is contained in:
Fabio Berger
2018-11-11 15:31:52 +01:00
parent 7626d1d6fe
commit 753b33aec5
8 changed files with 54 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/website/ts/components/documentation/docs_logo.tsx
View File

@@ -1,17 +1,34 @@
import { Link } from '@0x/react-shared';
import * as React from 'react';
import { styled } from 'ts/style/theme';
import { WebsitePaths } from 'ts/types';
import { Container } from '../ui/container';
export interface DocsLogoProps {
height: number;
containerStyle?: React.CSSProperties;
}
const Image = styled.img`
&:hover {
opacity: 0.7;
}
`;
export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
return (
<Link to={WebsitePaths.Docs}>
<img src="/images/docs_logo.svg" height={props.height} />
</Link>
<Container className="flex">
<Container>
<Link to={WebsitePaths.Home}>
<Image src="/images/developers/logo/0x.svg" height={30} />
</Link>
</Container>
<Container paddingTop="7px" paddingLeft="7px">
<Link to={WebsitePaths.Docs}>
<Image src="/images/developers/logo/docs.svg" height={16} />
</Link>
</Container>
</Container>
);
};

50
packages/website/ts/components/documentation/docs_top_bar.tsx
View File

@@ -37,35 +37,33 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
public render(): React.ReactNode {
return (
<Container height={80}>
<Container className="lg-pt1 md-pt1 sm-pt0">
<Container
className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start"
width="100%"
>
<Container className="sm-hide xs-hide">
<Container className="flex items-center justify-between right" width="300px">
{this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
</Container>
</Container>
<Container className="lg-hide md-hide">
<Container paddingTop="6px">
<DocsLogo height={30} />
</Container>
</Container>
<Container className="md-hide lg-hide absolute" right="18px" top="12px">
<i
className="zmdi zmdi-menu"
style={{
color: colors.grey700,
fontSize: 30,
cursor: 'pointer',
}}
onClick={this._onMenuButtonClick.bind(this)}
/>
<Container
className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start"
width="100%"
>
<Container className="sm-hide xs-hide">
<Container className="flex items-center justify-between right" width="250px">
{this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
</Container>
</Container>
<Container className="lg-hide md-hide">
<Container paddingTop="6px">
<DocsLogo />
</Container>
</Container>
<Container className="md-hide lg-hide absolute" right="18px" top="12px">
<i
className="zmdi zmdi-menu"
style={{
color: colors.grey700,
fontSize: 30,
cursor: 'pointer',
}}
onClick={this._onMenuButtonClick.bind(this)}
/>
</Container>
</Container>
<Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'15px'} />
<Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'16px'} />
{this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
</Container>
);