Dashboads and detecting the device they are being shown on

[Trying_to_learn]

Sorry if this is an easy peasy question. I'm wanting to learn.

Normally most of my dashboards as designed to be shown on a computer monitor.

Now and then I use a different device and the layout is changed.
Not too bad, but it is annoying as how Node-Red does it the layout can be confusing.

So.....

I was thinking I could re-lay the dashboard for use by said specific device.

But then I remembered (from use) that some web pages I access are re-structured when I use my mobile phone.
Something about the server asks the device something like "Who are you?" and when it is told, it re-lays the layout.

Dunno if that is viable in NR.

I'll stop now. I don't know what the answers will be and so can't know what the next question will be.

[hotNipi]

Dashboard stands on card layout which has 3 main principles.

1. A card is identifiable as a single, contained unit.
2. A card can stand alone, without relying on surrounding elements for context.
3. A card cannot merge with another card, or divide into multiple cards.
   Read more

I'd like to add one rule from my own experiences - it will be bad idea to make one card bigger than the smallest device it will be used will be able to show without need of scrolling

Those principles are there and show up every time you trying to do something different. Think about the card as biggest meaningful unit. Do not create relations between them.
Most easily you can get nice layout by doing all your cards with same size. But don't take this as the limitation.
You shouldn't design the dashboard, you should design cards.

If you followed principles the layout takes care of placing cards to meaningful positions on any device. Your cards don't try to talk with each other (in graphical means) and everything is perfectly fine.

All this does not mean that you absolutely should not design the dashboard. But doing so, it will be targeted to chosen screen size.

[Colin]

@hotNipi

Dashboard stands on card layout

How do the node-red tabs and groups relate to cards?

[hotNipi]

Tab is page (sort of, as whole thing is technically one page )
Card is group

[Colin]

Ok, thanks. Your suggestions are pretty much what I do anyway, but most of my dashboard requirements are rather simple so I haven't had any significant layout problems.

[hotNipi]

The point of making all cards with same size is that you have no need to struggle with such situations

[Trying_to_learn]

Thanks, but I don't know if that helps me with the question.

The dashboards were designed WAY before I was going to use a smaller screen device.

So would it be better to make a second dashboard for whom the layout fits better on the smaller screen?

[hotNipi]

The trick I have seen somebody have tried is to have different tabs made for different screens. I don't recommend it as you have double amount of everything. Starting from time and effort you will need to invest and ends with memory consumption and all related stuff you get with doubling the stuff.

[Bobo]

Hey @hotNipi, looking at your example above, is that a new css you are using in your template? Or something more complicated?

[hotNipi]

CSS applied on top of Node-RED theme (dark) using ui_template.

This is not my dashboard, just a testing rig to see how my widgets behave in different conditions.

[Bobo]

Thanks. Is it relatively simple to achieve the rounded "elements" (cards, whatever the correct terminology is, apologies)? Which properties do I need to look at?

[hotNipi]

It is simple. What is a bit complicated is to understand is where and why to apply the changes to achieve something you want. Especially if the css is not the thing you are working day by day.
What you are seeing does not include full solution ready to make nice dashboard. But may be helpful as starting point.
When I'm back at home I will share it.

[Bobo]

Thank you kind sir. I am running (with a few mods) an earlier template of yours that you shared some months ago.