Merge pull request #272 from EdouardVanbelle/feat/sticky-action-bar

static/css/layout/content.css

@@ -13,6 +13,15 @@
     color: #2d3748;
 }
 
+.page-sticky-header {
+    position: sticky;
+    margin: 0px;
+    padding: 10px 0px;
+    top: -20px; /* due to padding top of content-area */
+    background-color: var(--color-bg-page);
+    z-index: 100; /* ensure header is above image preview */
+}
+
 .actions-bar {
     display: flex;
     justify-content: space-between;

static/index.html

@@ -214,8 +214,10 @@
         <div class="content-area">
             <h1 class="page-title" data-i18n="nav.files">Files</h1>
 
+            <div class="page-sticky-header">
                 <div class="actions-bar" id="actions-bar">
-                <div class="action-buttons">
+
+                    <div class="action-buttons" id="action-buttons">
                         <div class="upload-dropdown" id="upload-dropdown">
                             <button class="btn btn-primary" id="upload-btn">
                                 <i class="fas fa-cloud-upload-alt"></i>
@@ -248,9 +250,12 @@
                         </button>
                     </div>
                 </div>
-
                 <div id="batch-selection-bar" class="batch-selection-bar hidden"></div>
 
+                <div class="breadcrumb">
+                    <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
+                </div>
+
                 <div class="dropzone" id="dropzone">
                     <i class="fas fa-cloud-upload-alt dropzone-icon"></i>
                     <p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
@@ -263,8 +268,6 @@
                     </div>
                 </div>
 
-            <div class="breadcrumb">
-                <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
             </div>
 
             <!-- Files Container -->