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

WIP dropdown menus

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-11 12:11:22 +01:00
parent cb2b45bf04
commit 86acca5e1c
7 changed files with 151 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/website/ts/@next/components/button.tsx
View File

@@ -6,6 +6,7 @@ import { BREAKPOINTS } from 'ts/@next/components/layout';
import { colors } from 'ts/style/colors';
interface ButtonInterface {
bgColor?: string;
color?: string;
children?: Node | string;
isTransparent?: boolean;
@@ -26,13 +27,14 @@ export const Button = styled.button<ButtonInterface>`
appearance: none;
border: 1px solid transparent;
display: ${props => props.isInline && 'inline-block'};
background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
text-align: center;
font-size: ${props => props.isWithArrow ? '20px' : '18px'};
text-decoration: none;
cursor: pointer;
svg {
margin-left: 12px;
@@ -52,7 +54,7 @@ export const Link = (props: ButtonInterface) => {
const Component = Button.withComponent(ReactRouterLink);
return (
<Component to={href} isTransparent={true} {...props}>
<Component to={href} {...props}>
{children}
{ isWithArrow &&
@@ -66,6 +68,10 @@ export const Link = (props: ButtonInterface) => {
);
};
Link.defaultProps = {
isTransparent: true,
};
// Added this, & + & doesnt really work since we switch with element types...
export const ButtonWrap = styled.div`
button + button,

129
packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
View File

@@ -1,37 +1,132 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
import {WrapGrid} from 'ts/@next/components/layout';
import {Link as RouterLink} from 'react-router-dom';
import {Link} from 'ts/@next/components/button';
import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
import {Heading} from 'ts/@next/components/text';
const introData = [
{
label: 'Build a relayer',
url: '#',
},
{
label: 'Develop on Ethereum',
url: '#',
},
{
label: 'Make & take orders',
url: '#',
},
{
label: 'Use networked liquidity',
url: '#',
},
];
const docsData = [
{
label: '0x.js',
url: '#',
},
{
label: '0x Connect',
url: '#',
},
{
label: 'Smart Contract',
url: '#',
},
];
const linksData = [
{
label: 'Wiki',
url: '#',
},
{
label: 'Github',
url: '#',
},
{
label: 'Whitepaper',
url: '#',
},
];
export const DropdownDevelopers = () => (
<>
<Wrap>
<Heading size="small" color="#5d5d5d">
<DropdownWrap>
<div>
<Heading size={14} color="#5d5d5d">
Getting Started
</Heading>
<WrapGrid isCentered={false} isWrapped={true}>
<Link to="#">Build a relayer</Link>
<Link to="#">Develop on Ethereum</Link>
<Link to="#">Make & take orders</Link>
<Link to="#">Use networked liquidity</Link>
{_.map(introData, (item, index) => (
<RouterLink to={item.url}>
{item.label}
</RouterLink>
))}
</WrapGrid>
</Wrap>
</div>
<Wrap>
asdf
</Wrap>
<StyledWrap>
<Column colWidth="1/2" isNoPadding={true}>
<Heading size={14} color="#5d5d5d">
Popular Docs
</Heading>
<ul>
{_.map(docsData, (item, index) => (
<li>
<RouterLink to={item.url}>
{item.label}
</RouterLink>
</li>
))}
</ul>
</Column>
<Column colWidth="1/2" isNoPadding={true}>
<Heading size={14} color="#5d5d5d">
Useful Links
</Heading>
<ul>
{_.map(linksData, (item, index) => (
<li>
<RouterLink to={item.url}>
{item.label}
</RouterLink>
</li>
))}
</ul>
</Column>
</StyledWrap>
<StyledLink to="#" bgColor="#F3F6F4" isAccentColor={true} isNoBorder={true}>
View All Documentation
</StyledLink>
</DropdownWrap>
</>
);
const Wrap = styled.div`
padding: 15px 30px;
const DropdownWrap = styled.div`
padding: 15px 30px 75px 15px;
`;
const StyledWrap = styled(Wrap)`
border-top: 1px solid #dadada;
padding-top: 20px;
margin-top: 30px;
`;
const StyledLink = styled(Link)`
width: calc(50% - 15px);
flex-shrink: 0;
color: #000000;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
`;

8
packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
View File

@@ -1,5 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
import {Link} from 'react-router-dom';
import styled from 'styled-components';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -7,7 +8,7 @@ const navData = [
{
title: '0x Instant',
description: 'Simple crypto purchasing',
url: '#',
url: '/next/0x-instant',
},
{
title: '0x Launch kit',
@@ -24,6 +25,7 @@ export const DropdownProducts = () => (
<List>
{_.map(navData, (item, index) => (
<li>
<Link to={item.url}>
<Heading color="#000000" isNoMargin={true} size="small">
{item.title}
</Heading>
@@ -33,13 +35,15 @@ export const DropdownProducts = () => (
{item.description}
</Paragraph>
}
</Link>
</li>
))}
</List>
);
const List = styled.ul`
li {
a {
padding: 15px 30px;
display: block;
}
`;

14
packages/website/ts/@next/components/header.tsx
View File

@@ -6,8 +6,7 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
import { Button, Link } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -50,7 +49,7 @@ const navItems: NavItem[] = [
url: '#',
text: 'Developers',
dropdownComponent: DropdownDevelopers,
dropdownWidth: 420,
dropdownWidth: 450,
},
{ id: 'about', url: '/next/about/mission', text: 'About' },
{ id: 'blog', url: '#', text: 'Blog' },
@@ -154,8 +153,10 @@ const HeaderWrap = styled(Wrap)`
}
`;
const StyledButtonWrap = styled(ButtonWrap)`
const StyledButtonWrap = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
@media (max-width: 768px) {
background-color: #022924;
@@ -166,7 +167,10 @@ const StyledButtonWrap = styled(ButtonWrap)`
a {
text-align: left;
padding-left: 0;
margin: 0 !important;
}
a + a {
margin-left: 0;
}
}
`;

1
packages/website/ts/@next/components/layout.tsx
View File

@@ -110,7 +110,6 @@ export const Wrap = styled(WrapBase)`
@media (min-width: ${BREAKPOINTS.mobile}) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: ${props => props.isReversed && 'row-reverse'};
}
`;

6
packages/website/ts/@next/components/text.tsx
View File

@@ -3,7 +3,7 @@ import styled from 'styled-components';
import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
interface BaseTextInterface extends PaddingInterface {
size?: 'default' | 'medium' | 'large' | 'small';
size?: 'default' | 'medium' | 'large' | 'small' | number;
isCentered?: boolean;
}
@@ -23,14 +23,14 @@ interface ParagraphProps extends BaseTextInterface {
const StyledHeading = styled.h1<HeadingProps>`
color: ${props => props.color || props.theme.textColor};
font-size: ${props => `var(--${props.size || 'default'}Heading)`};
font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
padding: ${props => props.padding && getCSSPadding(props.padding)};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
text-align: ${props => props.isCentered && 'center'};
font-weight: 400;
margin-left: ${props => props.isCentered && 'auto'};
margin-right: ${props => props.isCentered && 'auto'};
font-weight: 400;
`;
export const Heading: React.StatelessComponent<HeadingProps> = props => {

2
packages/website/ts/@next/pages/why.tsx
View File

@@ -123,7 +123,7 @@ export class NextWhy extends React.PureComponent {
<Section>
<Wrap>
<Column colWidth="1/3">
<NavStickyWrap>
<NavStickyWrap offsetTop="130px">
<ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
<ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
<ChapterLink offset="60" href="#functionality">Features</ChapterLink>