Use flexbox for sideNav. fixes #1408

This commit is contained in:
Toby Zerner 2018-07-20 12:34:43 +09:30
parent fbfe0c1e6f
commit 72778ddb8c
4 changed files with 24 additions and 16 deletions

View File

@ -71,6 +71,7 @@ export default class IndexPage extends Page {
<div className="IndexPage"> <div className="IndexPage">
{this.hero()} {this.hero()}
<div className="container"> <div className="container">
<div className="sideNavContainer">
<nav className="IndexPage-nav sideNav"> <nav className="IndexPage-nav sideNav">
<ul>{listItems(this.sidebarItems().toArray())}</ul> <ul>{listItems(this.sidebarItems().toArray())}</ul>
</nav> </nav>
@ -83,6 +84,7 @@ export default class IndexPage extends Page {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

View File

@ -40,6 +40,7 @@ export default class UserPage extends Page {
controlsButtonClassName: 'Button' controlsButtonClassName: 'Button'
}), }),
<div className="container"> <div className="container">
<div className="sideNavContainer">
<nav className="sideNav UserPage-nav" config={affixSidebar}> <nav className="sideNav UserPage-nav" config={affixSidebar}>
<ul>{listItems(this.sidebarItems().toArray())}</ul> <ul>{listItems(this.sidebarItems().toArray())}</ul>
</nav> </nav>
@ -47,6 +48,7 @@ export default class UserPage extends Page {
{this.content()} {this.content()}
</div> </div>
</div> </div>
</div>
] : [ ] : [
LoadingIndicator.component({className: 'LoadingIndicator--block'}) LoadingIndicator.component({className: 'LoadingIndicator--block'})
]} ]}

View File

@ -54,8 +54,12 @@
} }
@media @desktop-up { @media @desktop-up {
.sideNavContainer {
display: flex;
}
.sideNav { .sideNav {
float: left; flex-shrink: 0;
margin-right: 50px;
&, > ul { &, > ul {
width: 190px; width: 190px;
@ -119,6 +123,6 @@
@media @desktop-up { @media @desktop-up {
.sideNavOffset { .sideNavOffset {
margin-top: 30px; margin-top: 30px;
margin-left: 240px; flex: 1;
} }
} }

View File

@ -12,6 +12,7 @@
> li { > li {
border-bottom: 1px solid @control-bg; border-bottom: 1px solid @control-bg;
margin-bottom: 15px;
} }
.Post { .Post {
@ -20,7 +21,6 @@
} }
.PostsUserPage-discussion { .PostsUserPage-discussion {
font-weight: bold; font-weight: bold;
margin-top: 15px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
z-index: 1; z-index: 1;