tweak collapsed navbar style

- notification and indicators appear above menu on small screen
- collapsed menu button floats left
This commit is contained in:
MinRK 2014-10-14 11:00:53 -07:00
parent 5ccbd18e5d
commit e36df49c5f
3 changed files with 30 additions and 16 deletions

View File

@ -8,8 +8,14 @@
border-top: 1px;
border-radius: 0px 0px @border-radius-base @border-radius-base;
}
.navbar-toggle {
float: left;
}
.navbar-collapse {
clear: left;
}
li.dropdown {
line-height: 12px;
@ -21,6 +27,7 @@
ul.navbar-right {
padding-top: 2px;
margin-bottom: 0px;
}
}

View File

@ -9737,6 +9737,12 @@ fieldset[disabled] #kernel_selector_widget > button.active {
border-top: 1px;
border-radius: 0px 0px 4px 4px;
}
#menubar .navbar-toggle {
float: left;
}
#menubar .navbar-collapse {
clear: left;
}
#menubar li.dropdown {
line-height: 12px;
}
@ -9746,6 +9752,7 @@ fieldset[disabled] #kernel_selector_widget > button.active {
}
#menubar ul.navbar-right {
padding-top: 2px;
margin-bottom: 0px;
}
.nav-wrapper {
border-bottom: 1px solid #e7e7e7;

View File

@ -59,11 +59,20 @@ class="notebook_app"
<div id="menubar">
<div id="menus" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
<span class="navbar-text">Menu</span>
</button>
<div class="navbar-collapse collapse">
<button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
<span class="navbar-text">Menu</span>
</button>
<ul class="nav navbar-nav navbar-right">
<li id="kernel_indicator">
<i id="kernel_indicator_icon"></i>
</li>
<li id="modal_indicator">
<i id="modal_indicator_icon"></i>
</li>
<li id="notification_area"></li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul id="file_menu" class="dropdown-menu">
@ -276,15 +285,6 @@ class="notebook_app"
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li id="kernel_indicator">
<i id="kernel_indicator_icon"></i>
</li>
<li id="modal_indicator">
<i id="modal_indicator_icon"></i>
</li>
<li id="notification_area"></li>
</ul>
</div>
</div>
</div>