topmenu revisited for bootstrap v3

diff --git a/views/static/css/topmenu.css b/views/static/css/topmenu.css
index 325b965..344acdc 100644 (file)
--- a/views/static/css/topmenu.css
+++ b/views/static/css/topmenu.css
@@ -4,9 +4,11 @@ body {
     padding-bottom: 20px;
 }
 
-div.topmenu { padding-top: 10px; }
+/* center the buttons vertically in the header */
+div.topmenu { padding-top: 7px; }
+ul.logged-in { padding-top: 10px; }
 button#logout { 
-    margin-left: 8px; 
+/*    margin-left: 8px;  */
     margin-bottom: 10px; 
 }
-span.logged-in { font-size: x-small; }
+ul.logged-in, button.logged-in { font-size: x-small; }

diff --git a/views/templates/widget-topmenu.html b/views/templates/widget-topmenu.html
index 1b14c8a..81a10c5 100644 (file)
--- a/views/templates/widget-topmenu.html
+++ b/views/templates/widget-topmenu.html
@@ -1,21 +1,29 @@
-{# <a id='menu_logo' href="/"><img class="logo" src="{{ STATIC_URL }}img/myslice-logo.png" alt="MySlice" /></a> #}
 {% insert_str prelude "js/bootstrap.js" %}
 {% insert_str prelude "css/bootstrap.css" %}
 {% insert_str prelude "css/topmenu.css" %}
 {% insert_str prelude "js/logout.js" %}
-<div class="navbar navbar-fixed-top">
-  <div class="navbar-inner">
-    <div class="container-fluid">
-      <a class="brand" href="/"><img src="{{ STATIC_URL }}img/onelab-logo.png" height="30" alt="OneLab logo" /></a>
-      <!--<a class="brand" href="/"><img src="{{ STATIC_URL }}img/myslice-logo.png" height="30" alt="MySlice logo" /></a>-->
-      <div class="nav-collapse topmenu">
-       <ul class="nav nav-pills" id='menu_ul'> {% for d in topmenu_items %} {% if d.is_active %}
+<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-myslice-collapse">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="#">
+      <img src="{{ STATIC_URL }}img/onelab-logo.png" height="30" alt="OneLab logo" />
+    </a>
+    <div class="collapse navbar-collapse navbar-myslice-collapse topmenu">
+    <ul class="nav navbar-nav">
+       {% for d in topmenu_items %} {% if d.is_active %}
          <li class='active'> <a href="{{ d.href }}"> {{ d.label }} </a> </li> {% else %}
          <li class='other'> <a href="{{ d.href }}"> {{ d.label }} </a> </li> {% endif %} {% endfor %}
-       </ul> {# logout.js will attach a click function on that button, which then retrieves the 'username' attribute #}
-       <span class="navbar-text pull-right logged-in"> {% if username %} Logged in as {{ username }}
-       <button id='logout' class='btn btn-danger' username='{{ username }}'>Logout</a> {% else %}Not logged in{% endif %}</span>
-      </div><!--nav-collapse-->
-    </div><!--container-fluid-->
-  </div><!--navbar-inner-->
-</div><!--topmenu-->
+    </ul> {# logout.js will attach a click function on that button, which then retrieves the 'username' attribute #}
+    <ul class="nav navbar-nav pull-right logged-in">
+      <li> {% if username %}
+      Logged in as {{ username }}
+      <button id='logout' class='btn btn-danger logged-in' username='{{ username }}'>Logout</button> {% else %}
+      Not logged in{% endif %}
+      </li>
+    </ul>
+    </div>
+</div>