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 /packages/website/ts/@next/components/footer.tsx | |
parent | 142d29ba57f55aefd5c5e5f669c388ab57152173 (diff) | |
download | dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.gz dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.bz2 dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.lz dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.xz dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.tar.zst dexon-sol-tools-f4a95c295c427c00a5cb2df83ad145886a9d1bf4.zip |
WIP Begin cleanup, adds mediaquery component
Diffstat (limited to 'packages/website/ts/@next/components/footer.tsx')
-rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 30 |
1 files changed, 14 insertions, 16 deletions
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; } `; |