From c264a4844f1d064d488fc7897655555600bb3a82 2014-10-19 01:21:07
From: MinRK <benjaminrk@gmail.com>
Date: 2014-10-19 01:21:07
Subject: [PATCH] tweak collapsed navbar style

- notification and indicators appear above menu on small screen
- collapsed menu button floats left

---

diff --git a/IPython/html/static/notebook/less/menubar.less b/IPython/html/static/notebook/less/menubar.less
index 69ea262..63e784a 100644
--- a/IPython/html/static/notebook/less/menubar.less
+++ b/IPython/html/static/notebook/less/menubar.less
@@ -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;
   }
 }
 
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 3fcbb99..f4f780c 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -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;
diff --git a/IPython/html/templates/notebook.html b/IPython/html/templates/notebook.html
index 820279d..c116506 100644
--- a/IPython/html/templates/notebook.html
+++ b/IPython/html/templates/notebook.html
@@ -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>