github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-04 08:13:39 +08:00
Code Issues Actions 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"> <div className="IndexPage">
{this.hero()} {this.hero()}
<div className="container"> <div className="container">
<nav className="IndexPage-nav sideNav"> <div className="sideNavContainer">
<ul>{listItems(this.sidebarItems().toArray())}</ul> <nav className="IndexPage-nav sideNav">
</nav> <ul>{listItems(this.sidebarItems().toArray())}</ul>
<div className="IndexPage-results sideNavOffset"> </nav>
<div className="IndexPage-toolbar"> <div className="IndexPage-results sideNavOffset">
<ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul> <div className="IndexPage-toolbar">
<ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul> <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> </div>
{app.cache.discussionList.render()}
</div> </div>
</div> </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' controlsButtonClassName: 'Button'
}), }),
<div className="container"> <div className="container">
<nav className="sideNav UserPage-nav" config={affixSidebar}> <div className="sideNavContainer">
<ul>{listItems(this.sidebarItems().toArray())}</ul> <nav className="sideNav UserPage-nav" config={affixSidebar}>
</nav> <ul>{listItems(this.sidebarItems().toArray())}</ul>
<div className="sideNavOffset UserPage-content"> </nav>
{this.content()} <div className="sideNavOffset UserPage-content">
{this.content()}
</div>
</div> </div>
</div> </div>
] : [ ] : [

8
framework/core/less/common/sideNav.less
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;
} }
} }

2
framework/core/less/forum/ActivityPage.less
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;