Floating files header

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index a5e28ff38da54b06e50f72c0b2c559f2efd26689..eb0e891e5c195b2e93ab06ac839fd8ea21d9a40d 100644 (file)
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -55,12 +55,28 @@
        position: relative;
        width: 100%;
        min-width: 250px;
+       display: flex;
+       flex-direction: column;
        // hide table if emptycontent is not hidden
        #emptycontent:not(.hidden) ~ & {
                display: none;
        }
 }
 
+@media only screen and (min-width: $breakpoint-mobile + 1) {
+       #filestable {
+               // floating header
+               thead {
+                       position: sticky;
+                       // header + breadcrumbs
+                       top: $header-height + 44px;
+                       z-index: 1000;
+                       display: block;
+                       background-color: var(--color-main-background-translucent);
+               }
+       }
+}
+
 /* fit app list view heights */
 .app-files #app-content>.viewcontainer {
        min-height: 0%;

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 44c4c5abec997cb94e943d9554c2a1afe0ea222f..c887c6bea5f083e5ae978641e47806c758bdbf18 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -652,8 +652,6 @@
                        });
 
                        this.breadcrumb._resize();
-
-                       this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
                },
 
                /**