CSS revamp - Improve typography and overall styling (#757)

* Improve CSS code

* Fix blog layout

* Fix

* Refactor onPageNav

* More fixes

* Fix docs nav

* Use alternative hack

* Tweak clearfix
This commit is contained in:
Yangshun Tay 2018-06-19 21:46:15 -07:00 committed by GitHub
parent 169a5e6ded
commit 1094dbd352
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 1474 additions and 1114 deletions

View file

@ -70,14 +70,18 @@ class SideNav extends React.Component {
</nav>
);
}
renderCategory(category) {
return (
<div className="navGroup navGroupActive" key={category.name}>
<h3>{this.getLocalizedCategoryString(category.name)}</h3>
<div className="navGroup" key={category.name}>
<h3 className="navGroupCategoryTitle">
{this.getLocalizedCategoryString(category.name)}
</h3>
<ul>{category.links.map(this.renderItemLink, this)}</ul>
</div>
);
}
// return appropriately translated category string
getLocalizedCategoryString(category) {
let categoryString = translation[this.props.language]
@ -86,6 +90,7 @@ class SideNav extends React.Component {
: category;
return categoryString;
}
// return appropriately translated label to use for doc/blog in sidebar
getLocalizedString(metadata) {
let localizedString;
@ -123,23 +128,23 @@ class SideNav extends React.Component {
}
return null;
}
renderItemLink(link) {
const itemClasses = classNames('navListItem', {
navListItemActive: link.id === this.props.current.id,
});
const linkClasses = classNames('navItem', {
navItemActive: link.id === this.props.current.id,
});
return (
<li className={itemClasses} key={link.id}>
<a className={linkClasses} href={this.getLink(link)}>
<a className="navItem" href={this.getLink(link)}>
{this.getLocalizedString(link)}
</a>
</li>
);
}
}
SideNav.defaultProps = {
contents: [],
};
module.exports = SideNav;