Replace weird "loading" animation with a nice plain glyphicon.

[arvados.git] / apps / workbench / app / views / layouts / application.html.erb

diff --git a/apps/workbench/app/views/layouts/application.html.erb b/apps/workbench/app/views/layouts/application.html.erb
index 86e8f577b0e5827f26ed0264635cc3df419baa3b..24991cd5eb8f0269ab5f760d22277789393ee819 100644 (file)
--- a/apps/workbench/app/views/layouts/application.html.erb
+++ b/apps/workbench/app/views/layouts/application.html.erb
@@ -50,8 +50,17 @@
     overflow-y: auto;
     }
 
+    @media (min-width: 768px) {
+    .left-nav {
+    position: fixed;
+    }
+    }
+    @media (max-width: 767px) {
+    .breadcrumbs {
+    display: none;
+    }
+    }
     .arvados-nav-container {
-    position: fixed; 
     top: 70px; 
     height: calc(100% - 70px); 
     overflow: auto; 
@@ -69,8 +78,18 @@
 
   <div class="navbar navbar-default navbar-fixed-top">
     <div class="container-fluid">
-      <ul class="nav navbar-nav navbar-left">
-        <li><a class="navbar-brand" href="/"><%= Rails.configuration.site_name rescue Rails.application.class.parent_name %></a></li>
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#workbench-navbar.navbar-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="/"><%= Rails.configuration.site_name rescue Rails.application.class.parent_name %></a>
+      </div>
+
+      <div class="collapse navbar-collapse" id="workbench-navbar">
+      <ul class="nav navbar-nav navbar-left breadcrumbs">
         <% if current_user %>
         <% if content_for?(:breadcrumbs) %>
           <%= yield(:breadcrumbs) %>
@@ -95,13 +114,11 @@
   
       <ul class="nav navbar-nav navbar-right">
 
-        <% if current_user %>
         <li>
-          <div class="loading" style="transform: translate(-20px,20px) scale(0.1,0.1); -ms-transform: translate(-20px,20px) scale(0.1,0.1); -webkit-transform: translate(-20px,20px) scale(0.1,0.1); display: none">
-            <%= render partial: 'loading' %>
-          </div>
+          <a><i class="rotating loading glyphicon glyphicon-refresh"></i></a>
         </li>
 
+        <% if current_user %>
         <!-- XXX placeholder for this when search is implemented
         <li>
           <form class="navbar-form" role="search">
@@ -126,20 +143,20 @@
         </li>        
         -->
 
-        <li class="dropdown">
+        <li class="dropdown notification-menu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             <span class="glyphicon glyphicon-envelope"></span>
-            <span class="badge badge-alert"><%= @notification_count %></span>
+            <span class="badge badge-alert notification-count"><%= @notification_count %></span>
             <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu">
             <% if @notifications.length > 0 %>
               <% @notifications.each_with_index do |n, i| %>
                 <% if i > 0 %><li class="divider"></li><% end %>
-                <li style="padding: 10px"><%= n.call(self) %></li>
+                <li class="notification"><%= n.call(self) %></li>
               <% end %>
             <% else %>
-              <li style="padding: 10px">No notifications.</li>
+              <li class="notification empty">No notifications.</li>
             <% end %>
           </ul>
         </li>        
@@ -161,7 +178,8 @@
           <li><a href="<%= $arvados_api_client.arvados_login_url(return_to: root_url) %>">Log in</a></li>
        <% end -%>
       </ul>
-    </div>
+      </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
   </div>
 
   <div class="container-fluid">
@@ -227,5 +245,6 @@
   <%= javascript_tag do %>
   <%= yield :footer_js %>
   <% end %>
+
 </body>
 </html>