Merge pull request #46681 from nextcloud/artonge/fix/grid_view_preview_size

fix(files): Reduce preview size in grid view mode
This commit is contained in:
Louis 2024-07-24 10:25:16 +02:00 committed by GitHub
commit f3a2806b69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 12 deletions

View file

@ -688,16 +688,15 @@ export default defineComponent({
tbody.files-list__tbody.files-list__tbody--grid {
--half-clickable-area: calc(var(--clickable-area) / 2);
--item-padding: 16px;
--icon-preview-size: 208px;
--icon-preview-size: 166px;
--name-height: 32px;
--mtime-height: 16px;
--row-width: calc(var(--icon-preview-size));
--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height));
--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
--checkbox-padding: 0px;
display: grid;
grid-template-columns: repeat(auto-fill, var(--row-width));
gap: 22px;
align-content: center;
align-items: center;
@ -714,7 +713,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
border: none;
border-radius: var(--border-radius-large);
padding: var(--item-padding);
box-sizing: content-box;
}
// Checkbox in the top left

View file

@ -131,13 +131,13 @@ export default Vue.extend({
itemHeight() {
// Align with css in FilesListVirtual
// 208px + 32px (name) + 16px (mtime) + 16px (padding) + 22px (grid gap)
return this.gridMode ? (208 + 32 + 16 + 16 + 22) : 55
// 166px + 32px (name) + 16px (mtime) + 16px (padding)
return this.gridMode ? (166 + 32 + 16 + 16) : 55
},
// Grid mode only
itemWidth() {
// 208px + 16px padding + 22px grid gap
return 208 + 16 + 22
// 166px + 16px padding
return 166 + 16
},
rowCount() {

4
dist/files-main.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long