diff options
| author | John Molakvoæ <skjnldsv@protonmail.com> | 2023-04-07 13:32:11 +0200 |
|---|---|---|
| committer | John Molakvoæ <skjnldsv@protonmail.com> | 2023-04-12 12:10:44 +0200 |
| commit | 34d22f19d3b15bf5a10ba4977288e6c285aba36b (patch) | |
| tree | 48101d90d2788e5d23419f003a84c9e6c9ca82e1 /apps/files/src/components/FilesListVirtual.vue | |
| parent | 993a7fc8e638b0c4e8435980809efbc7e8ab056b (diff) | |
| download | nextcloud-server-34d22f19d3b15bf5a10ba4977288e6c285aba36b.tar.gz nextcloud-server-34d22f19d3b15bf5a10ba4977288e6c285aba36b.zip | |
feat(files): responsive design for mobile and narrow screens
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/files/src/components/FilesListVirtual.vue')
| -rw-r--r-- | apps/files/src/components/FilesListVirtual.vue | 21 |
1 files changed, 19 insertions, 2 deletions
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 16e25e33d1f..fe9b9f635bc 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -226,6 +226,8 @@ export default Vue.extend({ // Show same padding as the checkbox right padding for visual balance margin-right: var(--checkbox-padding); color: var(--color-primary-element); + // No shrinking or growing allowed + flex: 0 0 var(--icon-preview-size); & > span { justify-content: flex-start; @@ -285,7 +287,7 @@ export default Vue.extend({ margin: 0 var(--cell-margin); } - & > button { + button { .button-vue__text { // Remove bold from default button styling font-weight: normal; @@ -316,7 +318,22 @@ export default Vue.extend({ .files-list__row-column-custom { width: calc(var(--row-height) * 2); } + + @media (max-width: 768px) { + // Hide any column after the size menu on mobile + .files-list__row-size ~ td, + .files-list__row-size ~ th { + display: none; + } + } + + @media (max-width: 480px) { + // Hide any column after the actions menu on short mobile + .files-list__row-actions ~ td, + .files-list__row-actions ~ th { + display: none; + } + } } } - </style> |