From 8d0b6702c0bd1e6e42a847ada731d1857aedcc62 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 10 Dec 2018 17:38:23 +0100 Subject: Edits why page, removes zenscroll --- packages/website/package.json | 4 +- .../website/ts/@next/constants/globalStyle.tsx | 1 + packages/website/ts/@next/pages/about/mission.tsx | 2 +- packages/website/ts/@next/pages/why.tsx | 60 ++++++++-------------- yarn.lock | 10 ++-- 5 files changed, 29 insertions(+), 48 deletions(-) diff --git a/packages/website/package.json b/packages/website/package.json index e5e07c8ec..7bb850bb5 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -51,6 +51,7 @@ "query-string": "^6.0.0", "rc-slider": "^8.6.3", "react": "^16.4.2", + "react-anchor-link-smooth-scroll": "^1.0.11", "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.3", "react-dom": "^16.4.2", @@ -70,8 +71,7 @@ "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3-provider-engine": "14.0.6", - "xml-js": "^1.6.4", - "zenscroll": "^4.0.2" + "xml-js": "^1.6.4" }, "devDependencies": { "@types/accounting": "^0.4.1", diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 160c46ad5..c7c90c0ba 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -76,6 +76,7 @@ const GlobalStyles = withTheme(createGlobalStyle ` -webkit-font-smoothing: antialiased; color: ${props => props.theme.textColor}; font-feature-settings: "zero"; + scroll-behavior: smooth; } .visuallyHidden { diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index cbc113888..11177d462 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -78,4 +78,4 @@ export const NextAboutMission = () => ( -); \ No newline at end of file +); diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 028f211da..88c0ca69b 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; +import AnchorLink from 'react-anchor-link-smooth-scroll'; import styled from 'styled-components'; -import zenscroll from 'zenscroll'; import { colors } from 'ts/style/colors'; @@ -63,28 +63,6 @@ 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}Ref`]); - } - - public scrollToBenefits = () => { - // was going to onClick={() => this.scrollToSection('name')} but ts/linting - // doesnt like it, lets do this for now - this.scrollToSection('benefits'); - } - - public scrollToCases = () => { - this.scrollToSection('cases'); - } - - public scrollToFunctionality = () => { - this.scrollToSection('functionality'); - } - public render(): React.ReactNode { return ( @@ -138,25 +116,22 @@ export class NextWhy extends React.PureComponent {
- - Benefits - Use Cases - Features - + + Benefits + Use Cases + Features + - + What 0x offers {_.map(offersData, (item, index) => ( - + {item.title} @@ -167,22 +142,19 @@ export class NextWhy extends React.PureComponent { ))} - + Use Cases slider - + Exchange Functionality {_.map(functionalityData, (item, index) => ( - + {item.title} @@ -231,13 +203,21 @@ const SectionWrap = styled.div` } @media (max-width: ${BREAKPOINTS.mobile}) { + text-align: left; + & + &:before { width: 100%; } } `; -const ChapterLink = styled.a` +const NavStickyWrap = styled(WrapSticky)` + @media (max-width: ${BREAKPOINTS.mobile}) { + display: none; + } +`; + +const ChapterLink = styled(AnchorLink)` color: ${props => props.theme.textColor}; font-size: 22px; margin-bottom: 15px; diff --git a/yarn.lock b/yarn.lock index 4cbd1eefd..9678533aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12909,6 +12909,11 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-anchor-link-smooth-scroll@^1.0.11: + version "1.0.11" + resolved "https://registry.yarnpkg.com/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.11.tgz#e53f55b89382df0d85470ebd20e6b349d62eb19d" + integrity sha512-PaAFtqs00eXbbYPTaiG7sEL2EkVfs+PiarzMnMN66JQWamORiNOzyhumW2tImKeKFUZeFdifqz9iJy/2e4RLnw== + react-copy-to-clipboard@^5.0.0: version "5.0.1" resolved "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e" @@ -17484,11 +17489,6 @@ z-schema@^3.19.1: optionalDependencies: commander "^2.7.1" -zenscroll@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/zenscroll/-/zenscroll-4.0.2.tgz#e8d5774d1c0738a47bcfa8729f3712e2deddeb25" - integrity sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU= - zeppelin-solidity@1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/zeppelin-solidity/-/zeppelin-solidity-1.8.0.tgz#049fcde7daea9fc85210f8c6db9f8cd1ab8a853a" -- cgit v1.2.3