aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-12 21:54:44 +0800
committerFabio Berger <me@fabioberger.com>2018-10-12 21:54:44 +0800
commitde20ef1a49966153f25236ee68b186cd49f8dc20 (patch)
tree6313477ff212da20b9d4dbcb27fb39a2dd4ff0d1 /packages/website/ts/components
parentdcdc411ab73c860d58a47a9b721d8047e68ce738 (diff)
downloaddexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.tar
dexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.tar.gz
dexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.tar.bz2
dexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.tar.lz
dexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.tar.xz
dexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.tar.zst
dexon-sol-tools-de20ef1a49966153f25236ee68b186cd49f8dc20.zip
Refactor Home so that Dev section chrome is reusable across pages
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/overview_content.tsx132
-rw-r--r--packages/website/ts/components/sidebar_header.tsx2
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx3
3 files changed, 133 insertions, 4 deletions
diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx
new file mode 100644
index 000000000..aa132a80f
--- /dev/null
+++ b/packages/website/ts/components/documentation/overview_content.tsx
@@ -0,0 +1,132 @@
+import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactMarkdown from 'react-markdown';
+import { Element as ScrollElement } from 'react-scroll';
+import { TutorialButton } from 'ts/components/documentation/tutorial_button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, Package, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+export interface OverviewContentProps {
+ translate: Translate;
+ tutorials: TutorialInfo[];
+ categoryToPackages: ObjectMap<Package[]>;
+}
+
+export interface OverviewContentState {}
+
+export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> {
+ public render(): React.ReactNode {
+ return (
+ <Container>
+ {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))}
+ <Container paddingTop="12px">
+ {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))}
+ <Container marginTop="36px">
+ {_.map(this.props.tutorials, tutorialInfo => (
+ <ScrollElement
+ name={sharedUtils.getIdFromName(
+ this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap),
+ )}
+ key={`tutorial-${tutorialInfo.link.title}`}
+ >
+ <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} />
+ </ScrollElement>
+ ))}
+ </Container>
+ </Container>
+ <Container marginTop="32px" paddingBottom="100px">
+ {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))}
+ <Container paddingTop="12px">
+ {this._renderSectionDescription(
+ this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap),
+ )}
+ <Container marginTop="36px">
+ {_.map(this.props.categoryToPackages, (pkgs, category) =>
+ this._renderPackageCategory(category, pkgs),
+ )}
+ </Container>
+ </Container>
+ </Container>
+ </Container>
+ );
+ }
+ private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode {
+ return (
+ <Container key={`category-${category}`}>
+ <Text fontSize="18px">{category}</Text>
+ <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container>
+ </Container>
+ );
+ }
+ private _renderPackage(pkg: Package): React.ReactNode {
+ const id = sharedUtils.getIdFromName(pkg.link.title);
+ return (
+ <ScrollElement name={id} key={`package-${pkg.link.title}`}>
+ <Container className="pb2">
+ <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" />
+ <Container className="clearfix mt2 pt1">
+ <Container className="md-col lg-col md-col-4 lg-col-4">
+ <Link
+ to={pkg.link.to}
+ fontColor={colors.lightLinkBlue}
+ shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+ >
+ <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {pkg.link.title}
+ </Text>
+ </Link>
+ </Container>
+ <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2">
+ <Text fontColor={colors.grey700}>
+ <ReactMarkdown
+ source={pkg.description}
+ renderers={{
+ link: MarkdownLinkBlock,
+ paragraph: 'span',
+ }}
+ />
+ </Text>
+ </Container>
+ <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative">
+ <Container position="absolute" right="0px">
+ <Link
+ to={pkg.link.to}
+ fontColor={colors.lightLinkBlue}
+ shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+ >
+ <Container className="flex">
+ <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
+ <Container paddingTop="1px" paddingLeft="6px">
+ <i
+ className="zmdi zmdi-chevron-right bold"
+ style={{ fontSize: 18, color: colors.lightLinkBlue }}
+ />
+ </Container>
+ </Container>
+ </Link>
+ </Container>
+ </Container>
+ </Container>
+ </Container>
+ </ScrollElement>
+ );
+ }
+ private _renderSectionTitle(text: string): React.ReactNode {
+ return (
+ <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold">
+ {text}
+ </Text>
+ );
+ }
+ private _renderSectionDescription(text: string): React.ReactNode {
+ return (
+ <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono">
+ {text}
+ </Text>
+ );
+ }
+} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
index a14ab54f5..56657ab72 100644
--- a/packages/website/ts/components/sidebar_header.tsx
+++ b/packages/website/ts/components/sidebar_header.tsx
@@ -11,7 +11,7 @@ interface SidebarHeaderState {}
export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
public render(): React.ReactNode {
return (
- <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
+ <div style={{ color: colors.black, paddingBottom: 18 }}>
<div className="flex" style={{ fontSize: 25 }}>
<div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div>
<div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 80271fa63..fc13efec9 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -35,7 +35,6 @@ export interface TopBarProps {
docsVersion?: string;
availableDocVersions?: string[];
sectionNameToLinks?: ObjectMap<ALink[]>;
- subsectionNameToLinks?: ObjectMap<ALink[]>;
displayType?: TopBarDisplayType;
docsInfo?: DocsInfo;
style?: React.CSSProperties;
@@ -313,7 +312,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="lg-hide md-hide">
<NestedSidebarMenu
sectionNameToLinks={this.props.sectionNameToLinks}
- subsectionNameToLinks={this.props.subsectionNameToLinks}
sidebarHeader={this.props.sidebarHeader}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
@@ -333,7 +331,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="lg-hide md-hide">
<NestedSidebarMenu
sectionNameToLinks={this.props.sectionNameToLinks}
- subsectionNameToLinks={this.props.subsectionNameToLinks}
sidebarHeader={this.props.sidebarHeader}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}