diff options
| author | Fabio Berger <me@fabioberger.com> | 2018-10-19 21:05:37 +0800 |
|---|---|---|
| committer | Fabio Berger <me@fabioberger.com> | 2018-10-19 21:05:37 +0800 |
| commit | 16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78 (patch) | |
| tree | cb61f6d65811bc1a798528ec5ec2f2b4b70f816b /packages | |
| parent | 7282e3ce039ca5de4b3d4d376b6719a61a746d54 (diff) | |
| download | dexon-sol-tools-16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78.tar.gz 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')
| -rw-r--r-- | packages/website/ts/components/dropdowns/developers_drop_down.tsx | 46 |
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> + ); } } |