diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 01:22:36 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 01:23:12 +0800 |
commit | f4a95c295c427c00a5cb2df83ad145886a9d1bf4 (patch) | |
tree | 00caeb652e837cadd03032cbf6d21fad503b835d | |
parent | 142d29ba57f55aefd5c5e5f669c388ab57152173 (diff) | |
download | dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.gz dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.bz2 dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.lz dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.xz dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.zst dexon-0x-contracts-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.zip |
WIP Begin cleanup, adds mediaquery component
-rw-r--r-- | packages/website/package.json | 1 | ||||
-rw-r--r-- | packages/website/ts/@next/components/aboutPageLayout.tsx | 19 | ||||
-rw-r--r-- | packages/website/ts/@next/components/banner.tsx | 6 | ||||
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/@next/components/definition.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 30 | ||||
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 35 | ||||
-rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 12 | ||||
-rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 3 | ||||
-rw-r--r-- | packages/website/tsconfig.json | 5 |
11 files changed, 63 insertions, 59 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index fc98a1a1b..b0b0c8340 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -66,6 +66,7 @@ "react-loadable": "^5.5.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", + "react-responsive": "^6.0.1", "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "react-syntax-highlighter": "^10.1.1", "react-tooltip": "^3.2.7", diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index a5e8df7e8..f562bcff5 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -11,9 +11,10 @@ import { addFadeInAnimation } from 'ts/@next/constants/animations'; interface Props { title: string; - description: React.Node; + description: Node; linkLabel?: string; linkUrl?: string; + children?: Node; } export const AboutPageLayout = (props: Props) => ( @@ -28,9 +29,9 @@ export const AboutPageLayout = (props: Props) => ( <Column width="70%" maxWidth="800px"> <Column width="100%" maxWidth="680px"> - <AnimatedHeading size="medium"> - {props.title} - </AnimatedHeading> + <AnimatedHeading size="medium"> + {props.title} + </AnimatedHeading> <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> {props.description} @@ -38,14 +39,14 @@ export const AboutPageLayout = (props: Props) => ( {(props.linkLabel && props.linkUrl) && <AnimatedLink - to={props.linkUrl} - isWithArrow={true} + to={props.linkUrl} + isWithArrow={true} > - {props.linkLabel} + {props.linkLabel} </AnimatedLink> } - </Column> - </Column> + </Column> + </Column> </Section> {props.children} diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 40fe13bc1..e3ab98dcf 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -43,8 +43,8 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => { <Border/> <Border isBottom={true} /> - <Column colWidth="1/2" isPadLarge={true}> - <CustomHeading isNoMargin={true}>{heading}</CustomHeading> + <Column> + <CustomHeading>{heading}</CustomHeading> {subline && <Paragraph isMuted={0.5} isNoMargin={true}> @@ -52,7 +52,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => { </Paragraph> } </Column> - <Column colWidth="1/2" isPadLarge={true}> + <Column> <ButtonWrap> {mainCta && <Button diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index bdf673495..cca4d1382 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -15,8 +15,8 @@ interface ButtonInterface { isAccentColor?: boolean; hasIcon?: boolean | string; isInline?: boolean; - type?: string; href?: string; + to?: string; onClick?: () => any; theme?: { textColor: string; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index e19f041c7..7f326bc52 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -18,7 +18,7 @@ interface Props { icon: string; iconSize?: 'medium' | 'large' | number; title: string; - description: React.Node; + description: Node; actions?: Action[]; } @@ -43,6 +43,7 @@ export const Definition = (props: Props) => ( <LinkWrap> {props.actions.map((item, index) => ( <Button + key={`dlink-${index}`} href={item.url} isWithArrow={true} isAccentColor={true} @@ -56,7 +57,7 @@ export const Definition = (props: Props) => ( </Wrap> ); -const Wrap = styled.div` +const Wrap = styled.div<Props>` max-width: ${props => props.isInline && '354px'}; & + & { @@ -81,7 +82,7 @@ const Wrap = styled.div` } `; -const TextWrap = styled.div` +const TextWrap = styled.div<Props>` width: 100%; max-width: 560px; diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 11d18c7f7..897bd1d51 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -1,10 +1,11 @@ import * as _ from 'lodash'; import * as React from 'react'; +import MediaQuery from 'react-responsive'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; import { Logo } from 'ts/@next/components/logo'; -import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; +import { Column, ColumnProps, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; import { NewsletterForm } from 'ts/@next/components/newsletter_form'; interface LinkInterface { @@ -15,6 +16,7 @@ interface LinkInterface { interface LinkRows { heading: string; + isOnMobile?: boolean; links: LinkInterface[]; } @@ -65,25 +67,22 @@ export const Footer: React.StatelessComponent = () => ( <FooterWrap> <FlexWrap> <FooterColumn width="35%"> - <Logo isLight={true} /> + <Logo /> <NewsletterForm /> </FooterColumn> <FooterColumn width="55%"> <WrapGrid isCentered={false} isWrapped={true}> - {_.map(linkRows, (row, index) => ( - <FooterSectionWrap - key={`fc-${index}`} - colWidth="1/4" - isNoPadding={true} - isMobileHidden={!row.isOnMobile} - > - <RowHeading> - {row.heading} - </RowHeading> - - <LinkList links={row.links} /> - </FooterSectionWrap> + {_.map(linkRows, (row: LinkRows, index) => ( + <MediaQuery minWidth={row.isOnMobile ? 0 : 768}> + <FooterSectionWrap key={`fc-${index}`}> + <RowHeading> + {row.heading} + </RowHeading> + + <LinkList links={row.links} /> + </FooterSectionWrap> + </MediaQuery> ))} </WrapGrid> </FooterColumn> @@ -124,7 +123,6 @@ const FooterColumn = styled(Column)` } @media (max-width: 768px) { - display: ${props => props.isMobileHidden && 'none'}; text-align: left; } `; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c5c67ac80..c16e2f7b4 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,5 +1,6 @@ import _ from 'lodash'; import * as React from 'react'; +import MediaQuery from 'react-responsive'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; @@ -10,11 +11,15 @@ import { Hamburger } from 'ts/@next/components/hamburger'; import { Logo } from 'ts/@next/components/logo'; import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; +import { ThemeInteface } from 'ts/@next/components/siteWrap'; import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { - isOpen: boolean; + isOpen?: boolean; location?: Location; + isNavToggled?: boolean; + toggleMobileNav: () => void; + theme: ThemeInterface; } interface HeaderState { @@ -89,7 +94,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { <StyledHeader isOpen={isOpen}> <HeaderWrap> <ReactRouterLink to="/next"> - <Logo/> + <Logo /> </ReactRouterLink> <NavLinks> @@ -102,13 +107,15 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { ))} </NavLinks> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="https://0xproject.com/portal" - > - Trade on 0x - </TradeButton> + <MediaQuery minWidth={990}> + <TradeButton + bgColor={theme.headerButtonBg} + color="#ffffff" + href="https://0xproject.com/portal" + > + Trade on 0x + </TradeButton> + </MediaQuery> <Hamburger onClick={toggleMobileNav}/> <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} /> @@ -120,12 +127,12 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { export const Header = withTheme(HeaderBase); -const NavItem = (props): React.ReactNode => { - const { link, index } = props; +const NavItem = (props: NavItem): React.ReactNode => { + const { link } = props; const Subnav = link.dropdownComponent; return ( - <LinkWrap key={`nav-${index}`}> + <LinkWrap> <StyledNavLink to={link.url} isTransparent={true} @@ -253,8 +260,4 @@ const DropdownWrap = styled.div<DropdownWrapInterface>` const TradeButton = styled(Button)` padding: 14px 22px !important; - - @media (max-width: 990px) { - display: none !important; - } `; diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index 3126db7ee..fe0a290c5 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -interface WrapProps { +export interface WrapProps { + bgColor?: string; offsetTop?: string; maxWidth?: string; wrapWidth?: string; @@ -11,7 +12,7 @@ interface WrapProps { isWrapped?: boolean; } -interface WrapGridProps { +export interface WrapGridProps { isWrapped?: boolean; isCentered?: boolean; } @@ -20,7 +21,7 @@ export interface WrapStickyProps { offsetTop?: string; } -interface SectionProps extends WrapProps { +export interface SectionProps extends WrapProps { isPadded?: boolean; isFullWidth?: boolean; isFlex?: boolean; @@ -28,15 +29,16 @@ interface SectionProps extends WrapProps { flexBreakpoint?: string; maxWidth?: string; bgColor?: 'dark' | 'light' | string; + children: any; } -interface FlexProps { +export interface FlexProps { padding?: string; isFlex?: boolean; flexBreakpoint?: string; } -interface ColumnProps { +export interface ColumnProps { padding?: string; width?: string; maxWidth?: string; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 92ae76235..f2851d2d2 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -71,7 +71,7 @@ const GLOBAL_THEMES: ThemeInterface = { }, }; -export class SiteWrap extends React.Component { +export class SiteWrap extends React.Component<Props> { public state = { isMobileNavOpen: false, }; diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 3608afebf..fbc56bff7 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -72,7 +72,7 @@ export const Next0xInstant = () => ( <MarqueeWrap> <div> {[...Array(12)].map((item, index) => ( - <Card index={index}> + <Card key={`card-${index}`} index={index}> <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} /> </Card> ))} @@ -83,6 +83,7 @@ export const Next0xInstant = () => ( <Section> {_.map(featuresData, (item, index) => ( <Definition + key={`definition-${index}`} icon={item.icon} title={item.title} description={item.description} diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 1c0c35984..67573971f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -28,8 +28,5 @@ ] }, - "include": ["./ts/**/*"], - "reportFiles": [ - "./ts/@next/**/*" - ], + "include": ["./ts/**/*"] } |