Server Page redesign

[nepcore]

On multiple occasions I have seen people not being all that happy with the current, rather scroll heavy, design of the server page, that choice was originally based on my inexperience with the technologies we use to build the frontend
Since then I have gathered a decent amount of knowledge and experience with those technologies though and now I fell the time has come to reconsider this choice, however I am also aware that this is one of the most central and most used parts of the PufferPanel frontend, so I want to get the community involved on this and hear your opinions

If you like the server page as it currently is, then please let me know about that as well, not everything always needs to change for the sake of change
My idea to reduce the amount of scrolling would be to add a tab bar at the bottom of the screen that allows the user to switch between the different cards that the server page currently displays instead of displaying them all at once (one exception, I would display both the file manager as well as the SFTP card together on a files tab), for how this could look please see this for desktop and this for mobile

I remember having seen someone asking to add those tabs the the side navigation, so to address that: I don't think that that is a good idea as on smaller devices the side navigation is not always shown, making it hard to notice and possibly confusing to find these buttons, plus even if you know they are there it would always require two taps to get to where you want to go instead of the one it takes with a bottom tab bar

If you have any opinion on this or other ideas for how this could be implemented, feel free to share and discuss them here

[disconsented]

I can echo the sentiments about the design, most of the folks I talk with don't like super long pages.

The convention is that you'd have as many functions as possible on the sidebar with each view being concisely used for that function.
For things that can't have logical separation it may be best to insert them into tabs.

I personally don't have an issue with long pages, but I can understand why users may not be happy with them but, it is a bit of a problem for mobile usability which would have me leaning towards the classic burger bar menu pattern.

As for mobile support, there aren't many good patterns that support this. We'd need some kind of floating element to allow users to navigate either way.

Although at this point it may be a good idea to address ideas around extensibility, vuetify is a quite opinionated framework, but it is quite difficult to keep changes in sync with mainline puffer. I doubt many people will have this same problem its more so an artefact of my use of this in a commercial setting and willing to develop domain specific features further.

As for the extensibility, I am toying with redesigns quietly in the background with my efforts primarily focused on glass morphism and neumorphism. I intend to showcase it at

So really this mess can be summarised down to two things:

• I agree the length is a problem, I think a hovering menu bar w/ burger & tabs is the best way to deal with it
• I would like to see extensibility to be a larger factor, but I don't have a good way of doing this. Vue itself doesn't really have any mechanisms to do so.

[nepcore]

The convention is that you'd have as many functions as possible on the sidebar with each view being concisely used for that function.

In my opinion the sidebar should not be used for all that you somehow can get in there, but rather it should be a context-less navigation system, in the case of PufferPanel, that only concerns top-level items as anything deeper down tends to have a context
Any context bound action and navigation in my opinion should not be on the sidebar as that means that on smaller screens, which hide the sidebar, these contextual actions are off screen and you would need to specifically communicate to a user that what they might be looking for is in this out-of-context slideout overlay
That is why I went with the bottom bar as seen in the images I linked, that can be confined to and kept in the context it is relevant for, avoiding the needs to slap a user in the face with some text popup explaining to them where they find half the stuff they need

Although at this point it may be a good idea to address ideas around extensibility, vuetify is a quite opinionated framework, but it is quite difficult to keep changes in sync with mainline puffer. I doubt many people will have this same problem its more so an artefact of my use of this in a commercial setting and willing to develop domain specific features further.

I can't say that i have seen any issues on this end so far
I also don't quite see where you find Vuetify to be all that opinionated, but i assume that that comes from the amount of CSS you need to write to redesign certain aspects of it, that is not to be put on Vuetify though, it provides a lot of ability to manipulate the design through SASS variables, the issue here is the theme system having to work at runtime where all SASS is already compiled down to CSS and using SASS variables is no longer possible (not sure that that is actually what you're talking about though)

As for the extensibility, I am toying with redesigns quietly in the background with my efforts primarily focused on glass morphism and neumorphism. I intend to showcase it at

With my rather limited knowledge of both glass morphism and neumorphism it sounds to me like this is less an extensibility concern and really more of a theming concern, which I already touched on above

Extensibility in regards to custom features being added without needing to modify the PufferPanel source code is something that I think should be doable, however that is (who would have thought) a major time investment and not something I'd consider part of this specific discussion and would rather work out/talk about in a separate discussion so that this one can stay focused on the general layout of the server page

[tommasobenatti]

I've just seen the screenshots, personally I prefer this design, is more clean, modern and easy to understand for everyone 👍

[greysilly7]

After looking at the screenshots it looks much better to the eyes I think it would be a good change