A few small changes that would improve the UI/UX on mobile/cell devices:
- Increase tap target size of hamburger menu icon.
On a mobile phone screen, the tap target of the menu icon is very small (only the dimensions of the icon) - it is hard to hit reliably and displayed very close to the [< back to previous app] in iOS - it's 50/50 which one you'll actually tap and how many taps it'll take to register.
I have to dismount my shelf mounted vrm monitor phone just to tap the menu button as it's not possible to tap the icon (on a stand in the corner, the wall gets in the way!)
If element class .vrm-nav-handle used padding instead of margin, it would have a larger tap target with no visual difference.
.vrm-header .vrm-nav-handle {
/* margin: 1rem 1rem 1rem 1rem; <-- existing style */
padding: 1rem 1rem 1rem 1rem; /* <-- suggested style */
}
- link installation name in header to installation dashboard
single tap access to dashboard, no need to open menu to get back to the dashboard
- Include Node-Red Dashboard link in top-level menu, and on VRM dashboard screen
For installations that have a node-red dashboard, it would be helpful to include a direct link within the top-level menu, saving tap (node-red), scroll down (node red tiles are huge), tap (dashboard tile). It would also be really helpful to have a linked icon displayed in the head of the VRM dashboard, for single tap access. (I'm sure SingalK users would appreciate this for SingalK too)
Image upload not working, so here's a link to an illustration:
https://www.dropbox.com/scl/fi/46hgnbd9kekt2ixkfkagn/vrm-dashboard-ux-improvemnts.jpg?rlkey=8iaskwpze08qg4as2lksh0jpv
