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: https://apps.nextcloud.com/apps/theming_customcss

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

6 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.

3 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.

4 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__row-head * {
    box-sizing: content-box !important;
}

.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;
}

.files-list__row-icon-favorite {
    margin-right: 5px;
}

.favorite-marker-icon {
    height: 16px;
    width: 16px;
}

.files-list__row-name-link {
    padding-left: 8px;
}
last updated 01.07.2024

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

Much luck,
ernolf

3 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.

5 Likes
11

Hi @surfrock66

meanwhile I bumped all my productive servers to 28, so I developed a workaround for that, since it is really annoying.

First let me explain, what exactly happens and where that is done.

The behaviour of loading only the visible files is done here:

… where it computes the number of visible lines with a hardcoded lineheight of 55 pixel:

In addition, it buffers 3 lines that are outside of each side of the visible scope:

What I have done and what solves this issue, is changing the hardcoded lineheight to the newly set height as defined in the custom CSS (in this example I use 24, since that is the height you have chosen for ultra slim view) and by increasing the number of buffered lines from 3 to 5.

Since these are source files that need to be compiled, meaning they are not available on the production server and do not look exactly like this after creation, you must be prepared to adapt the JavaScript file that contains this information.
To make this work without any problems, you should understand the steps I explain here exactly. Then you can always apply them again after an update has been carried out on the server.

This is the file containing the compiled JavaScript:

dist/files-main.js

Please do not try to edit this file with a normal editor, since it is compiled javascript, what means it is only one single line with more than 660k characters (+ one line for licence), which would freeze any normal editor.

That is why you should edit it only with sed.

Here the tools to query the is value:
(assuming that nextcloud is installed in /var/www/nextcloud)

grep -Eo 'itemHeight\(\)\{.{0,28}' /var/www/nextcloud/dist/files-main.js
grep -Eo 'bufferItems\(\)\{.{0,40}' /var/www/nextcloud/dist/files-main.js

and to set a new value:
(assuming the actual values are the default)

sed -i 's/197:55/197:24/' /var/www/nextcloud/dist/files-main.js
sed -i 's/Count:3/Count:5/' /var/www/nextcloud/dist/files-main.js

Here one more verbose example with echoes:

# cd into server root:
root@box:~# cd /var/www/nextcloud
root@box:/var/www/nextcloud#

# first create a backup of the original file:
root@box:/var/www/nextcloud# cp -a dist/files-main.js dist/files-main.js.bak

# Line height
# query:
root@box:/var/www/nextcloud# grep -Eo 'itemHeight\(\)\{.{0,28}' dist/files-main.js
itemHeight(){return this.gridMode?197:55}
# set:
root@box:/var/www/nextcloud# sed -i 's/197:55/197:24/' dist/files-main.js
# query again:
root@box:/var/www/nextcloud# grep -Eo 'itemHeight\(\)\{.{0,28}' dist/files-main.js
itemHeight(){return this.gridMode?197:24}

# Buffered lines
# query:
root@box:/var/www/nextcloud# grep -Eo 'bufferItems\(\)\{.{0,40}' dist/files-main.js
bufferItems(){return this.gridMode?this.columnCount:3}
# set:
root@box:/var/www/nextcloud# sed -i 's/Count:3/Count:5/' dist/files-main.js
# query again:
root@box:/var/www/nextcloud# grep -Eo 'bufferItems\(\)\{.{0,40}' dist/files-main.js
bufferItems(){return this.gridMode?this.columnCount:5}

Much and good luck,
ernolf

12

Update:
I had to restrict the box-sizing: content-box rule to a smaller scope within .files-list__row-head because applying it globally within .files-list * was causing issues with the scrolling behavior at the end of the file listing. Specifically, it resulted in an endless scrolling problem, where the page couldn’t correctly detect when the list items ended, allowing for infinite scrolling beyond the actual content. By limiting the box-sizing rule to the specific elements that needed it, I was able to maintain the desired styling without disrupting the overall scrolling functionality.

1 Like
13

Is there a way to get this look to work on shared link pages? Shared links just shows the normal theme

14

Since the Shareview version has not yet moved to Vue, you simply need to enter the CSS for Nextcloud <28 from above within your custom CSS:

That will apply slim view for shareview.

Much and good luck,
ernolf

2 Likes
15

Thank you very much! Something I have noticed with this though is anything above 1080p the scrolling breaks large lists in folders and doesn’t display all the folders.

16

You mean it only affects “folders” and not normal “files”?

There can be many reasons for this. For example, a third party app that is causing an error. I know that the README.md app is causing such behavior. If it is active, you unfortunately have to temporarily deactivate it. The underlying code is also being worked on hard at the moment, changes are being made all the time, so the exact version is also important.
In addition - as I described above - the JavaScript hve to be patched. That is all very sensitive and can change the behavior if even a small mistake is made.
So without being able to reproduce it myself, I can’t help at the moment.
But I will definitely come back to it if I manage to reproduce it.

ernolf

17

This is amazing! Thank you. You have no idea how long I have been looking for this