Mobile Support / Responsive Design

[MarianRaphael]

Description

• Automatically adapt its layout based on the screen size and orientation (portrait or landscape).
• Be touch-friendly, with larger buttons and touchable elements.
• Prioritize essential information, ensuring it's easily accessible on smaller screens.
• Utilize collapsible menus and sections to minimize clutter and enhance navigation on mobile devices.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[walterjj]

I would like to suggest that the next Layout Manager could support a hierarchical model, so one could group components inside flex sublayouts - inside each other - in different combinations of row /columns (flex-direction:row and flex-direction:column) , which might be enough to meet most needs.

[MarianRaphael]

FYI @joepavitt

[joepavitt]

Thanks @walterjj! I've just pushed the foundational model for Dashboard 2.0 in this PR which includes a new layout architecture vs. Dashboard 1.0

Each "Page" within the Dashboard UI's will have a new option - "Layout". We then have a /layouts folder with a collection of different layout options.

Each layout takes the collection of widgets passed to the given page and that "Layout Manager" then chooses how to display said widgets.

My thinking here is that by having multiple "layout" options, we could have something super simple to get 80% of people off the ground, through to more complex configurations that allow for customisations but may have a slightly steeper on-boarding curve.

[walterjj]

Good @joepavitt! may be if a ui_group can have a also a "parent" property, or a "group" property instead of "tab" or "page" , that future layouts could use these properties in order to implement a nested hierarchy!

[thebaldgeek]

A critical aspect of mobile / responsive design for my existing Node-RED dashboard is for the table gadget to switch to card view on mobile sized screens.

Tables with more than 2-3 columns that are more than 20 or so wide are simply too wide to view on a mobile sized view port. As the view port becomes more portrait vs landscape, to have the table gadget switch to a card view becomes critical to eliminate horizontal scrolling. See the last three Tweets for an example: https://twitter.com/thebaldgeek/status/1664755773329780736?s=20

[joepavitt]

Thanks for the insight @thebaldgeek - will be sure to make that a feature

[joepavitt]

Generally speaking, we have responsive design already now in place. With the specific request above re: tables, we have https://github.com/FlowFuse/node-red-dashboard/issues/76 opened to cover this.