Merge pull request #3103 from kinow/responsive-issues

Hide hamburger button menu in mobile/responsive mode and fix other minor issues

share/jupyterhub/static/less/page.less

@@ -1,9 +1,31 @@
+@import "../components/bootstrap/less/variables.less";
+
 @logo-height: 28px;
 
+#jupyterhub-logo {
+  @media (max-width: @grid-float-breakpoint) {
+    // same length as the navbar-toggle element, displayed on responsive mode
+    margin-left: 15px;
+  }
   .jpy-logo {
     height: @logo-height;
     margin-top: (@navbar-height - @logo-height) / 2;
   }
+}
+
+.navbar-right {
+  li {
+    span {
+      // same as .nav > li > a from bootstrap, but applied to the span[id="login_widget"]
+      // or any other span that matches .nav > li > span, but only in responsive mode
+      @media (max-width: @grid-float-breakpoint) {
+        position: relative;
+        display: block;
+        padding: 10px 15px;
+      }
+    }
+  }
+}
 
 #header {
   border-bottom: 1px solid #e7e7e7;

share/jupyterhub/templates/page.html

@@ -106,12 +106,14 @@
             <a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub' class='jpy-logo' title='Home'/></a>
         </span>
         {% endblock %}
+        {% if user %}
         <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>
+        {% endif %}
       </div>
 
       <div class="collapse navbar-collapse" id="thenavbar">