luci-compat: update markup for CBI TableSections

Update legacy CBI markup to use actual table, tr, th and td elements
instead of using div element corresponding table classes.

Fixes compatibility with OpenWrt 2020 theme.

Ref: https://github.com/openwrt/luci/issues/4972
Signed-off-by: Jo-Philipp Wich <[email protected]>

diff --git a/modules/luci-compat/luasrc/view/cbi/cell_valuefooter.htm b/modules/luci-compat/luasrc/view/cbi/cell_valuefooter.htm
index bdd6bc968750c1773093477e2dc4e7ac7286f587..786ee43d1089710d0c7825eef03af2c92cda8c76 100644 (file)
--- a/modules/luci-compat/luasrc/view/cbi/cell_valuefooter.htm
+++ b/modules/luci-compat/luasrc/view/cbi/cell_valuefooter.htm
@@ -1,2 +1,2 @@
 </div>
-</div>
+</td>

diff --git a/modules/luci-compat/luasrc/view/cbi/cell_valueheader.htm b/modules/luci-compat/luasrc/view/cbi/cell_valueheader.htm
index db5c66850dff5c2564d672b5f829477ab463f507..31d1acee48aa788208f682838c3fb627b77cfcb3 100644 (file)
--- a/modules/luci-compat/luasrc/view/cbi/cell_valueheader.htm
+++ b/modules/luci-compat/luasrc/view/cbi/cell_valueheader.htm
@@ -3,7 +3,7 @@
        local descr = luci.util.trim(striptags(self.description))
        local ftype = self.typename or (self.template and self.template:gsub("^.+/", ""))
 -%>
-<div class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %><% if self.password then %> nowrap<% end %>"<%=
+<td class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %><% if self.password then %> nowrap<% end %>"<%=
        attr("data-name", self.option) ..
        ifattr(ftype and #ftype > 0, "data-widget", ftype) ..
        ifattr(title and #title > 0, "data-title", title, true) ..

diff --git a/modules/luci-compat/luasrc/view/cbi/tblsection.htm b/modules/luci-compat/luasrc/view/cbi/tblsection.htm
index c60915a6a689842288fb4b013b2903f309b22505..048eb22c417539e9209166c5ffca132e56e688b5 100644 (file)
--- a/modules/luci-compat/luasrc/view/cbi/tblsection.htm
+++ b/modules/luci-compat/luasrc/view/cbi/tblsection.htm
@@ -46,12 +46,12 @@ function render_titles()
                return
        end
 
-       %><div class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>><%
+       %><tr class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>><%
 
        local i, k
        for i, k in ipairs(self.children) do
                if not k.optional then
-                       %><div class="th cbi-section-table-cell"<%=
+                       %><th class="th cbi-section-table-cell"<%=
                                width(k) .. attr('data-widget', k.typename) %>><%
 
                        if k.titleref then
@@ -64,15 +64,15 @@ function render_titles()
                                %></a><%
                        end
 
-                       %></div><%
+                       %></th><%
                end
        end
 
        if self.sortable or self.extedit or self.addremove then
-               %><div class="th cbi-section-table-cell cbi-section-actions"></div><%
+               %><th class="th cbi-section-table-cell cbi-section-actions"></th><%
        end
 
-       %></div><%
+       %></tr><%
 
        rowcnt = rowcnt + 1
 end
@@ -82,25 +82,25 @@ function render_descriptions()
                return
        end
 
-       %><div class="tr cbi-section-table-descr <%=anonclass%>"><%
+       %><tr class="tr cbi-section-table-descr <%=anonclass%>"><%
 
        local i, k
        for i, k in ipairs(self.children) do
                if not k.optional then
-                       %><div class="th cbi-section-table-cell"<%=
+                       %><th class="th cbi-section-table-cell"<%=
                                width(k) .. attr("data-widget", k.typename) %>><%
 
                        write(k.description)
 
-                       %></div><%
+                       %></th><%
                end
        end
 
        if self.sortable or self.extedit or self.addremove then
-               %><div class="th cbi-section-table-cell cbi-section-actions"></div><%
+               %><th class="th cbi-section-table-cell cbi-section-actions"></th><%
        end
 
-       %></div><%
+       %></tr><%
 
        rowcnt = rowcnt + 1
 end
@@ -116,7 +116,7 @@ end
                <input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
        <%- end -%>
        <div class="cbi-section-descr"><%=self.description%></div>
-       <div class="table cbi-section-table">
+       <table class="table cbi-section-table">
                <%-
                        render_titles()
                        render_descriptions()
@@ -134,7 +134,7 @@ end
                                        valuefooter = "cbi/cell_valuefooter"
                                }
                -%>
-               <div class="tr cbi-section-table-row<%=colorclass%>" id="cbi-<%=self.config%>-<%=section%>"<%=sectiontitle%>>
+               <tr class="tr cbi-section-table-row<%=colorclass%>" id="cbi-<%=self.config%>-<%=section%>"<%=sectiontitle%>>
                        <%-
                                local node
                                for k, node in ipairs(self.children) do
@@ -145,7 +145,7 @@ end
                        -%>
 
                        <%- if self.sortable or self.extedit or self.addremove then -%>
-                               <div class="td cbi-section-table-cell nowrap cbi-section-actions">
+                               <td class="td cbi-section-table-cell nowrap cbi-section-actions">
                                        <div>
                                                <%- if self.sortable then -%>
                                                        <input class="btn cbi-button cbi-button-up" type="button" value="<%:Up%>" onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move up%>" />
@@ -162,17 +162,17 @@ end
                                                        <input class="btn cbi-button cbi-button-remove" type="submit" value="<%:Delete%>"  onclick="this.form.cbi_state='del-section'; return true" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" />
                                                <%- end -%>
                                        </div>
-                               </div>
+                               </td>
                        <%- end -%>
-               </div>
+               </tr>
                <%- end -%>
 
                <%- if isempty then -%>
-               <div class="tr cbi-section-table-row placeholder">
-                       <div class="td"><em><%:This section contains no values yet%></em></div>
-               </div>
+               <tr class="tr cbi-section-table-row placeholder">
+                       <td class="td"><em><%:This section contains no values yet%></em></td>
+               </tr>
                <%- end -%>
-       </div>
+       </table>
 
        <% if self.error then %>
                <div class="cbi-section-error">