diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 22:00:19 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 22:00:35 +0800 |
commit | 93d1f2255e1bf1e81ecd336145c8e4f24b1baff8 (patch) | |
tree | 2a713fd48270a09b6e35352ca5ea07c53e96a4e6 /packages/website/ts/@next/components/footer.tsx | |
parent | 727ced0684244342f616455bb33ea5df5c061aa2 (diff) | |
download | dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.gz dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.bz2 dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.lz dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.xz dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.zst dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.zip |
Refines footer, newsletterForm
Diffstat (limited to 'packages/website/ts/@next/components/footer.tsx')
-rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 55 |
1 files changed, 46 insertions, 9 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 13b681572..28af394b5 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { BREAKPOINTS, Column, Section, Wrap, WrapGrid } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; import { NewsletterForm } from 'ts/@next/components/newsletterForm'; @@ -30,13 +30,23 @@ interface LinkListProps { const linkRows: LinkRows[] = [ { heading: 'Products', + isOnMobile: true, links: [ { url: '/next/0x-instant', text: '0x Instant' }, { url: '#', text: '0x Launch Kit' }, ], }, { + heading: 'Developers', + links: [ + { url: '#', text: 'Documentation' }, + { url: '#', text: 'GitHub' }, + { url: '#', text: 'Whitepaper' }, + ], + }, + { heading: 'About', + isOnMobile: true, links: [ { url: '#', text: 'Mission' }, { url: '#', text: 'Team' }, @@ -46,6 +56,7 @@ const linkRows: LinkRows[] = [ }, { heading: 'Community', + isOnMobile: true, links: [ { url: '#', text: 'Twitter' }, { url: '#', text: 'Rocket Chat' }, @@ -58,24 +69,29 @@ const linkRows: LinkRows[] = [ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => ( <FooterWrap bgColor="#181818" isNoMargin={true}> <Wrap> - <Column colWidth="1/2" isNoPadding={true}> + <FooterColumn width="35%" isNoPadding={true}> <Logo isLight={true} /> <NewsletterForm /> - </Column> + </FooterColumn> - <Column colWidth="1/2" isNoPadding={true}> - <Wrap> + <FooterColumn width="55%" isNoPadding={true}> + <WrapGrid isCentered={false} isWrapped={true}> {_.map(linkRows, (row, index) => ( - <Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}> + <FooterSectionWrap + key={`fc-${index}`} + colWidth="1/4" + isNoPadding={true} + isMobileHidden={!row.isOnMobile} + > <RowHeading> {row.heading} </RowHeading> <LinkList links={row.links} /> - </Column> + </FooterSectionWrap> ))} - </Wrap> - </Column> + </WrapGrid> + </FooterColumn> </Wrap> </FooterWrap> ); @@ -95,6 +111,27 @@ const LinkList = (props: LinkListProps) => ( const FooterSection = Section.withComponent('footer'); const FooterWrap = styled(FooterSection)` color: ${colors.white}; + + @media (min-width: ${BREAKPOINTS.mobile}) { + height: 350px; + } +`; + +const FooterColumn = styled(Column)` + @media (min-width: ${BREAKPOINTS.mobile}) { + width: ${props => props.width}; + } + + @media (max-width: ${BREAKPOINTS.mobile}) { + display: ${props => props.isMobileHidden && 'none'}; + text-align: left; + } +`; + +const FooterSectionWrap = styled(FooterColumn)` + @media (max-width: ${BREAKPOINTS.mobile}) { + width: 50%; + } `; const RowHeading = styled.h3` |