luci-mod-status: improve hide/show button placement and size

Align the hide/show buttons with the header of the section that
they control.  Make the buttons as tall as the header line, very
much improving accessibility on mobile.

Signed-off-by: Eric Fahlgren <redacted>

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
index 0505d126f4c51bd7a10d9f4901529324ed4e48a0..75f5ccb40779c18b8731f64308e605308e6e9b6c 100644 (file)
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
@@ -129,10 +129,11 @@ return view.extend({
 
                        rv.appendChild(E('div', { 'class': 'cbi-section', 'style': 'display: none' }, [
                                E('div', { 'class': 'cbi-title' },[
-                                       title != '' ? E('h3', title) : '',
-                                       E('div', [
+                                       E('h3', { 'style': 'display: flex; justify-content: space-between' }, [
+                                               title || '-',
                                                E('span', {
                                                        'class': includes[i].hide ? 'label notice' : 'label',
+                                                       'style': 'display: flex; align-items: center; justify-content: center; min-width: 4em',
                                                        'data-style': includes[i].hide ? 'active' : 'inactive',
                                                        'data-indicator': 'poll-status',
                                                        'data-clickable': 'true',