From b8d2cc1221f7135f55757198585d36de6a69c145 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 26 Oct 2018 13:52:29 +0200 Subject: style: remove small gap under topbar --- .../ts/components/documentation/docs_top_bar.tsx | 48 +++++++++++----------- .../ts/pages/documentation/developers_page.tsx | 1 + 2 files changed, 26 insertions(+), 23 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 2054d0860..cf26e8a2a 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -37,33 +37,35 @@ export class DocsTopBar extends React.Component - - - - {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} + + + + + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} + - - - - + + + + + + + - - - - + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} ); diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 361dbc86e..d6986b399 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -157,6 +157,7 @@ export class DevelopersPage extends React.Component -- cgit From 6696aa46ee675d2c0785117995a6f7780021e39c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 26 Oct 2018 14:01:00 +0200 Subject: style: make line-height of sidebar title 26px, make sure still bottom aligned with version picker --- packages/website/ts/components/documentation/sidebar_header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx index fece2704b..9ced52c74 100644 --- a/packages/website/ts/components/documentation/sidebar_header.tsx +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -29,6 +29,7 @@ export const SidebarHeader: React.StatelessComponent = ({ fontColor={colors.lightLinkBlue} fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} fontWeight="bold" + lineHeight="26px" > {title} @@ -36,7 +37,7 @@ export const SidebarHeader: React.StatelessComponent = ({ {!_.isUndefined(docsVersion) && !_.isUndefined(availableDocVersions) && !_.isUndefined(onVersionSelected) && ( -
+
Date: Fri, 26 Oct 2018 14:01:15 +0200 Subject: style: reduce border size on version dropdown --- packages/website/ts/components/documentation/version_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx index a1c8b0547..5e77530fd 100644 --- a/packages/website/ts/components/documentation/version_drop_down.tsx +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -27,7 +27,7 @@ const PlainActiveNode: React.StatelessComponent = ({ className, const ActiveNode = styled(PlainActiveNode)` cursor: pointer; - border: 2px solid ${colors.beigeWhite}; + border: 1px solid ${colors.beigeWhite}; border-radius: 4px; padding: 4px 6px 4px 8px; `; -- cgit From 81fb8d614f1ea4ad4ae01cf7426e8653d18efccc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 26 Oct 2018 17:19:53 +0200 Subject: chore: Make `External exports` clickable on sidebar --- packages/react-docs/src/docs_info.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 54b59ef1f..76f7784ba 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -10,6 +10,7 @@ import { SectionsMap, SupportedDocJson, } from './types'; +import { constants } from './utils/constants'; export class DocsInfo { public id: string; @@ -64,7 +65,7 @@ export class DocsInfo { const docSections = _.keys(this.sections); _.each(docSections, sectionName => { const docSection = docAgnosticFormat[sectionName]; - if (_.isUndefined(docSection)) { + if (_.isUndefined(docSection) || sectionName === constants.EXTERNAL_EXPORTS_SECTION_NAME) { return; // no-op } -- cgit From 7626d1d6fe5f1b5a505db4482e0b7337747ca4d2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sun, 11 Nov 2018 14:54:07 +0100 Subject: Rename tutorial to match verb structure --- packages/website/translations/chinese.json | 2 +- packages/website/translations/english.json | 2 +- packages/website/translations/korean.json | 2 +- packages/website/translations/russian.json | 2 +- packages/website/translations/spanish.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 95b9bda62..e3798a072 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -83,7 +83,7 @@ "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", - "ORDER_BASICS": "0x order basics", + "ORDER_BASICS": "Make & take orders", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 465bd49b4..f91633492 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -87,7 +87,7 @@ "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", - "ORDER_BASICS": "0x order basics", + "ORDER_BASICS": "Make & take orders", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 5485e5583..ca8cbe3d0 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -83,7 +83,7 @@ "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", - "ORDER_BASICS": "0x order basics", + "ORDER_BASICS": "Make & take orders", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index a2e2a8cef..a43d1e7b7 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -83,7 +83,7 @@ "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", - "ORDER_BASICS": "0x order basics", + "ORDER_BASICS": "Make & take orders", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index acbc59c3d..4d404ac6b 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -84,7 +84,7 @@ "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", - "ORDER_BASICS": "0x order basics", + "ORDER_BASICS": "Make & take orders", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", -- cgit From 753b33aec5a12a30f08701aa04b6ec67e7f590de Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sun, 11 Nov 2018 15:31:52 +0100 Subject: Remove "Home" menu item, instead make different parts of logo link to different sections of the website --- .../website/public/images/developers/logo/0x.svg | 1 + .../website/public/images/developers/logo/docs.svg | 6 +++ packages/website/public/images/docs_logo.svg | 24 ----------- .../ts/components/documentation/docs_logo.tsx | 25 +++++++++-- .../ts/components/documentation/docs_top_bar.tsx | 48 +++++++++++----------- .../website/ts/components/nested_sidebar_menu.tsx | 2 +- .../ts/pages/documentation/developers_page.tsx | 2 +- packages/website/ts/utils/constants.ts | 4 -- 8 files changed, 53 insertions(+), 59 deletions(-) create mode 100644 packages/website/public/images/developers/logo/0x.svg create mode 100644 packages/website/public/images/developers/logo/docs.svg delete mode 100644 packages/website/public/images/docs_logo.svg (limited to 'packages') diff --git a/packages/website/public/images/developers/logo/0x.svg b/packages/website/public/images/developers/logo/0x.svg new file mode 100644 index 000000000..a584bbc62 --- /dev/null +++ b/packages/website/public/images/developers/logo/0x.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/packages/website/public/images/developers/logo/docs.svg b/packages/website/public/images/developers/logo/docs.svg new file mode 100644 index 000000000..d3d14f66e --- /dev/null +++ b/packages/website/public/images/developers/logo/docs.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/public/images/docs_logo.svg b/packages/website/public/images/docs_logo.svg deleted file mode 100644 index e3c4b628b..000000000 --- a/packages/website/public/images/docs_logo.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 2840d5960..54ea9e2b4 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,17 +1,34 @@ import { Link } from '@0x/react-shared'; import * as React from 'react'; +import { styled } from 'ts/style/theme'; import { WebsitePaths } from 'ts/types'; +import { Container } from '../ui/container'; + export interface DocsLogoProps { - height: number; containerStyle?: React.CSSProperties; } +const Image = styled.img` + &:hover { + opacity: 0.7; + } +`; + export const DocsLogo: React.StatelessComponent = props => { return ( - - - + + + + + + + + + + + + ); }; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index cf26e8a2a..c4291b78f 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -37,35 +37,33 @@ export class DocsTopBar extends React.Component - - - - - {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} - - - - - - + + + + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} - - + + + + + + + - + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} ); diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index db7d55261..552839fb7 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -70,7 +70,7 @@ export class MenuItem extends React.Component { borderRadius="4px" padding="0.4em 0.375em" width="100%" - backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100} + backgroundColor={isActive ? colors.lightLinkBlue : 'transparent'} fontSize="14px" textAlign="left" > diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index d6986b399..bda04f51e 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -160,7 +160,7 @@ export class DevelopersPage extends React.Component - + diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 0a8a86c50..379f28022 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -103,10 +103,6 @@ export const constants = { URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', DEVELOPER_TOPBAR_LINKS: [ - { - title: Key.Home, - to: WebsitePaths.Home, - }, { title: Key.Wiki, to: WebsitePaths.Wiki, -- cgit From 1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sun, 11 Nov 2018 16:48:31 +0100 Subject: Fix menuItem background colors depending on the context --- packages/website/ts/components/nested_sidebar_menu.tsx | 13 +++++++++++-- packages/website/ts/pages/documentation/doc_page.tsx | 6 +++++- packages/website/ts/pages/documentation/docs_home.tsx | 1 + packages/website/ts/pages/wiki/wiki.tsx | 1 + 4 files changed, 18 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 552839fb7..4d4bc4617 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -4,11 +4,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Button } from 'ts/components/ui/button'; import { Text } from 'ts/components/ui/text'; +import { ScreenWidths } from 'ts/types'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldReformatMenuItemNames?: boolean; + screenWidth: ScreenWidths; } export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { @@ -22,7 +24,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { ...link, title: menuItemTitle, }; - return ; + return ; }); // tslint:disable-next-line:no-unused-variable return ( @@ -44,6 +46,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { export interface MenuItemProps { link: ALink; + screenWidth: ScreenWidths; } export interface MenuItemState { @@ -70,7 +73,13 @@ export class MenuItem extends React.Component { borderRadius="4px" padding="0.4em 0.375em" width="100%" - backgroundColor={isActive ? colors.lightLinkBlue : 'transparent'} + backgroundColor={ + isActive + ? colors.lightLinkBlue + : this.props.screenWidth === ScreenWidths.Sm + ? 'white' + : colors.grey100 + } fontSize="14px" textAlign="left" > diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 28bf2dba1..80bde130c 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -94,7 +94,11 @@ export class DocPage extends React.Component { const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? (
) : ( - + ); return ( { sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} + screenWidth={this.props.screenWidth} /> ); return ( diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index c1802b1f8..c3c1600a5 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -76,6 +76,7 @@ export class Wiki extends React.Component { ); return ( -- cgit From 2d43f312c8c3505bfd650be2a0975e39303d9d24 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sun, 11 Nov 2018 16:50:08 +0100 Subject: Adjust paddin --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 6e85c1499..b8a35fab0 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -89,7 +89,7 @@ export class DevelopersDropDown extends React.Component -- cgit From 0d201173ef8908de43bdb83acb7aa8ed4ce1e09a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sun, 11 Nov 2018 17:51:00 +0100 Subject: Replace remaining scroll-links with Link component --- packages/react-docs/src/components/type.tsx | 11 ++--------- packages/react-shared/src/components/anchor_title.tsx | 18 +++--------------- 2 files changed, 5 insertions(+), 24 deletions(-) (limited to 'packages') diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 412b99b9d..0adfedc5a 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -3,7 +3,6 @@ import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0x/types'; import { errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; import * as ReactTooltip from 'react-tooltip'; import { DocsInfo } from '../docs_info'; @@ -224,13 +223,7 @@ export const Type: React.SFC = (props: TypeProps): any => { {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( {typeName} ) : ( - + = (props: TypeProps): any => { /> - + )} ); diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index bd99edcab..a9105e132 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -1,15 +1,9 @@ import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; import styled from 'styled-components'; +import { Link } from '../components/link'; import { HeaderSizes, Styles } from '../types'; import { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; - -const headerSizeToScrollOffset: { [headerSize: string]: number } = { - h2: -20, - h3: 0, -}; export interface AnchorTitleProps { title: string | React.ReactNode; @@ -73,15 +67,9 @@ export class AnchorTitle extends React.Component {!this.props.isDisabled && ( - + - + )}
); -- cgit From 399a7d5fec9af4f3491a77f0c2d46738f3d8ffa7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sun, 11 Nov 2018 22:07:58 +0100 Subject: Increase logo size --- packages/website/ts/components/documentation/docs_logo.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 54ea9e2b4..ac331db79 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -20,12 +20,12 @@ export const DocsLogo: React.StatelessComponent = props => { - + - + - + -- cgit From 0d565fe32fda046d544ff22ab03d5f8842b1a115 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 12 Nov 2018 13:27:14 +0100 Subject: Improve logo spacing --- .../website/public/images/developers/logo/0x.svg | 25 +++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/public/images/developers/logo/0x.svg b/packages/website/public/images/developers/logo/0x.svg index a584bbc62..f02903925 100644 --- a/packages/website/public/images/developers/logo/0x.svg +++ b/packages/website/public/images/developers/logo/0x.svg @@ -1 +1,24 @@ -Asset 1 \ No newline at end of file + + + +Asset 1 + + + + + + + + + + + -- cgit From a4a46dc076f4e491b30671bd9006a586ab9754bc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 12 Nov 2018 13:50:23 +0100 Subject: chore: fix linter error --- packages/react-docs/src/components/type.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 0adfedc5a..fa3b658b4 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants, Link, utils as sharedUtils } from '@0x/react-shared'; +import { colors, Link, utils as sharedUtils } from '@0x/react-shared'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0x/types'; import { errorUtils } from '@0x/utils'; import * as _ from 'lodash'; -- cgit