In grid view, file type icons are too big compared to image previews

[jancborchardt]

In the new grid view, the filetype icons look unelegantly large compared to the image previews (This is actually also the case in the Android app which uses the same previews & folder icons cc @tobiasKaminsky @AndyScherzinger)

In the list view it’s fine, although it would not be bad for the preview images to be bigger:

How can we reduce the size of the filetype icons / make the image previews larger? @rullzer @nextcloud/designers

[nextcloud-bot]

GitMate.io thinks possibly related issues are #8241 (image), #11573 ([WIP] Files grid view), #11050 ([WIP] Grid view for files), #3393 (Preview generator fails on big jpg files), and #11863 (Broken images stops preview generation).

[juliushaertl]

Should easily doable just with some CSS:

[data-has-preview='false'] .thumbnail {
	background-size:50% !important;
}

[tobiasKaminsky]

What kind of ratio do you think is good? 50% as Julius set?
I can have a look if this is possible on Android

[juliushaertl]

I think 50% is already a bit to small, 75% looks good to me. Also I would actually only apply this to the grid view.

[jancborchardt]

Sounds good to me @juliushaertl, thanks for the piece of code! :) I'll play around with the values a bit tomorrow, or do you already want to submit a pull request with 75% and we can discuss there?

[tobiasKaminsky]

I am shameless posting an android screenshot here…
As you can see, I only resized the folder, but not generic mimetypes.
How do you do this on webUI?

[jancborchardt]

@tobiasKaminsky nice, already looks much better! It's really visible how the folder icon size looks nicer in comparison to the rest.

• The other filetype icons also need to be smaller
• The text below can be moved up a bit (towards the filetype icon)
• Text size is also a bit large maybe? Is it the same as the file name in list view?

(And it's absolutely fine posting the Android screenshots here :) It's an issue we have cross-platform and wr should solve it generally. Actually probably similar for the iOS grid view, cc @marinofaggiana)

[marinofaggiana]

... continue here :

@jancborchardt

[tobiasKaminsky]

In general, I am not sure if text/filename in grid view is really useful.
According to all screenshots in this issue (Independent from platform), you can always read only ~5 chars at beginning and a few on the end and this does not help to distinguish:

• on first one multiple "Screen…"
• on android multiple nextcl…apk

Unfortunately I do not have a better idea.
Maybe putting "…" to the end, as you can see the mimetype through icons, but in case of last iOS image, scan 16/43 would then be trimmed…

[marinofaggiana]

New grid with more Width for item, generally 3 item for line ... now the filename has more meaning

@jancborchardt margin left and right now are 5 px (?) or 0 ?

[AndyScherzinger]

I agree with @tobiasKaminsky and also @marinofaggiana. Looking through some file managers on Android supporting grid view they:

• default to either 2 or 3 columns (like in the latest iOS screenshot)
• they either use ellipsizing end or marquee (while marquee is quite hectic, so I'd vote for end)
• I'd leave the filenames out for images ("kind of gallery mode") but leave them in for any other type of file. Having looked at several file managers it becomes apparent that grid isn't working well for files in comparison to list views except for media/image folders.

So for Android I vote for 3 columns, ellipsizing end, no filenames for images/videos

[marinofaggiana]

So for Android I vote for 3 columns, ellipsizing end, no filenames for images/videos

I don't like no filename for a specific type of file, asymmetric !?

[AndyScherzinger]

I don't like no filename for a specific type of file, asymmetric !?

I get that, just stating the way how the grid view handles image previews in grid view (no filename)

[jancborchardt]

@marinofaggiana some feedback specific to the iOS screenshot you showed:

• The filename text should be center-aligned.
• The filename is a bit too close to the image preview. Needs a bit more distance / line height.
• Also agree that images generally don’t really need a filename. It’s usually IMG_20324234… or Screenshot-2018… and not really useful, just distracting.
• The filetype icons should be a bit smaller. Size of the image previews is good though! :)
• There should be no white margin on the left and right between image previews and the edge of the screen.
• The 3-dot-menu should be on the right of the filename, on the same row. right-aligned.
• The sorting options should not occupy one whole row, but rather be in a 3-dot icon on the right of the header. Do you have an Android device? You can do it like we have in the Android app maybe? https://twitter.com/jancborchardt/status/1046778096500834304 :)

Does that sound good? 🙂

[marinofaggiana]

@jancborchardt :

[marinofaggiana]

@jancborchardt the issue of menu is that are too many option for the order (look) :

Then 3 menu :

Whats do you think?

[skjnldsv]

@jancborchardt what is this issue about? I'm confused by all the android iOS stuff here?

[marinofaggiana]

@skjnldsv sorry !! mea culpa !! I have add here my question grid for iOS.

[tobiasKaminsky]

No need to apologize for, Marino. Jan encouraged us to post here also screenshots from Android/iOS as this is a cross-platform problem.

[skjnldsv]

@marinofaggiana No worries! I was just confused abou tthe topic of this issue!! 🤗 😉
It's perfectly fine, thanks for the explanation @tobiasKaminsky 🤗

[skjnldsv]

Fixed 28. Much more elegant now

[tobiasKaminsky]

I cannot spot any difference? 😇
@jancborchardt as this is also interesting for Android, how small shall e.g. the folder icon be?

[jancborchardt]

Might also be the general spacing that makes it look much better. Nice :)

@tobiasKaminsky I just checked Android and the sizing of the icons compared to the previews seems fine to me.