diff options
| author | Grigorii K. Shartsev <me@shgk.me> | 2024-01-27 19:05:31 +0100 |
|---|---|---|
| committer | Grigorii K. Shartsev <me@shgk.me> | 2024-01-30 20:28:14 +0100 |
| commit | f01e1699386dcf9b5c41c5fb49f2b31e60bab280 (patch) | |
| tree | 9c0b6da479e13dae7107f4da0ea2a4b73c1cb388 /apps | |
| parent | 5f7e4ffd7f3c950acbfa25af83aab77ad36d9209 (diff) | |
| download | nextcloud-server-f01e1699386dcf9b5c41c5fb49f2b31e60bab280.tar.gz nextcloud-server-f01e1699386dcf9b5c41c5fb49f2b31e60bab280.zip | |
fix(files): selected files actions position on scroll/with readme block
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files/src/components/FilesListVirtual.vue | 15 | ||||
| -rw-r--r-- | apps/files/src/components/VirtualList.vue | 10 |
2 files changed, 16 insertions, 9 deletions
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index ed0096e9792..991964b7929 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -339,14 +339,21 @@ export default defineComponent({ .files-list__table { display: block; + + &.files-list__table--with-thead-overlay { + // Hide the table header below the overlay + margin-top: calc(-1 * var(--row-height)); + } } .files-list__thead-overlay { - position: absolute; + // Pinned on top when scrolling + position: sticky; top: 0; - left: var(--row-height); // Save space for a row checkbox - right: 0; - z-index: 1000; + // Save space for a row checkbox + margin-left: var(--row-height); + // More than .files-list__thead + z-index: 20; display: flex; align-items: center; diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue index 77454772f55..d6508df1032 100644 --- a/apps/files/src/components/VirtualList.vue +++ b/apps/files/src/components/VirtualList.vue @@ -1,15 +1,15 @@ <template> <div class="files-list" data-cy-files-list> - <div v-if="!!$scopedSlots['header-overlay']" class="files-list__thead-overlay"> - <slot name="header-overlay" /> - </div> - <!-- Header --> <div ref="before" class="files-list__before"> <slot name="before" /> </div> - <table class="files-list__table"> + <div v-if="!!$scopedSlots['header-overlay']" class="files-list__thead-overlay"> + <slot name="header-overlay" /> + </div> + + <table class="files-list__table" :class="{ 'files-list__table--with-thead-overlay': !!$scopedSlots['header-overlay'] }"> <!-- Accessibility table caption for screen readers --> <caption v-if="caption" class="hidden-visually"> {{ caption }} |