From c2b494f7026131f18c77563c4b4e044a5cf24dd0 Mon Sep 17 00:00:00 2001
From: Min RK <benjaminrk@gmail.com>
Date: Wed, 8 Feb 2017 14:19:35 +0100
Subject: [PATCH] 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      | 19 ++-----
 share/jupyter/hub/static/less/variables.less |  3 +-
 share/jupyter/hub/templates/home.html        |  3 --
 share/jupyter/hub/templates/page.html        | 54 +++++++++++++++-----
 4 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/share/jupyter/hub/static/less/page.less b/share/jupyter/hub/static/less/page.less
index e546acce..74eaf0ef 100644
--- a/share/jupyter/hub/static/less/page.less
+++ b/share/jupyter/hub/static/less/page.less
@@ -1,26 +1,15 @@
+@logo-height: 28px;
+
 .jpy-logo {
-  height: 28px;
-  margin-top: 6px;
+  height: @logo-height;
+  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;
-    }
-
-}
diff --git a/share/jupyter/hub/static/less/variables.less b/share/jupyter/hub/static/less/variables.less
index 89b45e53..d366faaf 100644
--- a/share/jupyter/hub/static/less/variables.less
+++ b/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;
diff --git a/share/jupyter/hub/templates/home.html b/share/jupyter/hub/templates/home.html
index 30bd88a3..a197e789 100644
--- a/share/jupyter/hub/templates/home.html
+++ b/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>
diff --git a/share/jupyter/hub/templates/page.html b/share/jupyter/hub/templates/page.html
index d0c1eae0..d2c29c59 100644
--- a/share/jupyter/hub/templates/page.html
+++ b/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">
-  <div class="container">
-  <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>
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+      <!-- 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">
-      {% if user %}
-        <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 %}
-        <a id="login" class="btn-sm btn navbar-btn btn-default pull-right" href="{{login_url}}">Login</a>
-      {% endif %}
-    </span>
-
+              <span id="login_widget">
+                {% 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>
+                {% else %}
+                  <a id="login" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}">Login</a>
+                {% endif %}
+              </span>
   {% endblock %}
+          </li>
+        </ul>
+      </div>
+    
+
+
 
   {% block header %}
   {% endblock %}
   </div>
-</div>
+</nav>
 
 {% block main %}
 {% endblock %}