Custom CSS to enable ultra-compact list view in Files (Nextcloud 27 and 28)

🏷️ General
, , , ,
1

I don’t like files viewers with a lot of padding, so I created some custom CSS to enable an ultra-compact view. I didn’t see anyone else share something like this, so I wanted to share it as a resource for anyone else looking to go down this road.

These instructions are accurate as of Nextcloud 27.1.2.

You will need the Custom CSS App, which is available here: Custom CSS - Apps - App Store - Nextcloud

Once you have that, Click the upper-right icon to bring up the menu, go to “Administration Settings”, In the left side panel go to the “Administration” group and select “Theming”, then at the bottom you can type in custom-CSS. This is what I used:

.files-fileList td a a.action, table td.filename a.name, table td.filename p.name {
  line-height: 25px;
}
.files-filestable tbody tr, table td.filename .thumbnail-wrapper, table td.filename a.name, table td.filename p.name {
  height: 25px;
}
table td.filename .thumbnail {
  width: 16px;
  height: 16px;
  margin-top: 4.5px;
}
table td.filename .nametext, .modified, .column-last > span:first-child {
  padding: 0;
}
.files-filestable .filename .action .icon, .files-filestable .selectedActions a .icon, .files-filestable .filename .favorite-mark .icon, .files-controls .actions .button .icon {
  background-size: 8px 8px;
}

The resulting view looks like this:

image
image1592Ă—485 30.1 KB

4 Likes
2

Nice. :+1:

I noticed some increase in server/database load(time).

Your css makes everything 50% smaler.

I made one with a decrease of 33.33% and some more rules to optimize the view a litle bit:

/* 2/3 of original  size */
table th .columntitle.name {
  margin-left: 27.34px;
}
.files-fileList td a a.action, table td.filename a.name, table td.filename p.name {
  line-height: 33.33px;
}
.files-filestable tbody tr, table td.filename .thumbnail-wrapper, table td.filename a.name, table td.filename p.name {
  height: 34px;
}
table td.filename .thumbnail-wrapper {
  min-width: 33.34px; 
  max-width: 33.34px;
  height: 33.34px;
}
table td.filename .thumbnail {
  width: 21.34px;
  height: 21.34px;
  margin-left: 6px;
  margin-top: 5px;
}
table td.filename .nametext, .modified, .column-last > span:first-child {
  padding: 0;
}
.files-filestable .filename .action .icon, .files-filestable .selectedActions a .icon, .files-filestable .filename .favorite-mark .icon, .files-controls .actions .button .icon {
  background-size: 10.67px 10.67px;
}
table td.filename .system-tags .system-tags__tag {
    line-height: 16px;
}
.files-fileList td a a.action.action-share {
    padding: 0px;
}
.files-fileList td a a.action.action-menu {
    padding-left: 0px;
    padding-right: 0px;
}
.files-filestable .summary .filesummary {
    padding-left: 60px;
}

Together with some custom icons:

image
image949Ă—574 33.1 KB

Much luck,
ernolf

3 Likes
3

interesting work! it’s a nice result that I’m sure many people would like to use. If you’re interested in it, I could recommend to maybe upload it as an app to the app store? Either way thanks for sharing!

2 Likes
4

That would really be a great feature (maybe directly in Nextcloud without an app). I believe that far too much space is wasted these days, especially with responsive design. Perhaps we should take a fundamental look at this.

2 Likes
5

Yep :slight_smile:

No, a compact list view could be added as a third option to the existing (standard) list view and grid view, in which case there would be no need for fundamental discussions about today’s design choices, as users would be able to decide for themselves which one to use.

3 Likes
6

Yes. That would be nice. But then i want the feature also e.g. in Nextcloud Talk.

1 Like
7

This CSS for Nextcloud 27 does not work on Nextcloud 28 since it comes with a complete overhauled interface with different css selectors.

That is why I wrote a new css for nearly the same result but working on Nextcloud 28.
In the end, the selectors are set better, meaning the same result can be achieved with less CSS.
This is a first quick throw to adjust the files list (list view, not grid view).

Try it out please:

/* Nextcloud >= 28 */
.files-list {
    --row-height: 36px !important;
    --icon-preview-size: 24px !important;
}

.files-list__row-size {
    width: calc(var(--row-height)*2) !important;
}
.files-list__row-mtime {
    width: calc(var(--row-height)*3) !important;
}

.files-list * {
    box-sizing: content-box !important;
    --icon-size: 20px;
}

.files-list__tbody--list * {
    --icon-size: 18px !important;
}

.input-field__main-wrapper.input-field__main-wrapper {
    height: 36px !important;
}

.files-list .files-list__row input {
    margin-top: -2px;
    min-height: 0;
    height: 100% !important;
    box-sizing: border-box !important;
}

.input-field__label.input-field__label {
    padding-top: 2px;
    font-size: 11px !important;
    background-color: transparent !important;
}
last updated 17.12.2023

I will be happy to continue improving this if I come across unsightly elements that don’t fit the slim design.

Much luck,
ernolf

2 Likes
8

Thank you, as soon as 28 goes to prod I’ll try this!

1 Like
9

I have just updated the CSS again; the input fields for (re)naming file- and folder names have now been adapted to the slim design.

ernolf

1 Like
10

I iterated on your work a bit; favorite icons were showing weird, and I like things to be ULTRA compact, so I’ve settled on the following for v28:

/* Nextcloud >= 28 */
.files-list {
    --row-height: 24px !important;
    --icon-preview-size: 16px !important;
}

.files-list__row-size {
    width: calc(var(--row-height)*2) !important;
}
.files-list__row-mtime {
    width: calc(var(--row-height)*3) !important;
}

.files-list * {
    box-sizing: content-box !important;
    --icon-size: 16px;
}

.files-list__tbody--list * {
    --icon-size: 16px !important;
}

.input-field__main-wrapper.input-field__main-wrapper {
    height: 36px !important;
}

.files-list .files-list__row input {
    margin-top: -2px;
    min-height: 0;
    height: 100% !important;
    box-sizing: border-box !important;
}
.input-field__label.input-field__label {
    padding-top: 2px;
    font-size: 11px !important;
    background-color: transparent !important;
}
.files-list__row-icon-favorite {
    margin-right: 5px;
}
.favorite-marker-icon {
    height: 12px;
    width: 12px;
}
.files-list__row-name-link {
    padding-left: 8px;
}

This is the rough result:

image

I wish there was a way to change the number of files loaded, I hate that the list jitters as you scroll.

4 Likes