Make sure the whole file list header is sticky and properly stacks to other headers

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2020-01-17 00:24:34 +01:00
parent 674da6ea3c
commit be6f3242ca
1 changed files with 14 additions and 24 deletions

View File

@ -65,28 +65,24 @@
#emptycontent:not(.hidden) ~ & {
display: none;
}
// floating header
thead {
position: -webkit-sticky;
position: sticky;
@include position('sticky');
// header + breadcrumbs
top: $header-height;
// under breadcrumbs, over file list
z-index: 60;
display: block;
background-color: var(--color-main-background-translucent);
}
}
#filestable.hidden {
display: none;
}
@media only screen and (min-width: $breakpoint-mobile + 1) {
#filestable {
// floating header
thead {
position: -webkit-sticky;
position: sticky;
// header + breadcrumbs
top: $header-height;
// under breadcrumbs, over file list
z-index: 55;
display: block;
background-color: var(--color-main-background-translucent);
}
}
}
/* fit app list view heights */
.app-files #app-content > .viewcontainer {
min-height: 0%;
@ -289,14 +285,8 @@ table th.column-last, table td.column-last {
max-width: 130px;
}
/* Multiselect bar */
table.multiselect thead {
@include position('sticky');
#app-content-files thead {
top: 94px;
z-index: 55;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: $navigation-width;
}
table.multiselect thead th {
@ -309,7 +299,7 @@ table.multiselect thead th {
}
table.multiselect #headerName {
position: sticky;
position: relative;
width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
}
table.multiselect #modified {