crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edits why page, removes zenscroll

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-10 17:38:23 +01:00
parent 9abd1b79e1
commit 8d0b6702c0
5 changed files with 29 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/package.json
View File

@@ -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",

1
packages/website/ts/@next/constants/globalStyle.tsx
View File

@@ -76,6 +76,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
-webkit-font-smoothing: antialiased;
color: ${props => props.theme.textColor};
font-feature-settings: "zero";
scroll-behavior: smooth;
}
.visuallyHidden {

2
packages/website/ts/@next/pages/about/mission.tsx
View File

@@ -78,4 +78,4 @@ export const NextAboutMission = () => (
</Wrap>
</Section>
</SiteWrap>
);
);

60
packages/website/ts/@next/pages/why.tsx
View File

@@ -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 (
<SiteWrap theme="dark">
@@ -138,25 +116,22 @@ export class NextWhy extends React.PureComponent {
<Section>
<Wrap>
<Column colWidth="1/3">
<WrapSticky>
<ChapterLink href="#" onClick={this.scrollToBenefits}>Benefits</ChapterLink>
<ChapterLink href="#" onClick={this.scrollToBenefits}>Use Cases</ChapterLink>
<ChapterLink href="#" onClick={this.scrollToBenefits}>Features</ChapterLink>
</WrapSticky>
<NavStickyWrap>
<ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
<ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
<ChapterLink offset="60" href="#functionality">Features</ChapterLink>
</NavStickyWrap>
</Column>
<Column colWidth="2/3">
<SectionWrap ref={this.benefitsRef}>
<SectionWrap id="benefits">
<Heading size="medium">What 0x offers</Heading>
{_.map(offersData, (item, index) => (
<ChapterItemWrap>
<Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
<Heading
marginBottom="15px"
isNoPadding={true}
>
<Heading marginBottom="15px">
{item.title}
</Heading>
@@ -167,22 +142,19 @@ export class NextWhy extends React.PureComponent {
))}
</SectionWrap>
<SectionWrap ref={this.casesRef}>
<SectionWrap id="cases">
<Heading size="medium">Use Cases</Heading>
<Paragraph isMuted={true}>slider</Paragraph>
</SectionWrap>
<SectionWrap ref={this.functionalityRef}>
<SectionWrap id="functionality">
<Heading size="medium">Exchange Functionality</Heading>
{_.map(functionalityData, (item, index) => (
<ChapterItemWrap>
<Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
<Heading
marginBottom="15px"
isNoPadding={true}
>
<Heading marginBottom="15px">
{item.title}
</Heading>
@@ -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;

10
yarn.lock
View File

@@ -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"