luci-theme-bootstrap: restyle wireless overview

[GeorgeSapkin]

Restyle wireless overview to make it clearer which SSIDs belong to which radios.

More of an RFC, as this is surely not the best way to do it. I wanted to do this purely through theming without breaking any other screens.

Before:

After:

Mobile:

Mobile (tiny screen):

Tested on 25.12-rc3 with desktop Firefox and Chromium, and mobile Firefox and Chrome on Android. Mobile rendering of ↳ seems to be device-dependent, so this bit might need some rethinking.

cc: @systemcrash

[systemcrash]

Might I suggest one of these
https://www.alt-codes.net/arrow_alt_codes.php

e.g. ↳ -> ↳

[GeorgeSapkin]

A more robust solution would be using an SVG. Maybe there's an open-source icon pack somewhere.

[systemcrash]

emoji are where it's at. SVG is an extra fetch.

[GeorgeSapkin]

That's the issue as these are rendered all over the place depending on the browser, OS and device. But I don't have any feelings about the implementation, so I'm up for any changes.

[GeorgeSapkin]

@systemcrash any other feedback? 👀 I think there must be a much better way to structure this.

[systemcrash]

Directly in the rendered HTML?

[GeorgeSapkin]

I was trying to avoid changing the HTML output so as not to break any other themes. What I was trying to ask was if there's a better way to structure the styles. As these look somewhat off to me.

[jow-]

While outside of the scope of your proposed change, I am wondering if it makes sense to keep the hierarchical structure (group by radio) of the wireless overview at all, especially considering modern wireless characteristics such as MLO etc.

Maybe it should be changed into a flat list of wireless network tiles/cards. The hardware details (radio name, channel, band) could be duplicated in each wireless card (e.g. a band indicator in the upper left corner).

Common operations such as "add radio" and "scan" could prompt for the phy (radio) to use if multiple are present.

[GeorgeSapkin]

I find the wireless overview page and sub-views confusing so I agree it could be improved. My biggest gripe is that device settings are in the interface dialog, even though they clearly are per device. Furthermore, some settings should be global (e.g. country for reg domain), yet there are at the interface level. This comes up on the forum from time to time where users try to set different device setting for interfaces on the same radio and it doesn't work. It would make sense to me that device settings would be separate.

I'm curios to find out why the interface is that way now, as I feel there's a hidden fence somewhere.

I haven't thought about this too much, so I can't really imagine a simpler UI, apart from having two separate lists: devices and interfaces, and splitting settings accordingly.

[systemcrash]

Yeah, it's not a trivial change. There's quite a bit of lifting going on in network and wifi settings. But the layout is not too difficult. I'm slaying dragons at the moment so I won't get to anything like this in a while.

[Self-Hosting-Group]

Thank you for this PR. It is well explained in the screenshot. Every time I use the wireless UI, it catches my eye, despite the otherwise great OpenWrt UI. I have investigated the cause of what I (and probably you too) consider to be the most annoying UI usability issues of this UI. For me, these are:

1. The icons/descriptions of different lengths should not be centred; left-aligned would be sufficient for me, even without the arrow symbol
2. The SVG icon for the WiFi device is smaller than that of the network, but the headings are highlighted (by size) in exactly the opposite way. Adjusting the wifi.svg icon to the size of the other would solve this
3. Maybe the Remove button could be easily reworded to Delete, following the tooltip wording and other UIs
4. Not clear separation of WiFi Networks and Devices. See the following

I think George Sapkin's other ideas in the last comment are great. I think that globally valid options, e.g. the country code, should be separated (tab?), but Networks/SSIDs and Devices could possibly be configured together as before, as both often need to be adjusted, but with a clearer separation/wording than before. However, one advantage with three-tabs would be that the UI would then be very similar to that of the (wired) Network -> Interfaces, which would make it easier for users. I tried something out:

Personally, I think that the first points mentioned (remove text-align: centre, fix icon size) could possibly be addressed first, and then the larger revision, which will probably also involve UCI changes, could be implemented later. This minor change would create immediately more clarity, especially considering that OpenWrt stands for Wireless ;-)

Just my two cents.