Merge pull request #142 from mlorb/ml_sci_415

fixes navbar size when resizing window [SCI-415]

app/assets/javascripts/sidebar.js

@@ -237,6 +237,7 @@ function resizeSidebarContents() {
   var wrapper = $("#wrapper");
   var tree = $("#sidebar-wrapper .tree");
   var toggled = sessionIsSidebarToggled();
+  var navbar = $(".navbar-secondary");
 
   if (tree.length && tree.length == 1) {
     tree.css(
@@ -248,8 +249,10 @@ function resizeSidebarContents() {
   if (toggled === null) {
     if ($(window).width() < SCREEN_SIZE_LARGE) {
       wrapper.addClass("toggled");
+      navbar.addClass("navbar-without-sidebar");
     } else {
       wrapper.removeClass("toggled");
+      navbar.removeClass("navbar-without-sidebar");
     }
   }
 }

app/assets/stylesheets/extend/bootstrap.scss

@@ -16,3 +16,10 @@
 .nav-tabs > li.active.has-error > a {
   color: $color-apple-blossom;
 }
+
+@media (max-width: 886px) {
+  // line 18, /usr/local/bundle/gems/bootstrap-sass-3.3.6/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss
+  .hidden-xs-custom {
+    display: none;
+  }
+}

app/views/experiments/canvas.html.erb

@@ -2,60 +2,64 @@
 <%= render partial: "shared/sidebar" %>
 <%= render partial: "shared/secondary_navigation" %>
 
-<div id="diagram-buttons">
-  <% if can_edit_canvas(@experiment) %>
-    <%=link_to canvas_edit_experiment_url(@experiment),
-          remote: true,
-          type: 'button',
-          id: 'edit-canvas-button',
-          class: 'ajax btn btn-default',
-          data: {
-                action: 'edit',
-                intro: t('tutorial.canvas_click_edit_workflow_html'),
-                step: '5',
-                position: 'left'
-            } do %>
-            <span class="glyphicon glyphicon-pencil"></span>
-            <span class="hidden-xs"><%=t 'experiments.canvas.canvas_edit' %></span>
+<div class="row">
+  <div class="container-fluid">
+    <div id="diagram-buttons">
+      <% if can_edit_canvas(@experiment) %>
+        <%=link_to canvas_edit_experiment_url(@experiment),
+              remote: true,
+              type: 'button',
+              id: 'edit-canvas-button',
+              class: 'ajax btn btn-default',
+              data: {
+                    action: 'edit',
+                    intro: t('tutorial.canvas_click_edit_workflow_html'),
+                    step: '5',
+                    position: 'left'
+                } do %>
+                <span class="glyphicon glyphicon-pencil"></span>
+                <span class="hidden-xs"><%=t 'experiments.canvas.canvas_edit' %></span>
+              <% end %>
+      <% end %>
+      <!-- pexperiment actions -->
+      <% if can_edit_experiment(@experiment) || can_archive_experiment(@experiment) %>
+        <span class="dropdown">
+          <button class="btn btn-default dropdown-toggle" type="button" id="exActionsMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <span class="hidden-xs"><%= t'experiments.canvas.actions' %></span>
+            <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
+            <span class="caret"></span>
+          </button>
+          <%= render partial: 'experiments/dropdown_actions.html.erb',
+                              locals: { project: @project, experiment: @experiment } %>
+        </span>
+      <% end %>
+      <div class="toolbarButtons">
+        <span class="hidden-xs"><%=t 'experiments.canvas.zoom' %></span>
+        <div id="zoom-level-buttons" class=" <%= 'btn-group' if can_edit_canvas(@experiment) && can_create_experiment(@project)  %>" data-toggle="buttons">
+          <%=link_to canvas_full_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default active", "data-action" => "full_zoom", "data-toggle" => "button", "aria-pressed" => true do %>
+            <span class="glyphicon glyphicon-th-large" aria-hidden="true" ></span>
           <% end %>
-  <% end %>
-  <!-- pexperiment actions -->
-  <% if can_edit_experiment(@experiment) || can_archive_experiment(@experiment) %>
-    <span class="dropdown">
-      <button class="btn btn-default dropdown-toggle" type="button" id="exActionsMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <span class="hidden-xs"><%= t'experiments.canvas.actions' %></span>
-        <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
-        <span class="caret"></span>
-      </button>
-      <%= render partial: 'experiments/dropdown_actions.html.erb',
-                          locals: { project: @project, experiment: @experiment } %>
-    </span>
-  <% end %>
-  <div class="toolbarButtons">
-    <span class="hidden-xs"><%=t 'experiments.canvas.zoom' %></span>
-    <div id="zoom-level-buttons" class=" <%= 'btn-group' if can_edit_canvas(@experiment) && can_create_experiment(@project)  %>" data-toggle="buttons">
-      <%=link_to canvas_full_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default active", "data-action" => "full_zoom", "data-toggle" => "button", "aria-pressed" => true do %>
-        <span class="glyphicon glyphicon-th-large" aria-hidden="true" ></span>
-      <% end %>
-      <%=link_to canvas_medium_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default", "data-action" => "medium_zoom" do %>
-        <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
-      <% end %>
-      <%=link_to canvas_small_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default", "data-action" => "small_zoom" do %>
-        <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
+          <%=link_to canvas_medium_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default", "data-action" => "medium_zoom" do %>
+            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
+          <% end %>
+          <%=link_to canvas_small_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default", "data-action" => "small_zoom" do %>
+            <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
+          <% end %>
+        </div>
+      </div>
+
+      <% if can_create_experiment(@project) && @experiment.active? %>
+        <%= link_to new_project_experiment_url(@project),
+            remote: true,
+            type: "button",
+            id: 'new-experiment',
+            class: "btn btn-primary pull-right" do %>
+              <span class="glyphicon glyphicon-plus"></span>
+              <span class="hidden-xs-custom"><%=t 'experiments.new.create' %></span>
+            <% end %>
       <% end %>
     </div>
   </div>
-
-  <% if can_create_experiment(@project) && @experiment.active? %>
-    <%= link_to new_project_experiment_url(@project),
-        remote: true,
-        type: "button",
-        id: 'new-experiment',
-        class: "btn btn-primary pull-right" do %>
-          <span class="glyphicon glyphicon-plus"></span>
-          <span class="hidden-xs"><%=t 'experiments.new.create' %></span>
-        <% end %>
-  <% end %>
 </div>
 
 <div id="canvas-container" data-project-id="<%= @project.id %>"

app/views/my_modules/protocols/_protocol_buttons.html.erb

@@ -1,6 +1,6 @@
 <div class="btn-group" role="group" aria-label="" style="margin-left: 15px;">
   <div class="btn-group">
-    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><span class="glyphicon glyphicon-import"></span><span class="hidden-xs">&nbsp;<%= t("my_modules.protocols.buttons.load_protocol") %></span></a>
+    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><span class="glyphicon glyphicon-import"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.load_protocol") %></span></a>
     <ul class="dropdown-menu">
       <% if can_load_protocol_into_module(@my_module) %>
         <li>
@@ -24,15 +24,15 @@
     </ul>
   </div>
   <% if can_export_protocol_from_module(@my_module) %>
-    <a href="#" class="btn btn-default" data-action="export" data-id="<%= @protocol.id %>"><span class="glyphicon glyphicon-export"></span><span class="hidden-xs">&nbsp;<%= t("my_modules.protocols.buttons.export") %></span></a>
+    <a href="#" class="btn btn-default" data-action="export" data-id="<%= @protocol.id %>"><span class="glyphicon glyphicon-export"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.export") %></span></a>
   <% else %>
-    <a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-export"></span><span class="hidden-xs">&nbsp;<%= t("my_modules.protocols.buttons.export") %></span></a>
+    <a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-export"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.export") %></span></a>
   <% end %>
   <% if can_copy_protocol_to_repository(@my_module) %>
     <%= link_to copy_to_repository_modal_protocol_path(@protocol, format: :json), class: "btn btn-default", remote: true, data: { action: "copy-to-repository" } do %>
-      <span class="glyphicon glyphicon-saved"></span><span class="hidden-xs">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span>
+      <span class="glyphicon glyphicon-saved"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span>
       <% end %>
   <% else %>
-    <a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-saved"></span><span class="hidden-xs">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span></a>
+    <a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-saved"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span></a>
   <% end %>
 </div>