Add sticky toolbar for projects page [SCI-5401] (#3108)

* Add sticky toolbar for projects page [SCI-5401]

app/assets/stylesheets/projects.scss

@@ -762,8 +762,6 @@ li.module-hover {
   }
 
   .projects-toolbar {
-    margin-bottom: 1em;
-
     .form-group {
       width: 100%;
     }
@@ -1157,10 +1155,14 @@ li.module-hover {
             display: flex;
             height: 3em;
             padding: 0 .5em;
+            position: sticky;
+            position: -webkit-sticky;
+            top: 13em;
+            width: calc(100% + 1em);
+            z-index: 2;
 
             &.select-all-checkboxes {
               justify-content: center;
-              position: relative;
             }
           }
 

app/assets/stylesheets/repositories.scss

@@ -31,11 +31,13 @@
 
 
   #repository-toolbar {
+    .title-row {
       align-items: center;
       background-color: $color-white;
       border: 0;
       display: flex;
       left: var(--repository-sidebar-margin);
+      margin-left: 0em;
       padding: 0 2em;
       position: fixed;
       transition: .4s $timing-function-sharp;
@@ -45,8 +47,9 @@
       .toolbar-delimiter {
         border-bottom: $border-tertiary;
         bottom: 0;
+        margin-left: -2em;
         position: absolute;
-      width: calc(100% - 4em);
+        width: 100%;
       }
 
       .repository-share-icon {
@@ -94,6 +97,7 @@
           }
         }
       }
+    }
 
     .repository-archived-title-name {
       @include font-h1;

app/assets/stylesheets/shared/content_pane.scss

@@ -1,3 +1,6 @@
+// scss-lint:disable SelectorDepth SelectorFormat
+// scss-lint:disable NestingDepth QualifyingElement
+
 .content-pane {
   background-color: $color-white;
   margin: 20px 0;
@@ -9,10 +12,22 @@
   }
 
   .content-header {
+    &.sticky-header {
+      background: $color-white;
+      position: sticky;
+      position: -webkit-sticky;
+      top: var(--navbar-height);
+      z-index: 10;
+    }
+
+    .title-row {
       align-items: center;
       border-bottom: $border-tertiary;
       display: flex;
       height: 5em;
+      margin-left: -2em;
+      padding-left: 2em;
+      width: calc(100% + 4em);
 
       h1 {
         flex-grow: 1;
@@ -25,9 +40,10 @@
         .caret {
           margin: 8px 0 8px 8px;
         }
+
         &.open {
           .caret {
-          transform: rotateX(180deg)
+            transform: rotateX(180deg);
           }
         }
 
@@ -52,7 +68,12 @@
       }
     }
 
-  .content-body {
+    .toolbar-row {
-
+      border-bottom: $border-tertiary;
+      margin-left: -2em;
+      padding: 1em 0;
+      padding-left: 2em;
+      width: calc(100% + 4em);
+    }
   }
 }

app/views/projects/index.html.erb

@@ -21,9 +21,7 @@
   <%= render partial: 'projects/index/modals/export_projects' %>
 
   <div class="projects-container">
-    <div id="toolbarWrapper">
+    <div class="cards-wrapper" id="cardsWrapper" data-projects-cards-url="<%= @current_folder ? project_folder_cards_url(@current_folder) : cards_projects_url %>">
-    </div>
-    <div class="cards-wrapper" id="cardsWrapper" data-projects-cards-url="<%= current_folder ? project_folder_cards_url(current_folder) : cards_projects_url %>">
       <div class="table-header">
         <div class="table-header-cell select-all-checkboxes">
           <div class="sci-checkbox-container">

app/views/projects/index/_header.html.erb

@@ -1,4 +1,5 @@
-<div class="content-header">
+<div class="content-header sticky-header">
+  <div class="title-row">
     <h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
     <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('projects.index.head_title_archived') %></h1>
 
@@ -165,4 +166,7 @@
         </ul>
       </div>
     </div>
+  </div>
+  <div id="toolbarWrapper" class="toolbar-row">
+  </div>
 </div>

app/views/projects/show/_header.html.erb

@@ -1,4 +1,5 @@
 <div class="content-header">
+  <div class="title-row">
     <h1 class="project-name">
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
@@ -32,4 +33,5 @@
         </ul>
       </div>
     </div>
+  </div>
 </div>

app/views/repositories/index.html.erb

@@ -10,6 +10,7 @@
   <div class="content-pane flexible <%= params[:archived] ? :archived : :active %> repositories-index"
        data-readonly="<%= !current_user.is_admin_of_team?(current_team) %>">
     <div class="content-header">
+      <div class="title-row">
         <h1 data-view-mode="active"><%= t('libraries.index.head_title') %></h1>
         <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('libraries.index.head_title_archived') %></h1>
         <%= render layout: "shared/view_switch", locals: { disabled: false } do %>
@@ -23,6 +24,7 @@
           </li>
         <% end %>
       </div>
+    </div>
     <div class="content-body">
     </div>
   </div>

app/views/repositories/show.html.erb

@@ -14,6 +14,7 @@
 
 <div class="content-pane repository-show <%=  @repository.active? ? "active" : "archived" %>" data-table-url="<%= load_table_repository_path(@repository) %>">
   <div id="repository-toolbar" class="content-header">
+    <div class="title-row">
       <% if @repository.active? %>
         <div class="repository-title-name" data-view-mode="active">
           <h1 class="name-container">
@@ -139,9 +140,9 @@
             </li>
           <% end %>
       </div>
-
       <div class="toolbar-delimiter"></div>
     </div>
+  </div>
 
   <!-- These buttons are appended to table in javascript, after table initialization -->
   <div class="toolbar-filter-buttons" style="display:none">

app/views/users/registrations/edit.html.erb

@@ -5,8 +5,10 @@
 
 <div class="content-pane active flexible user-settings">
   <div class="content-header">
+    <div class="title-row">
       <h1><%=t "users.registrations.edit.title" %></h1>
     </div>
+  </div>
   <div class="row settings-row">
     <div class="col-md-12">
       <% if not resource.errors.empty? %>