github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-04 00:03:37 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Use flexbox for sideNav. fixes #1408

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
framework/core/js/src/forum/components/IndexPage.js
View File

@ -71,15 +71,17 @@ export default class IndexPage extends Page {
<div className="IndexPage">
{this.hero()}
<div className="container">
<nav className="IndexPage-nav sideNav">
<ul>{listItems(this.sidebarItems().toArray())}</ul>
</nav>
<div className="IndexPage-results sideNavOffset">
<div className="IndexPage-toolbar">
<ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
<ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
<div className="sideNavContainer">
<nav className="IndexPage-nav sideNav">
<ul>{listItems(this.sidebarItems().toArray())}</ul>
</nav>
<div className="IndexPage-results sideNavOffset">
<div className="IndexPage-toolbar">
<ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
<ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
</div>
{app.cache.discussionList.render()}
</div>
{app.cache.discussionList.render()}
</div>
</div>
</div>

12
framework/core/js/src/forum/components/UserPage.js
View File

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

8
framework/core/less/common/sideNav.less
View File

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

2
framework/core/less/forum/ActivityPage.less
View File

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