fileserver: New file browse template

[mholt]

The current browse template is... fine. It's definitely far better than other servers' built-in file listings. But it's showing its age and we can do better:

• The font, Verdana, though tried-and-true, does not render well/smoothly on many modern devices. Modern fonts such as Inter and system UI fonts display better and are more legible.
• Accessibility concerns: there is not enough padding/whitespace, making it difficult to tap the right file on mobile screens if you have fat fingers or a small screen (this is something that watching my dad use a phone has made me very aware of).
• It's kind of stark. We do want a plain look, but it should still look visually interesting.
• Inconsistent iconography. The prior use of SVG was a bit immature. Now we use Tabler icons which are consistent, simple, and easy-to-use -- plus there's thousands of them to choose from, so we have a lot of flexibility that way.
• Dark theme improvements.
• On wide monitors (mine is 49"), the file listing is way too wide, making it hard to connect the filename to the info on the right side. It just looks a bit ridiculous this wide. The new theme has a max width.
• I removed borders between each row of the file listing, as the color change on hover does a better job at helping you see a row. Another option I experimented with is alternating row colors every 3n, 3n+1, and 3n+2 rows, but that felt more crowded/busy.
• Visual representation of relative file size in list view.
• Filetype-specific icons for common extensions. (We can add more too.)
• Entries with an image extension now show the image file instead of a generic icon.

The Firefox screenshot tool has a bug that causes the background to be incorrectly repeated here, but I promise that the background is actually fixed as you scroll:

Grid view:

[mholt]

I say let's try this. I haven't tested this on a directory with thousands and thousands of entries -- I imagine that'll be fun for a browser to render -- but we can work on optimizations if we get complaints of slow load times.

[ghost]

I don't know if feedback should be given here or elsewhere, but my personal opinion is that list view should be as minimal and low-bandwidth as possible. I don't think list view should be loading images/image thumbnails, personally. Some may love/prefer it, I don't know.

Edit: But I love grid view. 5/7 perfect score.

[mholt]

True, maybe loading images in the list view should be opt-in or something.

[Tropaion]

Didn't even know I can do this with caddy? Is there a guide for this?
Also is it possible to edit caddyfiles with it in the browser?

[francislavoie]

@Tropaion use the latest beta https://github.com/caddyserver/caddy/releases/tag/v2.7.0-beta.1

No, the browse template is read-only, you can't edit files with it. There's no plans to add that kind of functionality, that's entirely out of scope. You can use a project like https://filebrowser.org/ to do that instead.

[Tropaion]

@francislavoie Ok, thanks for the information.

[ghost]

[...] list view should be as minimal and low-bandwidth as possible. I don't think list view should be loading images/image thumbnails, personally. [...]

It looks like v.2.7.0-beta.2 does this. Very nice. ❤️

[mholt]

Yeah... I think that was a good idea. Thanks for trying the beta @xnaas!

[revilowaldow]

Any idea when this is likely to make it into the main release?
Looks excellent! Thanks for working on this, will be really helpful for my use case, I was just starting to look into how to make an image gallery template.

[mohammed90]

Any idea when this is likely to make it into the main release?

It's been available since v2.7.0 (Aug 3), while the latest is v2.7.5 (Oct 12).

[revilowaldow]

Well this should be an easy fix, thank you!