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

More layout changes

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-12 13:24:13 +01:00
parent c5db8f25d3
commit b1f4bb722d
11 changed files with 269 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/website/ts/@next/components/blockIconLink.tsx
View File

@@ -19,14 +19,41 @@ export const BlockIconLink = (props: Props) => (
size="large"
margin={[0, 0, 'default', 0]}
/>
<Title>
{props.title}
</Title>
<Link
isWithArrow={true}
isTransparent={true}
isNoBorder={true}
href={props.linkUrl}
>
{props.linkLabel}
</Link>
</div>
</Wrap>
);
const Wrap = styled.div`
width: calc(50% - 15px);
height: 400px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: ${props => props.theme.lightBgColor};
@media (max-width: 900px) {
width: 100%;
margin-top: 30px;
}
`;
const Title = styled.h2`
font-size: 20px;
margin-bottom: 30px;
color: ${props => props.theme.linkColor};
`;

7
packages/website/ts/@next/components/definition.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export const Definition = (props: Props) => (
<Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}>
<Wrap {...props}>
<Icon
name="ready-to-build"
size={props.iconSize || 'medium'}
@@ -60,7 +60,8 @@ const Wrap = styled.div`
max-width: ${props => props.isInline && '354px'};
& + & {
margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'};
margin-top: ${props => props.isInlineIcon && '120px'};
margin-top: ${props => props.isWithMargin && '60px'};
}
@media (min-width: 768px) {
@@ -68,7 +69,7 @@ const Wrap = styled.div`
display: ${props => props.isInlineIcon && 'flex'};
justify-content: ${props => props.isInlineIcon && 'space-between'};
align-items: ${props => props.isInlineIcon && 'center'};
text-align: ${props => props.isInlineIcon && 'left'};
text-align: ${props => (props.isInlineIcon || !props.isCentered) && 'left'};
}
@media (max-width: 768px) {

7
packages/website/ts/@next/components/footer.tsx
View File

@@ -108,7 +108,12 @@ const LinkList = (props: LinkListProps) => (
</List>
);
const FooterSection = Section.withComponent('footer');
const FooterSection = styled.section`
padding: 30px;
margin-top: 30px;
background-color: #181818;
`;
const FooterWrap = styled(FooterSection)`
color: ${colors.white};

112
packages/website/ts/@next/components/newLayout.tsx
View File

@@ -1,39 +1,99 @@
import * as React from 'react';
import styled from 'styled-components';
interface Props {
isPadded: boolean;
interface WrapProps {
isFullWidth?: boolean;
isTextCentered?: boolean;
}
interface SectionProps {
isPadded?: boolean;
isFullWidth?: boolean;
isFlex?: boolean;
flexBreakpoint?: string;
maxWidth?: string;
bgColor?: 'dark' | 'light' | string;
}
export const Section = (props: Props) => (
<SectionBase bgColor={props.bgColor}>
<Wrap
isPadded={props.isPadded}
>
{props.children}
</Wrap>
</SectionBase>
);
interface FlexProps {
padding?: string;
isFlex?: boolean;
}
interface ColumnProps {
padding?: string;
}
export const Section = (props: SectionProps) => {
return (
<SectionBase {...props}>
<Wrap {...props}>
{props.children}
</Wrap>
</SectionBase>
);
};
export const Column = styled.div`
width: ${props => props.width};
max-width: ${props => props.maxWidth};
padding: ${props => props.padding};
@media (max-width: 768px) {
width: 100%;
margin-bottom: 60px;
}
`;
export const FlexWrap = styled.div`
padding: ${props => props.padding};
@media (min-width: ${props => props.flexBreakpoint || '768px'}) {
display: ${props => props.isFlex && 'flex'};
justify-content: ${props => props.isFlex && 'space-between'};
}
`;
export const WrapSticky = styled.div`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
const SectionBase = styled.section`
margin: 0 auto;
padding: ${props => props.isPadded && '120px 0'};
background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
@media (max-width: 768px) {
padding: ${props => props.isPadded && '40px 0'};
}
`;
const Wrap = styled(FlexWrap)`
width: calc(100% - 60px);
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
margin: 0 auto;
text-align: ${props => props.isTextCentered && 'center'};
`;
export const WrapGrid = styled(Wrap)`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => props.isCentered ? `center` : 'space-between'};
`;
Section.defaultProps = {
isPadded: true,
};
const SectionBase = styled.section`
width: calc(100% - 60px);
margin: 0 auto;
padding: 120px 0;
background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
FlexWrap.defaultProps = {
isFlex: true,
};
@media (max-width: 768px) {
padding: 40px 0;
}
`;
WrapGrid.defaultProps = {
isCentered: true,
};
const Wrap = styled.div`
width: calc(100% - 60px);
max-width: 895px;
margin: 0 auto;
text-align: center;
`;
Wrap.defaultProps = {
isFlex: false,
};

59
packages/website/ts/@next/components/sections/landing/about.tsx
View File

@@ -1,13 +1,18 @@
import * as React from 'react';
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
import {Heading, Paragraph} from 'ts/@next/components/text';
import {colors} from 'ts/style/colors';
import styled from 'styled-components';
import {Section} from 'ts/@next/components/newLayout';
import {Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout';
import {Heading, Paragraph} from 'ts/@next/components/text';
interface FigureProps {
value: string;
description: string;
}
export const SectionLandingAbout = () => (
<Section bgColor="dark">
<Section bgColor="dark" isTextCentered={true}>
<InlineIconWrap>
<Icon name="coin" size="small" />
<Icon name="coin" size="small" />
@@ -39,8 +44,48 @@ export const SectionLandingAbout = () => (
style={{
width: '340px',
borderColor: '#3C4746',
margin: '60px auto 0 auto',
margin: '60px auto',
}}
/>
<FlexWrap as="dl">
<Figure
value="873,435"
description="Number of Transactions"
/>
<Figure
value="$203M"
description="Total Volume"
/>
<Figure
value="227,372"
description="Number of Relayers"
/>
</FlexWrap>
</Section>
);
const Figure = (props: FigureProps) => (
<Column padding="0 30px">
<FigureValue>
{props.value}
</FigureValue>
<FigureDescription>
{props.description}
</FigureDescription>
</Column>
);
const FigureValue = styled.dt`
font-size: 50px;
font-size: 40px;
font-weight: 300;
margin-bottom: 15px;
`;
const FigureDescription = styled.dd`
font-size: 18px;
color: #999999;
`;

17
packages/website/ts/@next/components/sections/landing/clients.tsx
View File

@@ -1,10 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
import {Section} from 'ts/@next/components/newLayout';
import {Section, WrapGrid} from 'ts/@next/components/newLayout';
interface ProjectLogo {
name: string;
@@ -61,12 +60,10 @@ const projects: ProjectLogo[] = [
];
export const SectionLandingClients = () => (
<Section>
<WrapCentered>
<Heading size="small">
Join the growing number of projects developing on 0x
</Heading>
</WrapCentered>
<Section isTextCentered={true}>
<Heading size="small">
Join the growing number of projects developing on 0x
</Heading>
<WrapGrid width="narrow" isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
@@ -90,13 +87,13 @@ const StyledProject = styled.div<StyledProjectInterface>`
height: 100%;
}
@media (min-width: ${BREAKPOINTS.mobile}) {
@media (min-width: 768px) {
width: 120px;
height: 120px;
margin: 30px;
}
@media (max-width: ${BREAKPOINTS.mobile}) {
@media (max-width: 768px) {
width: 100px;
height: 100px;
margin: 15px;

78
packages/website/ts/@next/components/sections/landing/cta.tsx
View File

@@ -1,63 +1,31 @@
import * as React from 'react';
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
import {Column, Section} from 'ts/@next/components/newLayout';
import {BlockIconLink} from 'ts/@next/components/blockIconLink';
export const SectionLandingCta = () => (
<Section>
<Wrap>
<Column
bgColor="#003831"
colWidth="1/2"
isPadLarge={true}
>
<WrapCentered>
<Icon
name="ready-to-build"
size="large"
margin={[0, 0, 'default', 0]}
/>
<Paragraph size="medium" color="#00AE99" marginBottom="15px">
Ready to build on 0x?
</Paragraph>
<Link
href="#"
isTransparent={true}
isWithArrow={true}
>
Get Started
</Link>
</WrapCentered>
</Column>
<Column
bgColor="#003831"
colWidth="1/2"
isPadLarge={true}
>
<WrapCentered>
<Icon
name="ready-to-build"
size="large"
margin={[0, 0, 'default', 0]}
/>
<Paragraph size="medium" color="#00AE99" marginBottom="15px">
Want help from the 0x team?
</Paragraph>
<Link
href="#"
isTransparent={true}
isWithArrow={true}
>
Get in Touch
</Link>
</WrapCentered>
</Column>
</Wrap>
<Section
isPadded={false}
isFullWidth={true}
isFlex={true}
flexBreakpoint="900px"
>
<BlockIconLink
icon=""
title="Ready to build on 0x?"
linkLabel="Get Started"
linkUrl="#"
/>
<BlockIconLink
icon="coin"
title="Wat help from the 0x team?"
linkLabel="Get in Touch"
linkUrl="#"
/>
</Section>
);

10
packages/website/ts/@next/components/sections/landing/hero.tsx
View File

@@ -1,10 +1,8 @@
import * as React from 'react';
import {Button, ButtonWrap} from 'ts/@next/components/button';
import {LandingAnimation} from 'ts/@next/components/heroImage';
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
import {Button} from 'ts/@next/components/button';
import {Hero} from 'ts/@next/components/hero';
import {LandingAnimation} from 'ts/@next/components/heroImage';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
@@ -13,11 +11,11 @@ export const SectionLandingHero = () => (
title="Powering Decentralized Exchange"
description="0x is the best solution for adding exchange functionality to your business."
figure={<LandingAnimation image={<LogoOutlined />} />}
actions={<Actions />}
actions={<HeroActions />}
/>
);
const Actions = () => (
const HeroActions = () => (
<>
<Button isInline={true}>
Get Started

7
packages/website/ts/@next/pages/landing.tsx
View File

@@ -1,4 +1,5 @@
import * as React from 'react';
import styled from 'styled-components';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
@@ -6,6 +7,12 @@ import {SectionLandingClients} from 'ts/@next/components/sections/landing/client
import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
import {Button} from 'ts/@next/components/button';
import {Hero} from 'ts/@next/components/hero';
import {LandingAnimation} from 'ts/@next/components/heroImage';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
interface Props {
theme: {
bgColor: string;

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

@@ -10,12 +10,12 @@ import {Hero} from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
import { Link } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Slide, Slider } from 'ts/@next/components/slider/slider';
import { Heading, Paragraph } from 'ts/@next/components/text';
import {Definition} from 'ts/@next/components/definition';
import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
const offersData = [
{
@@ -95,8 +95,11 @@ export class NextWhy extends React.PureComponent {
}
/>
<Section bgColor={colors.backgroundDark} isPadLarge={true}>
<Wrap>
<Section
bgColor="dark"
isFlex={true}
maxWidth="1170px"
>
<Definition
title="Support for all Ethereum Standards"
description="0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol..."
@@ -117,12 +120,10 @@ export class NextWhy extends React.PureComponent {
iconSize="large"
isInline={true}
/>
</Wrap>
</Section>
</Section>
<Section>
<Wrap>
<Column colWidth="1/3">
<Section maxWidth="1170px" isFlex={true}>
<Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
<ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
@@ -130,52 +131,49 @@ export class NextWhy extends React.PureComponent {
</NavStickyWrap>
</Column>
<Column colWidth="2/3">
<SectionWrap id="benefits">
<Heading size="medium">What 0x offers</Heading>
<Column width="55%" maxWidth="826px">
<Column width="100%" maxWidth="560px">
<SectionWrap id="benefits">
<Heading size="medium">What 0x offers</Heading>
{_.map(offersData, (item, index) => (
<Definition
title={item.title}
description={item.description}
isWithMargin={true}
/>
))}
</SectionWrap>
<SectionWrap id="cases">
<Heading size="medium">Use Cases</Heading>
<Slider>
{_.map(useCaseSlides, (item, index) => (
<Slide
key={`useCaseSlide-${index}`}
heading={item.title}
text={item.description}
icon={item.icon}
{_.map(offersData, (item, index) => (
<Definition
key={`offers-${index}`}
title={item.title}
description={item.description}
isWithMargin={true}
/>
))}
</Slider>
</SectionWrap>
</SectionWrap>
<SectionWrap id="functionality">
<Heading size="medium">Exchange Functionality</Heading>
<SectionWrap id="cases">
<Heading size="medium">Use Cases</Heading>
<Slider>
{_.map(useCaseSlides, (item, index) => (
<Slide
key={`useCaseSlide-${index}`}
heading={item.title}
text={item.description}
icon={item.icon}
/>
))}
</Slider>
</SectionWrap>
{_.map(functionalityData, (item, index) => (
<ChapterItemWrap key={`functionality-${index}`}>
<Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
<SectionWrap id="functionality">
<Heading size="medium">Exchange Functionality</Heading>
<Heading marginBottom="15px">
{item.title}
</Heading>
<Paragraph isMuted={true} isNoMargin={true}>
{item.description}
</Paragraph>
</ChapterItemWrap>
))}
</SectionWrap>
</Column>
</Wrap>
{_.map(functionalityData, (item, index) => (
<Definition
key={`functionality-${index}`}
title={item.title}
description={item.description}
isWithMargin={true}
/>
))}
</SectionWrap>
</Column>
</Column>
</Section>
<Banner
@@ -206,13 +204,13 @@ const SectionWrap = styled.div`
background-color: #3d3d3d;
}
@media (min-width: ${BREAKPOINTS.mobile}) {
@media (min-width: 768px) {
& + &:before {
width: 100vw;
}
}
@media (max-width: ${BREAKPOINTS.mobile}) {
@media (max-width: 768px) {
text-align: left;
& + &:before {
@@ -222,7 +220,7 @@ const SectionWrap = styled.div`
`;
const NavStickyWrap = styled(WrapSticky)`
@media (max-width: ${BREAKPOINTS.mobile}) {
@media (max-width: 768px) {
display: none;
}
`;

5
packages/website/tsconfig.json
View File

@@ -28,5 +28,8 @@
]
},
"include": ["./ts/**/*"]
"include": ["./ts/**/*"],
"reportFiles": [
"./ts/@next/**/*"
],
}