aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 23:19:12 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 23:19:12 +0800
commitbdd287559cac066fe9aaa2012a9e16e63d93dbc5 (patch)
treeceea58c1f5481432c296df2363221155cff10248 /packages
parent194f78593997009649b5dd10e234b05e2d870d9c (diff)
downloaddexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.tar
dexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.tar.gz
dexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.tar.bz2
dexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.tar.lz
dexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.tar.xz
dexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.tar.zst
dexon-sol-tools-bdd287559cac066fe9aaa2012a9e16e63d93dbc5.zip
Mobile styling on why page
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/pages/why.tsx32
1 files changed, 24 insertions, 8 deletions
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 956cbbc57..028f211da 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -7,7 +7,7 @@ import { colors } from 'ts/style/colors';
import { Banner } from 'ts/@next/components/banner';
import { Icon } from 'ts/@next/components/icon';
-import { Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout';
+import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout';
import { Link } from 'ts/@next/components/link';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -63,8 +63,12 @@ const functionalityData = [
];
export class NextWhy extends React.PureComponent {
+ public benefitsRef = React.createRef();
+ public casesRef = React.createRef();
+ public functionalityRef = React.createRef();
+
public scrollToSection = (sectionName: 'benefits' | 'cases' | 'features') => {
- zenscroll.to(this[sectionName]);
+ zenscroll.to(this[`${sectionName}Ref`]);
}
public scrollToBenefits = () => {
@@ -142,7 +146,7 @@ export class NextWhy extends React.PureComponent {
</Column>
<Column colWidth="2/3">
- <SectionWrap ref={elem => this.benefits = elem}>
+ <SectionWrap ref={this.benefitsRef}>
<Heading size="medium">What 0x offers</Heading>
{_.map(offersData, (item, index) => (
@@ -156,19 +160,19 @@ export class NextWhy extends React.PureComponent {
{item.title}
</Heading>
- <Paragraph isMuted={true}>
+ <Paragraph isMuted={true} isNoMargin={true}>
{item.description}
</Paragraph>
</ChapterItemWrap>
))}
</SectionWrap>
- <SectionWrap ref={elem => this.cases = elem}>
+ <SectionWrap ref={this.casesRef}>
<Heading size="medium">Use Cases</Heading>
<Paragraph isMuted={true}>slider</Paragraph>
</SectionWrap>
- <SectionWrap ref={elem => this.functionality = elem}>
+ <SectionWrap ref={this.functionalityRef}>
<Heading size="medium">Exchange Functionality</Heading>
{_.map(functionalityData, (item, index) => (
@@ -182,7 +186,7 @@ export class NextWhy extends React.PureComponent {
{item.title}
</Heading>
- <Paragraph isMuted={true}>
+ <Paragraph isMuted={true} isNoMargin={true}>
{item.description}
</Paragraph>
</ChapterItemWrap>
@@ -208,6 +212,7 @@ const SectionWrap = styled.div`
& + & {
padding-top: 60px;
+ margin-top: 60px;
}
& + &:before {
@@ -215,10 +220,21 @@ const SectionWrap = styled.div`
position: absolute;
top: 0;
left: 0;
- width: 100vw;
height: 1px;
background-color: #3d3d3d;
}
+
+ @media (min-width: ${BREAKPOINTS.mobile}) {
+ & + &:before {
+ width: 100vw;
+ }
+ }
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ & + &:before {
+ width: 100%;
+ }
+ }
`;
const ChapterLink = styled.a`