diff options
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; } `; |