Item placement adjustment suggestions

[fhteagle]

What about moving the OpenEVSE logo into the shaded status block at the top, then moving the menu line to below the status block. This would do a few things:

1. Reduce redundant lines and space
2. Make it easier to reach the menu while operating a large phone screen with one hand, by placing the menu in the "middle" of the display, instead of the top right

Move the actual time clock to near or between the "Previous Event" and "Next Event" items?

Finally, pinning the entire status block to the top of the display (the way the OpenEVSE logo / menu icon bar is pinned now) makes sense to me. Thoughts?

[KipK]

I don't think it makes sense to place the burger menu somewhere else than on top of the page. As you can see the display is reactive, and modifying the size of the window will change the navbar to a burger. Also we already use the zone above the status for internal section nav with a breadcrumb, this would be a bit confusing to have double nav there.

I've just modified the padding for navbar and status & items to make those sections a bit thinner.

[fhteagle]

I do see the reactive navbar words changing to menu icon. When expanded, we have the navbar words at top, and breadcrumb between status box and rest of page. This means "what page are we on" indication to the user is indicated twice, and not in sync. Take the screenshot below. The nav bar words make it look like we are on "Configuration" page (because this is color highlighted), but the breadcrumb color highlights "System".

The menu structure is so simple, I think the breadcrumb is unneeded either way. I strongly believe nav menu under status is better for mobile phone use. However, if you really want the menu at the top, then maybe just get rid of the breadcrumb line altogether?

I am also thinking ahead to future issue reports from unskilled bug reporters, creating much confusion about what "page" the bug occurs on.................

[KipK]

The configuration staying active is a bug , I forgot to remove this part of code

[fhteagle]

New idea. Configuration is the only menu with submenu items, correct?

What about removing the breadcrumb line, and making the navbar say Configuration > SYSTEM when you are on that page?

[KipK]

Breadcrumb is a quick way to navigate in different sections of the configuration menu without having to open the burger menu each time.

[fhteagle]

New thought: Could we try to get away from pages entirely, and have everything on the main page? Or at most a "basic" and "advanced" page like some home routers do? Will svelte allow you to make the section blocks accordion open and closed? I think this could be the "most responsive" way to do it across all the different screen sizes and input types someone might control the OpenEVSE from.

[KipK]

This is just html + javascript we can do whatever we want. By the way there's no page at all in this app, it's full single page app. Content is only displayed according to where we are. There's a router inside that handle the navigator url & history and allows to hard refresh the actual section without getting back to home. I don't get your accordion nav, but if you want to emits deep change suggestions, I need some mockups of the idea on booth mobile + desktop. Without visual, it's all deaf talk :) Then we are sure we're talking about the same thing.

[fhteagle]

Yes, describing ideas in text clearly is difficult. Thank goodness your English is better than my French!!!!!!!

Accordion = Collapsible section

Example : https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_panel&stacked=h

Like how you made status block hide some items at first, but click the down arrow and get more. Same with sections.

I would love to see all the basic stuff on one "page" but collapsed, and you just expand what you want to interact with. Such as start with schedule collapsed, then click a down arrow to expand the schedule to be able to edit it. Advanced / safety / security stuff on second page, also with collapsing sections.

Hopefully that is a more clear description.

[KipK]

This would looks awfull on desktop no ? Also it's really 2010 design . But I'm always open for ideas :)

[fhteagle]

Only one way to find out if it looks awful or not lol. I like the idea of more stuff on one page with more scrolling instead of a greater number of pages with less stuff on them.

Maybe we try it with all the items organized down to just 2 pages with no hierarchy, then decide collapse or no collapse in a second step?

[KipK]

I'm building a new nav for mobile . it's not so bad on desktop either.

I'll then display only one box at a time, , need to find the best way to navigate between boxes without scrolling