[CSS] Future CSS for Network & Interfaces tab

[chromoxdor]

It gets a bit crowded but still manageable.
@TD-er, if you come up with another tab in the future, we have to probably change the way tabs are being displayed when width is limited.

[chromoxdor]

we have to probably change the way tabs are being displayed when width is limited.

Or we do sub tabs

[chromoxdor]

Or we do sub tabs

Just an idea:

[TD-er]

sub tabs may also be a solution. However I am not sure how it should be split.

[chromoxdor]

sub tabs may also be a solution. However I am not sure how it should be split.

Me neither...This is a problem for another day.
But in the future, this should be the way to go, I think.

[TD-er]

Maybe Hardware, Network and Interfaces are items you only need to setup once or rarely, so they fit under "config"

[chromoxdor]

Maybe Hardware, Network and Interfaces are items you only need to setup once or rarely, so they fit under "config"

Like:

Config
[General] · [Hardware] · [Network] · [Interfaces]

[chromoxdor]

to do this we need the submenu to be in the section part like so:

The rest i can do in css

Edit:
Demo

[chromoxdor]

Or my favourite:

Main	Config	Network	Devices	Rules	Tools
	[General] · [Hardware] · [Interfaces] · [Controller]

[tonhuisman]

Would it be doable (with minimal css, I mean 😅) to have a media-query from a certain width where Config/Hardware/Interfaces/Network will fit between Main and Controller, and with less width, have a Config tab with General/Hardware/Interfaces/Network ?

NB: Controller is IMHO more likely to be changed (often) than Network, so I would expect the Controller tab to be always visible, or maybe it should also 'sink' into the Config tab when the screen-width isn't sufficient.

[TD-er]

Or maybe those icons should move to the left when on a small device (e.g. mobile phone)

[chromoxdor]

Controller is IMHO more likely to be changed (often) than Network, so I would expect the Controller tab to be always visible,

You are right. I don't use any controller, but most people do, I guess.
So do we all agree on the arrangement of my last screenshot/gif?

Would it be doable (with minimal css, I mean 😅) to have a media-query from a certain width where Config/Hardware/Interfaces/Network will fit between Main and Controller, and with less width, have a Config tab with General/Hardware/Interfaces/Network ?

Everything is doable. 🙂
But it would mean more changes and I personally would find it a bit more confusing as an enduser.

[TD-er]

Let's sleep on it a bit more and maybe also see if it 'looks good' using some mockup.
Personally I don't think this is the right way as it may add a new layer which is sometimes present and not on other tabs.
So it breaks consistency when moving through tabs.

[chromoxdor]

Let's sleep on it a bit more

Sure. No rush...

maybe also see if it 'looks good' using some mockup.

Tell me what you need and I will mock it up for you :)

So it breaks consistency when moving through tabs.

In my opinion, having sub-tabs in some tabs but not others doesn't break consistency. It makes navigation easier than having an extra tab for each setting. The 'Tools' tab is a good example (e.g. 'Tools' > 'Advanced Settings').
We could btw also do it in this style, but we would lose the convenience of easy navigation, since the sub-tabs also serve as breadcrumbs.

[chromoxdor]

More ideas: