diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index b0d855c56f..e7c68b21e0 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -2601,6 +2601,9 @@ const CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection if (this.extedit || this.rowcolors) trEl.classList.add(!(tableEl.childNodes.length % 2) ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2'); + if (sectionname && (!this.anonymous || this.sectiontitle)) { + trEl.appendChild(E('td', {'class': 'td cbi-value-field cbi-value-first-field'}, [ (sectionname && (!this.anonymous || this.sectiontitle)) ? sectionname : null ])); + } for (let j = 0; j < max_cols && nodes[i].firstChild; j++) trEl.appendChild(nodes[i].firstChild); @@ -2641,10 +2644,17 @@ const CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection if (has_titles) { const trEl = E('tr', { - 'class': `tr cbi-section-table-titles ${anon_class}`, + 'class': `tr cbi-value-first-field cbi-section-table-titles ${anon_class}`, 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null, 'click': this.sortable ? ui.createHandlerFn(this, 'handleSort') : null }); + if (!this.anonymous || this.sectiontitle) { + trEl.appendChild(E('th', { + 'class': 'th cbi-section-table-cell', + 'data-sortable-row': this.sortable ? '' : null + }, (!this.anonymous || this.sectiontitle) ? _('Name') : null + )); + } for (let i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) { if (opt.modalonly) diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index d4d83f73dd..7d8922e6fc 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -2037,12 +2037,7 @@ form.inline { display: inline; margin-bottom: 0; } .cbi-section-table-titles.named::before, .cbi-section-table-descr.named::before, .cbi-section-table-row[data-title]::before { - content: attr(data-title) " "; - display: table-cell; - padding: 10px 10px 9px; - line-height: 18px; - font-weight: bold; - vertical-align: middle; + content: none; } .cbi-section-table-titles.named::before, @@ -2324,6 +2319,10 @@ div.cbi-value var, color: #0069d6; } +.cbi-value-first-field { + font-weight: bold; +} + div.cbi-value var[data-tooltip], .td.cbi-value-field var[data-tooltip], div.cbi-value var.cbi-tooltip-container, diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index 0251e4b050..27b598de04 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -1305,12 +1305,7 @@ td > table > tbody > tr > td, } .td[data-title]::before { - font-weight: bold; - display: none; - padding: .25rem 0; - content: attr(data-title) ":\20"; - text-align: left; - white-space: nowrap; + content: none; } .tr.placeholder .td[data-title]::before { @@ -1319,16 +1314,7 @@ td > table > tbody > tr > td, .tr[data-title]::before, .tr.cbi-section-table-titles.named::before { - font-weight: bold; - display: table-cell; - align-self: center; - flex: 1 1 5%; - padding: .25rem; - content: attr(data-title) "\20"; - text-align: center; - vertical-align: middle; - white-space: normal; - word-wrap: break-word; + content: none; } .cbi-rowstyle-1 { @@ -2161,6 +2147,10 @@ td.cbi-value-field var, color: #0069d6; } +.cbi-value-first-field { + font-weight: bold; +} + .cbi-optionals { padding: 1rem 1rem 0 1rem; border-top: thin solid #ccc; diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css index 8915523850..66841eee4a 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css @@ -305,10 +305,7 @@ tr.cbi-section-table-titles[data-title]::before { } tr[data-title]::before { - content: attr(data-title); - display: table-cell; - border-top: 1px solid var(--main-dark-color); - padding: .5em; + content: none; } th { @@ -1139,6 +1136,10 @@ textarea { flex: 1 1 100%; } +.cbi-value-first-field { + font-weight: bold; +} + .cbi-map-descr, .cbi-tab-descr, .cbi-section-descr, @@ -1794,20 +1795,7 @@ ul.errors { } td[data-title]::before { - content: attr(data-title) ": "; - white-space: nowrap; - font-weight: bold; - width: 40%; - overflow: hidden; - text-overflow: ellipsis; - position: absolute; - left: 0; - top: 0; - bottom: 0; - padding: .2em 0; - text-align: left; - display: inline-flex; - align-items: center; + content: none; } td[data-title]::after { diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index 889f120531..fb05910e36 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -985,12 +985,7 @@ div.cbi-optionals { } .td[data-title]::before { - content: attr(data-title) ":\20"; - font-weight: bold; - text-align: left; - display: none; - padding: 1px 0; - white-space: nowrap; + content: none; } .td[data-description]::after { @@ -1010,16 +1005,7 @@ div.cbi-optionals { .tr[data-title]::before, .tr.cbi-section-table-titles.named::before { - content: attr(data-title) "\20"; - font-weight: bold; - text-align: left; - display: table-cell; - align-self: center; - flex: 1 1 5%; - padding: .25em; - white-space: normal; - word-wrap: break-word; - vertical-align: middle; + content: none; } .cbi-value-helpicon img { @@ -1049,6 +1035,11 @@ div.cbi-optionals { color: #2222FF; } +.cbi-value-first-field { + font-weight: bold; +} + + ul.cbi-tabmenu { list-style-type: none; display: flex;