aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-19 21:05:37 +0800
committerFabio Berger <me@fabioberger.com>2018-10-19 21:05:37 +0800
commit16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78 (patch)
treecb61f6d65811bc1a798528ec5ec2f2b4b70f816b /packages/website/ts/components
parent7282e3ce039ca5de4b3d4d376b6719a61a746d54 (diff)
downloaddexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar
dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar.gz
dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar.bz2
dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar.lz
dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar.xz
dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar.zst
dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.zip
chore: fix dropdown bug on Firefox and reduced duplicate code
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx46
1 files changed, 22 insertions, 24 deletions
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index b279566e0..6e85c1499 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -89,26 +89,22 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
);
}
private _renderDropdownMenu(): React.ReactNode {
+ const sectionPadding = '28px';
const dropdownMenu = (
<Container>
- <Container padding="1.75rem">
- {this._renderTitle('Getting started')}
- <Container className="flex">
- <Container className="pr4 mr2">
- {this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
- </Container>
- <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
+ <Container className="flex" padding={sectionPadding}>
+ <Container paddingRight="45px">
+ {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')}
</Container>
+ <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
</Container>
<Container width="100%" height="1px" backgroundColor={colors.grey300} />
- <Container className="flex" padding="1.75rem">
- <Container className="pr4 mr2">
- <Container>{this._renderTitle('Popular docs')}</Container>
- <Container>{this._renderLinkSection(popularDocsToLinkInfos)}</Container>
+ <Container className="flex" padding={sectionPadding}>
+ <Container paddingRight="62px">
+ <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container>
</Container>
<Container>
- <Container>{this._renderTitle('Useful links')}</Container>
- <Container>{this._renderLinkSection(usefulLinksToLinkInfo)}</Container>
+ <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container>
</Container>
</Container>
<Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}>
@@ -127,16 +123,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
);
return dropdownMenu;
}
- private _renderTitle(title: string): React.ReactNode {
- return (
- <Container paddingBottom="12px">
- <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
- {title.toUpperCase()}
- </Text>
- </Container>
- );
- }
- private _renderLinkSection(links: ALink[]): React.ReactNode {
+ private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode {
const numLinks = links.length;
let i = 0;
const renderLinks = _.map(links, (link: ALink) => {
@@ -159,6 +146,17 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
</Container>
);
});
- return <Container>{renderLinks}</Container>;
+ return (
+ <Container>
+ <Container height="33px">
+ {!_.isEmpty(title) && (
+ <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
+ {title.toUpperCase()}
+ </Text>
+ )}
+ </Container>
+ {renderLinks}
+ </Container>
+ );
}
}