garethgeorge / backrest

Backrest is a web UI and orchestrator for restic backup.
GNU General Public License v3.0
1.32k stars 39 forks source link

Better UI auto scaling in different screen resolution #168

Open Nebulosa-Cat opened 7 months ago

Nebulosa-Cat commented 7 months ago

For comparison this is the preview in README: image

this is how the UI look in 4k 28inch monitor: 100% image 110% image 120% image

I think the UI needs to add custom sizing options, especially as modern devices have many resolutions

For example, common screen on rack 1280x960 (4:3), normal 1920x1080 (16:9), 2k, 4k, 5k (like mac studio or some LG screen for mac user), evem some 13inch laptop or 11inch iPad... etc

May need a better design of auto-scaling default font sizes to fit more devices in browser.

garethgeorge commented 7 months ago

Thanks for sharing the screenshots!

Brainstorming a few options to improve scaling across a few form factors

Is font size an issue? How do you envisage scaling being configured?

Nebulosa-Cat commented 7 months ago

Thanks for sharing the screenshots!

Brainstorming a few options to improve scaling across a few form factors

  • Looking at backrest on mobile, I already have some support for a custom layout here that hides the far right panel in favor of a popup when you click on a backup row BUT the sidebar and text is quite small. I'll see if I can expand this a bit.
  • On desktop, I think the main problem seems to be that the layout isn't resizeable. I'll aim to make the content area draggable to resize the backup pane / tree view panes.

Is font size an issue? How do you envisage scaling being configured?

In Desktop, for example, my screen is a 28inch 4k screen, the distance to me is 60cm, the text letter wide is slightly larger than 1mm when use 100% scale, when change to 120% it will much clearer (~2mm)

in my 11inch iPad Pro, it looks like this: IMG_2166 The main problem is letter size too. But in fact, the problem is smaller than on the desktop because the screen is much closer to the eyes when using a tablet.

in my 12 mini (It’s a unusual device use case. I don’t think anyone would want to use such a small phone for service management. It’s for comparison only.): IMG_5006 If need use on phone, it maybe need single column layout i think, the "Plans", "Repo" an "Setting" maybe need fold. IMG_5008 and the detail box maybe need fill almost screen to get clear view