aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/sidebar_header.tsx35
-rw-r--r--packages/website/ts/containers/wiki.ts3
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx176
3 files changed, 65 insertions, 149 deletions
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
deleted file mode 100644
index 56657ab72..000000000
--- a/packages/website/ts/components/sidebar_header.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import * as React from 'react';
-
-interface SidebarHeaderProps {
- title: string;
- iconUrl: string;
-}
-
-interface SidebarHeaderState {}
-
-export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
- public render(): React.ReactNode {
- return (
- <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 }}>
- docs
- </div>
- </div>
- <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
- |
- </div>
- <div className="flex">
- <div>
- <img src={this.props.iconUrl} width="22" />
- </div>
- <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
- {this.props.title}
- </div>
- </div>
- </div>
- );
- }
-}
diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts
index 357f8bbf4..069b0ae54 100644
--- a/packages/website/ts/containers/wiki.ts
+++ b/packages/website/ts/containers/wiki.ts
@@ -4,10 +4,12 @@ import { Dispatch } from 'redux';
import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki';
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
interface ConnectedState {
translate: Translate;
+ screenWidth: ScreenWidths;
}
interface ConnectedDispatch {
@@ -16,6 +18,7 @@ interface ConnectedDispatch {
const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({
translate: state.translate,
+ screenWidth: state.screenWidth,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 70f54aceb..01cbc4e4d 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -5,25 +5,22 @@ import {
HeaderSizes,
MarkdownSection,
NestedSidebarMenu,
- Styles,
utils as sharedUtils,
} from '@0xproject/react-shared';
import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
-import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import DocumentTitle = require('react-document-title');
-import { SidebarHeader } from 'ts/components/sidebar_header';
-import { TopBar } from 'ts/components/top_bar/top_bar';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { DevelopersPage } from 'ts/pages/documentation/developers_page';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Article, ArticlesBySection } from 'ts/types';
+import { Article, ArticlesBySection, ScreenWidths } from 'ts/types';
import { backendClient } from 'ts/utils/backend_client';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
-const TOP_BAR_HEIGHT = 60;
const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
export interface WikiProps {
@@ -31,6 +28,7 @@ export interface WikiProps {
location: Location;
dispatcher: Dispatcher;
translate: Translate;
+ screenWidth: ScreenWidths;
}
interface WikiState {
@@ -38,24 +36,6 @@ interface WikiState {
isHoveringSidebar: boolean;
}
-const styles: Styles = {
- mainContainers: {
- position: 'absolute',
- top: 1,
- left: 0,
- bottom: 0,
- right: 0,
- overflow: 'hidden',
- height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
- WebkitOverflowScrolling: 'touch',
- },
- menuContainer: {
- borderColor: colors.grey300,
- maxWidth: 330,
- backgroundColor: colors.gray40,
- },
-};
-
export class Wiki extends React.Component<WikiProps, WikiState> {
private _wikiBackoffTimeoutId: number;
private _isUnmounted: boolean;
@@ -83,84 +63,64 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
const sectionNameToLinks = _.isUndefined(this.state.articlesBySection)
? {}
: this._getSectionNameToLinks(this.state.articlesBySection);
- const mainContainersStyle: React.CSSProperties = {
- ...styles.mainContainers,
- overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
- };
- const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="/images/doc_icons/wiki.png" />;
+
+ const mainContent = _.isUndefined(this.state.articlesBySection) ? (
+ <div className="flex justify-center">{this._renderLoading()}</div>
+ ) : (
+ <div id="wiki" style={{ paddingRight: 2 }}>
+ {this._renderWikiArticles()}
+ </div>
+ );
+ const sidebar = _.isUndefined(this.state.articlesBySection) ? (
+ <div />
+ ) : (
+ <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
+ );
return (
- <div>
- <DocumentTitle title="0x Protocol Wiki" />
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- sectionNameToLinks={sectionNameToLinks}
- translate={this.props.translate}
- sidebarHeader={sidebarHeader}
- />
- {_.isUndefined(this.state.articlesBySection) ? (
- <div className="col col-12" style={mainContainersStyle}>
- <div
- className="relative sm-px2 sm-pt2 sm-m1"
- style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
- >
- <div className="center pb2">
- <CircularProgress size={40} thickness={5} />
- </div>
- <div className="center pt2" style={{ paddingBottom: 11 }}>
- Loading wiki...
- </div>
- </div>
- </div>
- ) : (
- <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
- <div
- className="mx-auto max-width-4 flex"
- style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+ <DevelopersPage
+ sidebar={sidebar}
+ mainContent={mainContent}
+ location={this.props.location}
+ screenWidth={this.props.screenWidth}
+ translate={this.props.translate}
+ dispatcher={this.props.dispatcher}
+ />
+ );
+ }
+ private _renderSidebarHeader(): React.ReactNode {
+ return (
+ <Container>
+ <Container className="flex justify-bottom">
+ <Container className="left pl1" width="150px">
+ <Text
+ fontColor={colors.lightLinkBlue}
+ fontSize={this.props.screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
+ fontWeight="bold"
>
- <div
- className="relative lg-pl0 md-pl1 sm-hide xs-hide"
- style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }}
- >
- <div
- className="absolute"
- style={{
- ...styles.menuContainer,
- ...mainContainersStyle,
- height: 'calc(100vh - 76px)',
- }}
- onMouseEnter={this._onSidebarHover.bind(this)}
- onMouseLeave={this._onSidebarHoverOff.bind(this)}
- >
- <NestedSidebarMenu
- sectionNameToLinks={sectionNameToLinks}
- sidebarHeader={sidebarHeader}
- />
- </div>
- </div>
- <div
- className="relative"
- style={{
- width: '100%',
- height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
- backgroundColor: 'white',
- }}
- >
- <div
- id={sharedConstants.SCROLL_CONTAINER_ID}
- style={{ ...mainContainersStyle, overflow: 'auto' }}
- className="absolute"
- >
- <div id={sharedConstants.SCROLL_TOP_ID} />
- <div id="wiki" style={{ paddingRight: 2 }}>
- {this._renderWikiArticles()}
- </div>
- </div>
- </div>
- </div>
- </div>
- )}
- </div>
+ Wiki
+ </Text>
+ </Container>
+ </Container>
+ <Container
+ width={'100%'}
+ height={'1px'}
+ backgroundColor={colors.grey300}
+ marginTop="20px"
+ marginBottom="27px"
+ />
+ </Container>
+ );
+ }
+ private _renderLoading(): React.ReactNode {
+ return (
+ <Container className="pt4">
+ <Container className="center pb2">
+ <CircularProgress size={40} thickness={5} />
+ </Container>
+ <Container className="center pt2" paddingBottom="11px">
+ Loading wiki...
+ </Container>
+ </Container>
);
}
private _renderWikiArticles(): React.ReactNode {
@@ -180,22 +140,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
headerSize={HeaderSizes.H2}
githubLink={githubLink}
/>
- <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}>
- <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}>
- See a way to improve this article?
- </div>
- <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2">
- <RaisedButton href={githubLink} target="_blank" label="Edit on Github" />
- </div>
- </div>
</div>
);
});
- return (
- <div key={`section-${sectionName}`} className="py2 md-px1 sm-px0">
- {renderedArticles}
- </div>
- );
+ return <div key={`section-${sectionName}`}>{renderedArticles}</div>;
}
private async _fetchArticlesBySectionAsync(): Promise<void> {
try {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-12 01:51:26 +0800