put nav in the header

reduce custom css, use more bootstrap variables.

Admin link is now in the heading rather than the list of big buttons

share/jupyter/hub/static/less/page.less

@@ -1,26 +1,15 @@
+@logo-height: 28px;
+
 .jpy-logo {
-  height: 28px;
+  height: @logo-height;
-  margin-top: 6px;
+  margin-top: (@navbar-height - @logo-height) / 2;
 }
 
 #header {
   border-bottom: 1px solid #e7e7e7;
-  height: 40px;
 }
 
 .hidden {
   display: none;
 }
 
-.dropdown.navbar-btn{
-    padding:0 5px 0 0;
-}
-
-#login_widget{
-
-    & .navbar-btn.btn-sm {
-      margin-top: 5px;
-      margin-bottom: 5px;
-    }
-
-}

share/jupyter/hub/static/less/variables.less

@@ -1,7 +1,8 @@
 @border-radius-small: 2px;
 @border-radius-base: 2px;
 @border-radius-large: 3px;
-@navbar-height: 20px;
+@navbar-height: 40px;
+@grid-float-breakpoint: @screen-xs-min;
 
 @jupyter-orange: #F37524;
 @jupyter-red: #E34F21;

share/jupyter/hub/templates/home.html

@@ -20,9 +20,6 @@
       {% endif %}
         My Server
       </a>
-      {% if user.admin %}
-      <a id="admin" class="btn btn-lg btn-primary" href="{{base_url}}admin">Admin</a>
-      {% endif %}
     </div>
   </div>
 </div>

share/jupyter/hub/templates/page.html

@@ -35,6 +35,8 @@
     <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css"/>
     {% endblock %}
     <script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{static_url("components/jquery/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{static_url("components/bootstrap/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>
     <script>
       require.config({
           {% if version_hash %}
@@ -80,26 +82,52 @@
   </div>
 </noscript>
 
-<div id="header" class="navbar navbar-static-top">
+<nav class="navbar navbar-default">
-  <div class="container">
+    <div class="container-fluid">
-  <span id="jupyterhub-logo" class="pull-left"><a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub' class='jpy-logo' title='Home'/></a></span>
+      <!-- Brand and toggle get grouped for better mobile display -->
+      <div class="navbar-header">
+        <span id="jupyterhub-logo" class="pull-left"><a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub' class='jpy-logo' title='Home'/></a></span>
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#thenavbar" aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+      </div>
 
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      <div class="collapse navbar-collapse" id="thenavbar">
+        {% if user %}
+        <ul class="nav navbar-nav">
+          <li><a href="{{base_url}}home">Home</a></li>
+          <li><a href="{{base_url}}token">Token</a></li>
+          {% endif %}
+          {% if user.admin %}
+          <li><a href="{{base_url}}admin">Admin</a></li>
+        </ul>
+        {% endif %}
+        <ul class="nav navbar-nav navbar-right">
+          <li>
   {% block login_widget %}
-
+              <span id="login_widget">
-    <span id="login_widget">
+                {% if user %}
-      {% if user %}
+                  <a id="logout" class="navbar-btn btn-sm btn btn-default" href="{{logout_url}}"> <i class="fa fa-sign-out"></i> Logout</a>
-        <a id="logout" class="navbar-btn btn-sm btn btn-default pull-right" href="{{logout_url}}"> <i class="fa fa-sign-out"></i> Logout</a>
+                {% else %}
-      {% else %}
+                  <a id="login" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}">Login</a>
-        <a id="login" class="btn-sm btn navbar-btn btn-default pull-right" href="{{login_url}}">Login</a>
+                {% endif %}
-      {% endif %}
+              </span>
-    </span>
-
   {% endblock %}
+          </li>
+        </ul>
+      </div>
+    
+
+
 
   {% block header %}
   {% endblock %}
   </div>
-</div>
+</nav>
 
 {% block main %}
 {% endblock %}