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

Convert more divs to Containers

Browse Source
This commit is contained in:
Fabio Berger
2018-10-03 19:00:59 +01:00
parent 4184c5db85
commit d0b2b4d0aa
2 changed files with 44 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/website/ts/components/documentation/docs_top_bar.tsx
View File

@@ -65,7 +65,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
return ( return (
<Container height={80}> <Container height={80}>
<Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
<div className="col col-2 sm-hide xs-hide"> <Container className="col col-2 sm-hide xs-hide">
<Link <Link
to={WebsitePaths.Home} to={WebsitePaths.Home}
style={{ color: colors.linkSectionGrey }} style={{ color: colors.linkSectionGrey }}
@@ -78,17 +78,17 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
</Text> </Text>
</Container> </Container>
</Link> </Link>
</div> </Container>
<div className="col col-4 md-hide sm-hide xs-hide" /> <Container className="col col-4 md-hide sm-hide xs-hide" />
<div className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> <Container className="col col-6 md-pl4 md-ml4 sm-hide xs-hide">
<div className="flex items-center justify-between right" style={{ width: 300 }}> <Container className="flex items-center justify-between right" width="300px">
{this._renderMenuItems(menuItemInfos)} {this._renderMenuItems(menuItemInfos)}
</div> </Container>
</div> </Container>
<div className="lg-hide md-hide"> <Container className="lg-hide md-hide">
<DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} /> <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} />
</div> </Container>
<div className="md-hide lg-hide absolute" style={{ right: 18, top: 12 }}> <Container className="md-hide lg-hide absolute" right="18px" top="12px">
<i <i
className="zmdi zmdi-menu" className="zmdi zmdi-menu"
style={{ style={{
@@ -98,16 +98,9 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
}} }}
onClick={this._onMenuButtonClick.bind(this)} onClick={this._onMenuButtonClick.bind(this)}
/> />
</div> </Container>
</Container> </Container>
<div <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'11px'} />
style={{
width: '100%',
height: 1,
backgroundColor: colors.grey300,
marginTop: 11,
}}
/>
{this._renderDrawer()} {this._renderDrawer()}
</Container> </Container>
); );
@@ -124,12 +117,12 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
fontSize: 16, fontSize: 16,
}} }}
> >
<div className="flex"> <Container className="flex">
<img src={menuItemInfo.iconUrl} width="18" /> <img src={menuItemInfo.iconUrl} width="18" />
<div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}> <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}>
{menuItemInfo.title} {menuItemInfo.title}
</div> </div>
</div> </Container>
</a> </a>
); );
}); });
@@ -143,14 +136,14 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
openSecondary={true} openSecondary={true}
onRequestChange={this._onMenuButtonClick.bind(this)} onRequestChange={this._onMenuButtonClick.bind(this)}
> >
<div className="clearfix pl1"> <Container className="clearfix pl1">
<NestedSidebarMenu <NestedSidebarMenu
sectionNameToLinks={this.props.sectionNameToLinks} sectionNameToLinks={this.props.sectionNameToLinks}
shouldDisplaySectionHeaders={true} shouldDisplaySectionHeaders={true}
shouldReformatMenuItemNames={false} shouldReformatMenuItemNames={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)} onMenuItemClick={this._onMenuButtonClick.bind(this)}
/> />
</div> </Container>
</Drawer> </Drawer>
); );
} }

54
packages/website/ts/pages/documentation/home.tsx
View File

@@ -435,7 +435,7 @@ export class Home extends React.Component<HomeProps, HomeState> {
} 50%, ${colors.white} 100%)`} } 50%, ${colors.white} 100%)`}
> >
<DocumentTitle title="0x Docs Home" /> <DocumentTitle title="0x Docs Home" />
<div className="flex mx-auto" style={{ height: '100vh' }}> <Container className="flex mx-auto" height="100vh">
<Container <Container
className="sm-hide xs-hide relative" className="sm-hide xs-hide relative"
width={234} width={234}
@@ -496,7 +496,7 @@ export class Home extends React.Component<HomeProps, HomeState> {
onMouseOver={this._onMainContentHover.bind(this, true)} onMouseOver={this._onMainContentHover.bind(this, true)}
onMouseLeave={this._onMainContentHover.bind(this, false)} onMouseLeave={this._onMainContentHover.bind(this, false)}
> >
<div> <Container>
{this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))}
<Container paddingTop="12px"> <Container paddingTop="12px">
{this._renderSectionDescription( {this._renderSectionDescription(
@@ -533,29 +533,29 @@ export class Home extends React.Component<HomeProps, HomeState> {
</Container> </Container>
</Container> </Container>
</Container> </Container>
</div> </Container>
</div> </div>
</Container> </Container>
</div> </Container>
</Container> </Container>
); );
} }
private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode {
return ( return (
<div key={`category-${category}`}> <Container key={`category-${category}`}>
<Text fontSize="18px">{category}</Text> <Text fontSize="18px">{category}</Text>
<div>{_.map(pkgs, pkg => this._renderPackage(pkg))}</div> <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container>
</div> </Container>
); );
} }
private _renderPackage(pkg: Package): React.ReactNode { private _renderPackage(pkg: Package): React.ReactNode {
const id = sharedUtils.getIdFromName(pkg.link.title); const id = sharedUtils.getIdFromName(pkg.link.title);
return ( return (
<ScrollElement name={id} key={`package-${pkg.link.title}`}> <ScrollElement name={id} key={`package-${pkg.link.title}`}>
<div className="pb2"> <Container className="pb2">
<Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" />
<div className="clearfix mt2 pt1"> <Container className="clearfix mt2 pt1">
<div className="md-col lg-col md-col-4 lg-col-4"> <Container className="md-col lg-col md-col-4 lg-col-4">
<Link <Link
to={pkg.link.to} to={pkg.link.to}
style={{ color: colors.lightLinkBlue }} style={{ color: colors.lightLinkBlue }}
@@ -566,16 +566,18 @@ export class Home extends React.Component<HomeProps, HomeState> {
{pkg.link.title} {pkg.link.title}
</Text> </Text>
</Link> </Link>
</div> </Container>
<div className="md-col lg-col md-col-6 lg-col-6 sm-py2" style={{ color: colors.grey700 }}> <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2">
<ReactMarkdown <Text fontColor={colors.grey700}>
source={pkg.description} <ReactMarkdown
renderers={{ source={pkg.description}
link: MarkdownLinkBlock, renderers={{
}} link: MarkdownLinkBlock,
/> }}
</div> />
<div className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> </Text>
</Container>
<Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative">
<Link <Link
to={pkg.link.to} to={pkg.link.to}
className="absolute" className="absolute"
@@ -583,19 +585,19 @@ export class Home extends React.Component<HomeProps, HomeState> {
type={pkg.link.type} type={pkg.link.type}
shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
> >
<div className="flex"> <Container className="flex">
<div>{this.props.translate.get(Key.More, Deco.Cap)}</div> <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
<Container paddingTop="1px" paddingLeft="6px"> <Container paddingTop="1px" paddingLeft="6px">
<i <i
className="zmdi zmdi-chevron-right bold" className="zmdi zmdi-chevron-right bold"
style={{ fontSize: 18, color: colors.lightLinkBlue }} style={{ fontSize: 18, color: colors.lightLinkBlue }}
/> />
</Container> </Container>
</div> </Container>
</Link> </Link>
</div> </Container>
</div> </Container>
</div> </Container>
</ScrollElement> </ScrollElement>
); );
} }