hestiacp
hestiacp copied to clipboard
hestiacp
[FEATURE] Mobile friendly Design
Is your feature request related to a problem? Please describe. Add css to create mobile friendly version.
Describe the solution you'd like Creation of mobile friendly css for use on mobile
Describe alternatives you've considered Using the interface as is on mobile it's complicated and is a bit hard to navigate through the system.
Additional context Nothing more to add...
Feel free to contribute and create an custom css file https://github.com/hestiacp/hestiacp/blob/main/CONTRIBUTING.md
The current "design" isn't realy suitable for it so it would mean a redesign...
Regarding discussion: #1921
Yes, we know we have to change the UI to improve it on mobile "devices". How ever I don't think the current "design" is suitable for it...
- The current HTML code is a mess table system are defined as div with a set width and so on. So that "crap" needs to be changed to a normal table few.
- Lack of client side error reporting / validation / Use Ajax for deleting records and so on
- General refresh of the design. I am personally not a a fan of the UI of Cyberpannel but an UI closer to the current "Hestia" is still possible with improvements
I am an designer noob. I really don't care if Hestia is via CLI but for the user "point" we still need it. I know Hestia is used by a lot designers so it would be nice if somebody is able to help...
@jaapmarcus @ScIT-Raphael I was checking the HTML and putting everything ready, and I saw the mess that is the code. There are various things to tackle in the design and in the HTML. I'll say also that if the changes on the UI are to be implemented, I will do my best to help, since I'm a PHP developer.
https://hestiacp.tlcd96.com/ (testing and experimenting with the UI for the new mobile/tablet/desktop experience)
- (the test pages and progress will be inputted here, and I will post here with updates regularly)
- the interface is in incorrect Portuguese-Portugal, but I can change it to be on English
(I'll start by phases since its easier to do it by that way (0.0.1 - topbar, 0.0.2 - header, etc...)
- There is no need for a new table to be created, but it would be great if that was the case.
- if a new table is created, a proper one, the params will need to be on the tr, this for Ajax
- For the Ajax question: we would need several things like an Ajax ready API, that we do not have.
- the AJAX JS code will need the timeout param to be high like: 3600s (60 minutes) for long tasks.
- (that is the case of lets encrypt certificate for example)
- (an user manual backup - not an automatic one)
- etc... Things I saw that I will consider doing in the test page(s) that I have:
- the AJAX JS code will need the timeout param to be high like: 3600s (60 minutes) for long tasks.
- the top menu, has to be redesigned (with proper HTML and CSS)
- a user menu instead of what's on the image:
- and I understand that a user menu (dropdown style) might sound a bit crazy, but it would be easier for the development of a mobile friendly panel, that I will try my best to give an example.
- a user menu instead of what's on the image:
Important
- I can try to keep the original design for desktop, but mobile will add more HTML to the page or change the way it is presented (CSS). Tell me your thoughts please, your input will change the way I'll change the UI example.
- tomorrow I'll tackle the 0.0.1 with your input if any (header top bar only first) (here it's 22:58 PM) (I was with people in my house that i was not expecting...)
Some suggestions for design elements:
- https://adminlte.io/
- https://adminlte.io/blog/free-admin-panels (some free admin panels for designing, I say one on the list that is paid, but I'll only want input in the regard of the parts that you want to see in the panel for inspiration only). Tell me what you'll like to see from that.
Note: Also I'll be doing this on my free time so don't expect a transition from old to new on a flash
@jaapmarcus @ScIT-Raphael I was checking the HTML and putting everything ready, and I saw the mess that is the code. There are various things to tackle in the design and in the HTML. I'll say also that if the changes on the UI are to be implemented, I will do my best to help, since I'm a PHP developer.
Tables width are currently hard code in each cell. If data usage goes over xx TB it goes over 2 lines... And so on. Not a real problem. But would nice to "solve" it self...
Adding extra html on top of it will only become worse..
For the Ajax question: we would need several things like an Ajax ready API, that we do not have. the AJAX JS code will need the timeout param to be high like: 3600s (60 minutes) for long tasks. (that is the case of lets encrypt certificate for example) (an user manual backup - not an automatic one) etc...
For longer task like creating backups are currently run on a backup. If you create an backup as user you only create an record in a file to schedule it.
the top menu, has to be redesigned (with proper HTML and CSS) a user menu instead of what's on the image: image and I understand that a user menu (dropdown style) might sound a bit crazy, but it would be easier for the development of a mobile friendly panel, that I will try my best to give an example.
For "Mobile" view we need to switch over to an drop down it does not make sense to keep it like this...
For desktop for me personally it may also go away / redesign but we have 1000 different users...
We have also an discord server: It makes comunication easier...
https://discord.gg/8b2HGNe8ne
I love the simplicity of Hestia - especially when onboarding junior devs and designers not comfortable with the CLI, so I'm very interested in seeing how RWD can be implemented.
Looking at the HTML and CSS, I don't see much of a 'mess', but I do see a lot of opportunity for a clean RWD transition - especially with something like BS. But really, most things appear to be solvable with plain old CSS media queries.
@jody-pm yes, many things are solvable with a @media query, others, like for example info for the domain/user/etc..., have to change for mobile, a menu, being compatible with mobile it's also another things that it's an add-on to the code. I'm already over the code and making changes on some template files to be compatible with mobile and tablet. After that, there are other things that also have to change. The listings are the most difficult things to change to be compatible. So on there, I've modified the design, for mobile, and for desktop. I've only have working about the first listing, the others need changes.
Also for the menus, and to put the information generated by them in their places, I'm considering also to make a global array with the information for each menu, where they go, and if you have permissions to see the same, and making a generator for each menu, to keep the information all in one place, and for ease of access to change it.
I can send screenshots of what is coming, but don't expect it to be a crystal new interface, the old one still exists and is used for desktop, and the new one it's only for devices with width less than a specific width that's in the code @media (max-width:1024px).
All this to say, that it's complicated to change the things, also with each update I need to see if I need to re-change the files, etc...
With the changes that I've done to my repo, that if accepted will be merged into this one, the old UI will be the same, changing only for mobile and tablet. This because I want to keep the current user base comfortable with the UI, and not for them to see a complete redesign of it that would confuse a lot of users.
You're doing great work, and I completely understand the considerations for the new design and the current limitations. This is not the greatest priority, anyway, as most of the time we're truly using larger viewports. But, still, the idea of having a clean mobile UI is exciting as we're starting to move away from other CPs.
You're right about not wanting to confuse the users, it might even be more prudent to slate this for a separate release.
I'll put one montage (with several situations), you'll see that it's not needed to put in a new slate... wait a bit, cause OneDrive it's taking it's time to download all the things I haven't downloaded.
https://hwi.cdgtech.one/#/ <- there is already an externally made addon that makes Hestia hostable on any domain within your install without port and is mobile friendly (they also have a vesta version). That being said, I do hope your changes make it into the official version because it looks pretty clean.
@AlecRust is working in a new implementation of this, i had one but since alec is working on a version that is different and making improvements in the code, my code and my view of a mobile friendly is not able to shine. So, with much sadness, I'll close the issue and I'll close the relevant branches in my fork.
Thanks for the patience and the support, but as I've said, my work is not relevant anymore.
The current mobile layout on 1.7.x is quite similar to your screenshots:
The main difference is that it's one set of view code shared across mobile and desktop, instead of separate view code loaded for mobile. I think it's important not to add the extra maintenance burden of separate view code for mobile.
Given this new mobile-first foundation for the UI, I (and I'm sure others) would certainly value any contributions you have to the main UI code, in order to get closer to your vision for the mobile UI.
