Improvements and bugfixes refs #2242.
[arvados.git] / apps / workbench / app / views / layouts / application.html.erb
index 570d1d5810dcb3438b3a7596c439c7777dd8546b..68f0e109bd3a125a5087f808c93e701812785464 100644 (file)
@@ -31,7 +31,7 @@
     body > div.container-fluid {
     padding-top: 70px; /* 70px to make the container go all the way to the bottom of the navbar */
     }
-    
+
     body > div.container-fluid > div.col-sm-9.col-sm-offset-3 {
     overflow: auto;
     }
     padding-top: 1.25em;
     }
 
-    /* Setting the height needs to be fixed with javascript. */
-    .dropdown-menu {
-    padding-right: 20px;
-    max-height: 440px;
-    width: 400px;
-    overflow-y: auto;
+    @media (min-width: 768px) {
+    .left-nav {
+    position: fixed;
     }
-
-    .arvados-nav-container {
-    position: fixed; 
-    top: 70px; 
-    height: calc(100% - 70px); 
-    overflow: auto; 
-    z-index: 2;
     }
-    .arvados-nav-active {
-    background: rgb(66, 139, 202);
+    @media (max-width: 767px) {
+    .breadcrumbs {
+    display: none;
     }
-    .arvados-nav-active a {
-    color: white;
     }
   </style>
 </head>
 
   <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) %>
               <span class="glyphicon glyphicon-arrow-right"></span>
             </li>
             <li>
-<%= link_to controller.breadcrumb_page_name, request.fullpath %>
+              <%= link_to controller.breadcrumb_page_name, request.fullpath %>
+            </li>
+            <li style="padding: 14px 0 14px">
+              <%= form_tag do |f| %>
+                <%= render :partial => "selection_checkbox", :locals => {:object => @object} %>
+              <% end %>
             </li>
           <% end %>
         <% end %>
         <% end %>
       </ul>
-  
+
       <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">
         </li>
         -->
 
-        <!-- XXX placeholder for this when persistent selection is implemented
-        <li class="dropdown">
+        <li class="dropdown notification-menu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             <span class="glyphicon glyphicon-paperclip"></span>
-            <span class="badge"><%= @selection_count %></span>
+            <span class="badge" id="persistent-selection-count"></span>
             <span class="caret"></span>
           </a>
-          <ul class="dropdown-menu" role="menu">
-              <li style="padding: 10px">No selections.</li>
+          <ul class="dropdown-menu" role="menu" id="persistent-selection-list">
           </ul>
-        </li>        
-        -->
+        </li>
 
-        <li class="dropdown">
+        <% if current_user.is_active %>
+        <li class="dropdown notification-menu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             <span class="glyphicon glyphicon-envelope"></span>
-            <span class="badge"><%= @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 do |n| %>
-                <li style="padding: 10px"><%= n.call(self) %></li>
-                <li class="divider"></li>
+            <% if (@notifications || []).length > 0 %>
+              <% @notifications.each_with_index do |n, i| %>
+                <% if i > 0 %><li class="divider"></li><% end %>
+                <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>        
+        </li>
+        <% end %>
 
         <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
           </a>
           <ul class="dropdown-menu" role="menu">
             <li role="presentation" class="dropdown-header"><%= current_user.email %></li>
+            <% if current_user.is_active %>
             <li role="presentation" class="divider"></li>
             <li role="presentation"><a href="/authorized_keys" role="menuitem">Manage ssh keys</a></li>
             <li role="presentation"><a href="/api_client_authorizations" role="menuitem">Manage API tokens</a></li>
             <li role="presentation" class="divider"></li>
+            <% end %>
             <li role="presentation"><a href="<%= logout_path %>" role="menuitem">Log out</a></li>
           </ul>
         </li>
           <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">
-      <div class="col-sm-3">
-        <div class="left-nav arvados-nav-container">
-        <% if current_user %>
+      <div class="col-sm-9 col-sm-offset-3">
+        <div id="content" class="body-content">
+          <%= yield %>
+        </div>
+      </div>
+      <div class="col-sm-3 left-nav">
+        <div class="arvados-nav-container">
+        <% if current_user.andand.is_active %>
         <div class="well">
         <ul class="arvados-nav">
-          <li><a href="/">Dashboard</a></li>
-          
-          <% [['Data', [['humans'],
+          <li class="<%= 'arvados-nav-active' if params[:action] == 'home' %>">
+            <a href="/">Dashboard</a>
+          </li>
+
+          <% [['Data', [['collections', 'Collections (data files)'],
+                        ['humans'],
                         ['traits'],
                         ['specimens'],
-                        ['collections', 'Files'],
-                        ['links', 'Metadata']]],
-              ['Compute', [['pipeline_templates', 'Pipelines'],
+                        ['links']]],
+              ['Activity', [['pipeline_instances', 'Recent pipeline instances'],
+                            ['jobs', 'Recent jobs']]],
+              ['Compute', [['pipeline_templates'],
                            ['repositories', 'Code repositories'],
                            ['virtual_machines']]],
-              ['Activity', [['pipeline_instances', 'Recent pipelines'],
-                            ['jobs', 'Recent jobs']]]].each do |j| %>
+              ['System', [['users'],
+                         ['groups'],
+                         ['nodes', 'Compute nodes'],
+                         ['keep_disks']]]].each do |j| %>
             <li><%= j[0] %>
               <ul>
               <% j[1].each do |k| %>
-                <li class="<%= 'arvados-nav-active' if params[:controller] == k[0] %>">
-                  <a href="/<%= k[0] %>">
-                    <%= if k[1] then k[1] else k[0].capitalize.gsub('_', ' ') end %>
-                  </a>
-                </li>
+                <% unless k[0] == 'users' and !current_user.andand.is_admin %>
+                  <li class="<%= 'arvados-nav-active' if (params[:controller] == k[0] && params[:action] != 'home') %>">
+                    <a href="/<%= k[0] %>">
+                      <%= if k[1] then k[1] else k[0].capitalize.gsub('_', ' ') end %>
+                    </a>
+                  </li>
+                <% end %>
               <% end %>
               </ul>
             </li>
               <li><%= link_to 'Admin guide', "#{Rails.configuration.arvados_docsite}/admin", target: "_blank" %></li>
             </ul>
           </li>
-          <% if current_user.andand.is_admin %>
-
-          <% [['Admin', [['users'],
-                         ['groups'],
-                         ['nodes', 'Compute nodes'],
-                         ['keep_disks']]]].each do |j| %>   
-            <li><%= j[0] %>
-              <ul>
-              <% j[1].each do |k| %>
-                <li class="<%= "arvados-nav-active" if params[:controller] == k[0] %>">
-                  <a href="/<%= k[0] %>">
-                    <%= if k[1] then k[1] else k[0].capitalize.gsub('_', ' ') end %>
-                  </a>
-                </li>
-              <% end %>
-              </ul>
-            </li>
-          <% end %>
-          <% end %>
         </ul>
         </div>
         <% end %>
       </div>
         </div>
-      <div class="col-sm-9 col-sm-offset-3">
-        <div id="content">
-          <%= yield %>
-        </div>
-      </div>
   </div>
 
   <%= piwik_tracking_tag %>
   <%= javascript_tag do %>
   <%= yield :footer_js %>
   <% end %>
+
 </body>
 </html>