Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

sidebar menu items no wrap and grow

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-05-03 15:58:58 +02:00
parent d218c1854d
commit 39c8a2518a
3 changed files with 48 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/menu-sidebar.js
View file

@ -29,14 +29,14 @@ class SidebarMenu extends Component {
<h2>Menu</h2>
<ul>
<li><Link to="/home" activeClassName="active">Home</Link></li>
<li><Link to="/projects" activeClassName="active">Projects</Link></li>
<li><Link to="/simulations" activeClassName="active">Simulations</Link></li>
<li><Link to="/simulators" activeClassName="active">Simulators</Link></li>
<li><Link to="/home" activeClassName="active" title="Home">Home</Link></li>
<li><Link to="/projects" activeClassName="active" title="Projects">Projects</Link></li>
<li><Link to="/simulations" activeClassName="active" title="Simulations">Simulations</Link></li>
<li><Link to="/simulators" activeClassName="active" title="Simulators">Simulators</Link></li>
{ this.props.currentRole === 'admin' ?
<li><Link to="/users" activeClassName="active">User Management</Link></li> : ''
<li><Link to="/users" activeClassName="active" title="User Management">User Management</Link></li> : ''
}
<li><Link to="/logout">Logout</Link></li>
<li><Link to="/logout" title="Logout">Logout</Link></li>
</ul>
</div>
);

10
src/containers/app.js
View file

@ -77,7 +77,7 @@ class App extends Component {
}
let currentUser = UserStore.getState().currentUser;
return {
simulations: SimulationStore.getState(),
currentRole: currentUser? currentUser.role : '',
@ -185,10 +185,12 @@ class App extends Component {
<NotificationSystem ref="notificationSystem" />
<Header />
<SidebarMenu currentRole={ this.state.currentRole }/>
<div className="app-content">
{children}
<div className="app-body">
<SidebarMenu currentRole={ this.state.currentRole }/>
<div className="app-content">
{children}
</div>
</div>
<Footer />

49
src/styles/app.css
View file

@ -41,7 +41,6 @@ body {
.app-header {
width: 100%;
height: 60px;
padding: 10px 0 0 0;
color: #527984;
@ -50,7 +49,6 @@ body {
.app-header h1 {
width: 100%;
margin: 0;
text-align: center;
@ -68,15 +66,27 @@ body {
clear: both;
}
.app-content {
.app-body {
/* Let sidebar grow and content occupy rest of the space */
display: flex;
position: absolute;
bottom: 0px;
top: 60px;
bottom: 60px;
right: 0px;
left: 200px;
min-height: 400px;
left: 0px;
margin: 20px 20px 60px 20px;
padding: 15px 5px 0px 5px;
}
.app-body div {
margin-left: 7px;
margin-right: 7px;
}
.app-content {
flex: 1 1 auto;
min-height: 400px;
height: 100%;
padding: 15px 20px;
background-color: #fff;
@ -88,11 +98,7 @@ body {
* Menus
*/
.menu-sidebar {
float: left;
width: 160px;
margin: 20px 0 0 20px;
display: inline-table;
padding: 20px 25px 20px 25px;
background-color: #fff;
@ -102,18 +108,35 @@ body {
.menu-sidebar a {
color: #4d4d4d;
text-decoration:none;
}
.menu-sidebar a:hover, .menu-sidebar a:focus {
text-decoration:none;
}
.active {
font-weight: bold;
/*text-decoration:none;*/
}
.menu-sidebar ul {
padding-top: 10px;
list-style: none;
white-space: nowrap;
}
.menu-sidebar a::after {
/* Trick to make menu items to be as wide as in bold */
display:block;
content:attr(title);
font-weight:bold;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
/**
* Login form
*/