diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2018-05-28 14:57:54 +0200 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2018-05-28 15:18:45 +0200 |
| commit | 067d7dc9f708d5ebeda1072fb6dc82e960de0d81 (patch) | |
| tree | 10910cfcfc1d86a3f88d8b3239316564489585ea | |
| parent | 79c82237e373b9d9a101858e0cab96e4bd548f0c (diff) | |
treewide: convert HTML tables to div
Mostly convert HTML tables to div based markup to allow for easier styling
in the future. Also change JS accessor code accordingly.
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
45 files changed, 1357 insertions, 1462 deletions
diff --git a/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm b/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm index b4b62db5f..424a72f6f 100644 --- a/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm +++ b/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm @@ -51,37 +51,37 @@ table.cbi-section-table td, <%- end %> <div class="cbi-section-descr"><%=self.description%></div> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> <%- if self.sectionhead then -%> - <th class="cbi-section-table-cell"><%=self.sectionhead%></th> + <div class="th cbi-section-table-cell"><%=self.sectionhead%></div> <%- else -%> - <th> </th> + <div class="th"> </div> <%- end -%> <%- for i, k in pairs(self.children) do -%> - <th class="cbi-section-table-cell"<%=width(k)%>> + <div class="th cbi-section-table-cell"<%=width(k)%>> <%-=k.title-%> - </th> + </div> <%- end -%> - </tr> + </div> <%- local isempty = true for i, k in ipairs(self:cfgsections()) do section = k isempty = false scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" } -%> - <tr class="cbi-section-table-row" id="cbi-<%=self.config%>-<%=section%>"> - <th><%=k%></th> + <div class="tr cbi-section-table-row" id="cbi-<%=self.config%>-<%=section%>"> + <div class="th"><%=k%></div> <%- for k, node in ipairs(self.children) do node:render(section, scope or {}) end if not scope.cbid:match("adb_src_cat") then -%> - <td class="cbi-value-field"> </td> + <div class="td cbi-value-field"> </div> <%- end -%> - </tr> + </div> <%- end -%> - </table> + </div> </div> </fieldset> diff --git a/applications/luci-app-advanced-reboot/luasrc/view/advanced_reboot/advanced_reboot.htm b/applications/luci-app-advanced-reboot/luasrc/view/advanced_reboot/advanced_reboot.htm index 0629c84b3..5f7429dfd 100644 --- a/applications/luci-app-advanced-reboot/luasrc/view/advanced_reboot/advanced_reboot.htm +++ b/applications/luci-app-advanced-reboot/luasrc/view/advanced_reboot/advanced_reboot.htm @@ -21,24 +21,24 @@ <%- if device_name then -%> <fieldset class="cbi-section"> <legend><%=device_name%><%: Partitions%></legend> - <table class="cbi-section-table" id="partitions"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Partition%></th> - <th class="cbi-section-table-cell"><%:Status%></th> - <th class="cbi-section-table-cell"><%:Firmware/OS (Kernel)%></th> - <th class="cbi-section-table-cell"><%:Action%></th> - </tr> - <tr class="cbi-section-table-row"> - <td> + <div class="table cbi-section-table" id="partitions"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Partition%></div> + <div class="th cbi-section-table-cell"><%:Status%></div> + <div class="th cbi-section-table-cell"><%:Firmware/OS (Kernel)%></div> + <div class="th cbi-section-table-cell"><%:Action%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td"> <%=string.format("%X", boot_envvar1_partition_one)%> - </td> - <td> + </div> + <div class="td"> <%- if boot_envvar1_partition_one == current_partition then -%><%:Current%><%- else -%><%:Alternative%><%- end -%> - </td> - <td> + </div> + <div class="td"> <%=partition_one_os%> - </td> - <td> + </div> + <div class="td"> <%- if boot_envvar1_partition_one == current_partition then -%> <form method="post" action="<%=url('admin/system/advanced_reboot/reboot')%>"> <input type="hidden" name="token" value="<%=token%>" /> @@ -50,19 +50,19 @@ <input id="altreboot-button" type="submit" class="cbi-button cbi-button-apply" value="<%:Reboot to alternative partition...%>" /> </form> <%- end -%> - </td> - </tr> - <tr class="cbi-section-table-row"> - <td> + </div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td"> <%=string.format("%X", boot_envvar1_partition_two)%> - </td> - <td> + </div> + <div class="td"> <%- if boot_envvar1_partition_two == current_partition then -%><%:Current%><%- else -%><%:Alternative%><%- end -%> - </td> - <td> + </div> + <div class="td"> <%=partition_two_os%> - </td> - <td> + </div> + <div class="td"> <%- if boot_envvar1_partition_two == current_partition then -%> <form method="post" action="<%=url('admin/system/advanced_reboot/reboot')%>"> <input type="hidden" name="token" value="<%=token%>" /> @@ -74,9 +74,9 @@ <input id="altreboot-button" type="submit" class="cbi-button cbi-button-apply" value="<%:Reboot to alternative partition...%>" /> </form> <%- end -%> - </td> - </tr> - </table> + </div> + </div> + </div> </fieldset> <%- else -%> <p class="alert-message warning"><%:Warning: This system does not have two partitions!%></p> diff --git a/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm b/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm index 946828953..ab25f862b 100644 --- a/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm +++ b/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm @@ -7,29 +7,21 @@ if (st && tb && tx) { /* clear all rows */ - while( tb.rows.length > 1 ) - tb.deleteRow(1); + while (tb.firstElementChild !== tb.lastElementChild) + tb.removeChild(tb.lastElementChild); - for( var i = 0; i < st.leases.length; i++ ) + for (var i = 0; i < st.leases.length; i++) { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = st.leases[i].addr; - tr.insertCell(-1).innerHTML = String.format('%t', st.leases[i].age); + tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ + E('<div class="td">', st.leases[i].addr), + E('<div class="td">', '%t'.format(st.leases[i].age)) + ])); } - if( tb.rows.length == 1 ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 2; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } + if (tb.firstElementChild === tb.lastElementChild) + tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); - if( st.uid == '00:00:00:00:00:00:00:00' ) + if (st.uid == '00:00:00:00:00:00:00:00') tx.innerHTML = '<%:The AHCP Service is not running.%>'; else tx.innerHTML = String.format('<%:The AHCP Service is running with ID %s.%>', st.uid); @@ -41,13 +33,13 @@ <fieldset class="cbi-section"> <legend><%:Active AHCP Leases%></legend> <p id="ahcpd_status_text"></p> - <table class="cbi-section-table" id="ahcpd_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Address%></th> - <th class="cbi-section-table-cell"><%:Age%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="5"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="ahcpd_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Address%></div> + <div class="th cbi-section-table-cell"><%:Age%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> diff --git a/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm b/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm index 9f644ba07..fb40335f9 100644 --- a/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm +++ b/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm @@ -79,23 +79,23 @@ <% for i, plan in pairs(ast.dialplan.plans()) do %> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th style="text-align: left; padding: 3px" class="cbi-section-table-cell"> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div style="text-align: left; padding: 3px" class="th cbi-section-table-cell"> <big>Dialplan <em><%=plan.name%></em></big> - </th> - <td> + </div> + <div class="td"> <a href="<%=url('admin/asterisk/dialplans')%>?delplan=<%=plan.name%>"> <img style="border:none" alt="Remove this dialplan" title="Remove this dialplan" src="/luci-static/resources/cbi/remove.gif" /> </a> - </td> - </tr> + </div> + </div> <!-- dialzones --> <% local zones_used = { }; local row = 0 %> <% for i, zone in ipairs(plan.zones) do zones_used[zone.name] = true %> - <tr class="cbi-section-table-row <%=rowstyle(row)%>"> - <td style="text-align: left; padding: 3px" class="cbi-section-table-cell"> + <div class="tr cbi-section-table-row <%=rowstyle(row)%>"> + <div style="text-align: left; padding: 3px" class="td cbi-section-table-cell"> <strong>└ Dialzone <em><%=zone.name%></em></strong> (<%=zone.description%>) <p style="padding-left: 1em; margin-bottom:0"> Lines: @@ -107,24 +107,24 @@ Matches: <%=format_matches(zone)%> </p> - </td> - <td style="width:5%" class="cbi-value-field"> + </div> + <div style="width:5%" class="td cbi-value-field"> <a href="<%=url('admin/asterisk/dialplans/out', zone.name)%>"> <img style="border:none" alt="Edit dialzone" title="Edit dialzone" src="/luci-static/resources/cbi/edit.gif" /> </a> <a href="<%=url('admin/asterisk/dialplans')%>?delzone.<%=plan.name%>=<%=zone.name%>"> <img style="border:none" alt="Remove from this dialplan" title="Remove from this dialplan" src="/luci-static/resources/cbi/remove.gif" /> </a> - </td> - </tr> + </div> + </div> <% row = row + 1; end %> <!-- /dialzones --> <!-- voicemail --> <% local boxes_used = { } %> <% for ext, box in luci.util.kspairs(plan.voicemailboxes) do boxes_used[box.id] = true %> - <tr class="cbi-section-table-row <%=rowstyle(row)%>"> - <td style="text-align: left; padding: 3px" class="cbi-section-table-cell"> + <div class="tr cbi-section-table-row <%=rowstyle(row)%>"> + <div style="text-align: left; padding: 3px" class="td cbi-section-table-cell"> <strong>└ Voicemailbox <em><%=box.id%></em></strong> (<%=box.name%>) <p style="padding-left: 1em; margin-bottom:0"> Owner: <%=box.name%> | @@ -132,44 +132,44 @@ Pager: <%=#box.page > 0 and box.page or 'n/a'%><br /> Matches: <%=format_matches(ext)%> </p> - </td> - <td style="width:5%" class="cbi-value-field"> + </div> + <div style="width:5%" class="td cbi-value-field"> <a href="<%=url('admin/asterisk/voicemail/mailboxes')%>"> <img style="border:none" alt="Manage mailboxes ..." title="Manage mailboxes ..." src="/luci-static/resources/cbi/edit.gif" /> </a> <a href="<%=url('admin/asterisk/dialplans')%>?delvbox.<%=plan.name%>=<%=ext%>"> <img style="border:none" alt="Remove from this dialplan" title="Remove from this dialplan" src="/luci-static/resources/cbi/remove.gif" /> </a> - </td> - </tr> + </div> + </div> <% row = row + 1; end %> <!-- /voicemail --> <!-- meetme --> <% local rooms_used = { } %> <% for ext, room in luci.util.kspairs(plan.meetmerooms) do rooms_used[room.room] = true %> - <tr class="cbi-section-table-row <%=rowstyle(row)%>"> - <td style="text-align: left; padding: 3px" class="cbi-section-table-cell"> + <div class="tr cbi-section-table-row <%=rowstyle(row)%>"> + <div style="text-align: left; padding: 3px" class="td cbi-section-table-cell"> <strong>└ MeetMe Room <em><%=room.room%></em></strong> <% if room.description and #room.description > 0 then %> (<%=room.description%>)<% end %> <p style="padding-left: 1em; margin-bottom:0"> Matches: <%=format_matches(ext)%> </p> - </td> - <td style="width:5%" class="cbi-value-field"> + </div> + <div style="width:5%" class="td cbi-value-field"> <a href="<%=url('admin/asterisk/meetme/rooms')%>"> <img style="border:none" alt="Manage conferences ..." title="Manage conferences ..." src="/luci-static/resources/cbi/edit.gif" /> </a> <a href="<%=url('admin/asterisk/dialplans')%>?delmeetme.<%=plan.name%>=<%=ext%>"> <img style="border:none" alt="Remove from this dialplan" title="Remove from this dialplan" src="/luci-static/resources/cbi/remove.gif" /> </a> - </td> - </tr> + </div> + </div> <% row = row + 1; end %> <!-- /meetme --> - <tr class="cbi-section-table-row"> - <td style="text-align: left; padding: 3px" class="cbi-section-table-cell" colspan="2"> + <div class="tr cbi-section-table-row"> + <div style="text-align: left; padding: 3px" class="td cbi-section-table-cell" colspan="2"> <hr style="margin-bottom:0.5em; border-width:0 0 1px 0" /> Add Dialzone:<br /> @@ -213,10 +213,10 @@ <br /><br /> <input type="submit" class="cbi-button cbi-button-add" value="Add item »" title="Add item ..."/> - </td> - </tr> + </div> + </div> - </table> + </div> <div class="cbi-section-create cbi-tblsection-create"></div> </div> diff --git a/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm b/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm index ffdbbcf35..e48da608a 100644 --- a/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm +++ b/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm @@ -66,59 +66,59 @@ <!-- tblsection --> <fieldset class="cbi-section" id="cbi-asterisk-sip"> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th style="text-align: left; padding: 3px" class="cbi-section-table-cell" colspan="6"> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div style="text-align: left; padding: 3px" class="th cbi-section-table-cell" colspan="6"> <h3>Dialzone Overview</h3> - </th> - </tr> - - <tr class="cbi-section-table-descr"> - <th style="width: 5%; text-align:right" class="cbi-section-table-cell">Name</th> - <th style="width: 5%; text-align:right" class="cbi-section-table-cell">Prepend</th> - <th style="width: 20%; text-align:left" class="cbi-section-table-cell">- Match</th> - <th style="text-align:left" class="cbi-section-table-cell">Trunk</th> - <th style="width: 35%; text-align:left" class="cbi-section-table-cell">Description</th> - <th style="width: 4%; text-align:left" class="cbi-section-table-cell"></th> - </tr> + </div> + </div> + + <div class="tr cbi-section-table-descr"> + <div style="width: 5%; text-align:right" class="th cbi-section-table-cell">Name</div> + <div style="width: 5%; text-align:right" class="th cbi-section-table-cell">Prepend</div> + <div style="width: 20%; text-align:left" class="th cbi-section-table-cell">- Match</div> + <div style="text-align:left" class="th cbi-section-table-cell">Trunk</div> + <div style="width: 35%; text-align:left" class="th cbi-section-table-cell">Description</div> + <div style="width: 4%; text-align:left" class="th cbi-section-table-cell"></div> + </div> <% for i, rule in pairs(ast.dialzone.zones()) do %> - <tr class="cbi-section-table-row <%=rowstyle(i)%>"> - <td style="text-align:right" class="cbi-value-field"> + <div class="tr cbi-section-table-row <%=rowstyle(i)%>"> + <div style="text-align:right" class="td cbi-value-field"> <%=rule.name%> - </td> - <td style="text-align:right" class="cbi-value-field"> + </div> + <div style="text-align:right" class="td cbi-value-field"> <% for _ in ipairs(rule.matches) do %> <%=rule.addprefix and digit_pattern(rule.addprefix)%> <br /> <% end %> - </td> - <td style="text-align:left" class="cbi-value-field"> + </div> + <div style="text-align:left" class="td cbi-value-field"> <% for _, m in ipairs(rule.matches) do %> <%=rule.localprefix and "%s " % digit_pattern(rule.localprefix)%> <%=digit_pattern(m)%><br /> <% end %> - </td> - <td style="text-align:left" class="cbi-value-field"> + </div> + <div style="text-align:left" class="td cbi-value-field"> <%=ast.tools.hyperlinks( rule.trunks, function(v) return luci.dispatcher.build_url("admin", "asterisk", "trunks", "%s") % v:lower() end )%> - </td> - <td style="text-align:left" class="cbi-value-field"> + </div> + <div style="text-align:left" class="td cbi-value-field"> <%=rule.description or rule.name%> - </td> - <td style="text-align:left" class="cbi-value-field"> + </div> + <div style="text-align:left" class="td cbi-value-field"> <a href="<%=url('admin/asterisk/dialplans/out', rule.name)%>"> <img style="border:none" alt="Edit entry" title="Edit entry" src="/luci-static/resources/cbi/edit.gif" /> </a> <a href="<%=url('admin/asterisk/dialplans/zones')%>?delzone=<%=rule.name%>"> <img style="border:none" alt="Delete entry" title="Delete entry" src="/luci-static/resources/cbi/remove.gif" /> </a> - </td> - </tr> + </div> + </div> <% end %> - </table> + </div> <div class="cbi-section-create cbi-tblsection-create"></div> </div> <br /> @@ -133,26 +133,26 @@ <br /><span style="color:red">Invalid name given!</span><br /> <% end -%> - <table> - <tr> - <td style="padding:3px"> + <div class="table"> + <div class="tr"> + <div class="td" style="padding:3px"> <label for="create1">1) Name</label><br /> <input type="text" class="cbi-section-create-name" id="create1" name="newzone_name" style="width:200px" /> <br /><br /> <label for="create2">2) Number Match</label><br /> <input type="text" class="cbi-section-create-name" id="create2" name="newzone_match" style="width:200px" /> - </td> - <td style="padding:3px"> + </div> + <div class="td" style="padding:3px"> <label for="create3">3) Trunks</label><br /> <select class="cbi-input-select" multiple="multiple" id="create3" name="newzone_uses" size="4" style="width:200px"> <% for i, t in ipairs(find_trunks()) do %> <option value="<%=t[1]%>"><%=t[2]%></option> <% end %> </select> - </td> - </tr> - </table> + </div> + </div> + </div> <br /> <input type="submit" class="cbi-button cbi-button-add" name="newzone" value="Add entry" title="Add entry"/> diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm index b3079f3a4..279b6e06d 100644 --- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm +++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm @@ -20,58 +20,58 @@ -%> <div class="cbi-section-create cbi-tblsection-create"> <br /> - <table class="cbi-section-table" style="width:810px; margin-left:5px"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" colspan="8"><%:New port forward%>:</th> - </tr> - <tr class="cbi-section-table-descr"> - <th class="cbi-section-table-cell"><%:Name%></th> - <th class="cbi-section-table-cell"><%:Protocol%></th> - <th class="cbi-section-table-cell"><%:External zone%></th> - <th class="cbi-section-table-cell"><%:External port%></th> - <th class="cbi-section-table-cell"><%:Internal zone%></th> - <th class="cbi-section-table-cell"><%:Internal IP address%></th> - <th class="cbi-section-table-cell"><%:Internal port%></th> - <th class="cbi-section-table-cell"></th> - </tr> - <tr class="cbi-section-table-row"> - <td class="cbi-section-table-cell"> + <div class="table cbi-section-table" style="width:810px; margin-left:5px"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell" colspan="8"><%:New port forward%>:</div> + </div> + <div class="tr cbi-section-table-descr"> + <div class="th cbi-section-table-cell"><%:Name%></div> + <div class="th cbi-section-table-cell"><%:Protocol%></div> + <div class="th cbi-section-table-cell"><%:External zone%></div> + <div class="th cbi-section-table-cell"><%:External port%></div> + <div class="th cbi-section-table-cell"><%:Internal zone%></div> + <div class="th cbi-section-table-cell"><%:Internal IP address%></div> + <div class="th cbi-section-table-cell"><%:Internal port%></div> + <div class="th cbi-section-table-cell"></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td cbi-section-table-cell"> <input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New port forward%>" /> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto"> <option value="tcp udp">TCP+UDP</option> <option value="tcp">TCP</option> <option value="udp">UDP</option> <option value="other"><%:Other...%></option> </select> - </td> - <td class="cbi-section-table-cell" style="width:55px"> + </div> + <div class="td cbi-section-table-cell" style="width:55px"> <select class="cbi-input-select" id="_newfwd.extzone" name="_newfwd.extzone"> <% for _, z in ipairs(ezl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" data-type="portrange" data-optional="true" /> - </td> - <td class="cbi-section-table-cell" style="width:55px"> + </div> + <div class="td cbi-section-table-cell" style="width:55px"> <select class="cbi-input-select" id="_newfwd.intzone" name="_newfwd.intzone"> <% for _, z in ipairs(izl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newfwd.intaddr" name="_newfwd.intaddr" data-type="host" data-optional="true"<%= ifattr(#keys > 0, "data-choices", {keys, vals}) %>/> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" data-type="portrange" data-optional="true" /> - </td> - <td class="cbi-section-table-cell"> + </div> + <div class="td cbi-section-table-cell"> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" /> - </td> - </tr> - </table> + </div> + </div> + </div> <script type="text/javascript">//<![CDATA[ cbi_bind(document.getElementById('_newfwd.extport'), 'blur', diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm index b06fac3de..c99ecaca3 100644 --- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm +++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm @@ -8,71 +8,71 @@ <div class="cbi-section-create cbi-tblsection-create"> <% if wz then %> <br /> - <table class="cbi-section-table" style="margin-left:5px"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</th> - </tr> - <tr class="cbi-section-table-descr"> - <th class="cbi-section-table-cell"><%:Name%></th> - <th class="cbi-section-table-cell"><%:Protocol%></th> - <th class="cbi-section-table-cell"><%:External port%></th> - <th class="cbi-section-table-cell"></th> - </tr> - <tr class="cbi-section-table-row"> - <td class="cbi-section-table-cell" style="width:130px"> + <div class="table cbi-section-table" style="margin-left:5px"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</div> + </div> + <div class="tr cbi-section-table-descr"> + <div class="th cbi-section-table-cell"><%:Name%></div> + <div class="th cbi-section-table-cell"><%:Protocol%></div> + <div class="th cbi-section-table-cell"><%:External port%></div> + <div class="th cbi-section-table-cell"></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td cbi-section-table-cell" style="width:130px"> <input type="text" class="cbi-input-text" id="_newopen.name" name="_newopen.name" placeholder="<%:New input rule%>" /> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <select class="cbi-input-select" id="_newopen.proto" name="_newopen.proto"> <option value="tcp udp">TCP+UDP</option> <option value="tcp">TCP</option> <option value="udp">UDP</option> <option value="other"><%:Other...%></option> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" /> - </td> - <td class="cbi-section-table-cell left"> + </div> + <div class="td cbi-section-table-cell left"> <input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" /> - </td> - </tr> - </table> + </div> + </div> + </div> <% end %> <% if #zones > 1 then %> - <table class="cbi-section-table" style="margin-left:5px"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</th> - </tr> - <tr class="cbi-section-table-descr"> - <th class="cbi-section-table-cell"><%:Name%></th> - <th class="cbi-section-table-cell"><%:Source zone%></th> - <th class="cbi-section-table-cell"><%:Destination zone%></th> - <th class="cbi-section-table-cell"></th> - </tr> - <tr class="cbi-section-table-row"> - <td class="cbi-section-table-cell" style="width:130px"> + <div class="table cbi-section-table" style="margin-left:5px"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</div> + </div> + <div class="tr cbi-section-table-descr"> + <div class="th cbi-section-table-cell"><%:Name%></div> + <div class="th cbi-section-table-cell"><%:Source zone%></div> + <div class="th cbi-section-table-cell"><%:Destination zone%></div> + <div class="th cbi-section-table-cell"></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td cbi-section-table-cell" style="width:130px"> <input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New forward rule%>" /> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src"> <% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option> <%- end %> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest"> <% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option> <%- end %> </select> - </td> - <td class="cbi-section-table-cell left"> + </div> + <div class="td cbi-section-table-cell left"> <input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" /> - </td> - </tr> - </table> + </div> + </div> + </div> <% else %> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" /> <% end %> diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm index 0a5913fc0..b2775cf69 100644 --- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm +++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm @@ -15,49 +15,49 @@ <div class="cbi-section-create cbi-tblsection-create"> <% if #zones > 1 then %> <br /> - <table class="cbi-section-table" style="width:700px; margin-left:5px"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell left" colspan="6"><%:New source NAT%>:</th> - </tr> - <tr class="cbi-section-table-descr"> - <th class="cbi-section-table-cell"><%:Name%></th> - <th class="cbi-section-table-cell"><%:Source zone%></th> - <th class="cbi-section-table-cell"><%:Destination zone%></th> - <th class="cbi-section-table-cell"><%:To source IP%></th> - <th class="cbi-section-table-cell"><%:To source port%></th> - <th class="cbi-section-table-cell"></th> - </tr> - <tr class="cbi-section-table-row"> - <td class="cbi-section-table-cell"> + <div class="table cbi-section-table" style="width:700px; margin-left:5px"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell left" colspan="6"><%:New source NAT%>:</div> + </div> + <div class="tr cbi-section-table-descr"> + <div class="th cbi-section-table-cell"><%:Name%></div> + <div class="th cbi-section-table-cell"><%:Source zone%></div> + <div class="th cbi-section-table-cell"><%:Destination zone%></div> + <div class="th cbi-section-table-cell"><%:To source IP%></div> + <div class="th cbi-section-table-cell"><%:To source port%></div> + <div class="th cbi-section-table-cell"></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td cbi-section-table-cell"> <input type="text" class="cbi-input-text" id="_newsnat.name" name="_newsnat.name" placeholder="<%:New SNAT rule%>" /> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <select class="cbi-input-text" id="_newsnat.src" name="_newsnat.src"> <% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option> <%- end %> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <select class="cbi-input-text" id="_newsnat.dest" name="_newsnat.dest"> <% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option> <%- end %> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newsnat.dip" name="_newsnat.dip" placeholder="<%:Do not rewrite%>" data-type="ip4addr" data-optional="true"<%= ifattr(#keys > 0, "data-choices", { keys, vals }) %> /> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newsnat.dport" name="_newsnat.dport" placeholder="<%:Do not rewrite%>" data-type="portrange" data-optional="true" /> - </td> - <td class="cbi-section-table-cell"> + </div> + <div class="td cbi-section-table-cell"> <input type="submit" class="cbi-button cbi-button-link" name="_newsnat.submit" value="<%:Add and edit...%>" /> - </td> - </tr> - </table> + </div> + </div> + </div> <% else %> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" /> <% end %> diff --git a/applications/luci-app-ltqtapi/luasrc/view/telephony_status.htm b/applications/luci-app-ltqtapi/luasrc/view/telephony_status.htm index d861ef9fc..2fd7168bd 100644 --- a/applications/luci-app-ltqtapi/luasrc/view/telephony_status.htm +++ b/applications/luci-app-ltqtapi/luasrc/view/telephony_status.htm @@ -5,13 +5,12 @@ XHR.poll(5, '<%=url('admin/telephony/status')%>', null, var tb = document.getElementById('telephony_status_table'); if (st && tb) { - tb.deleteRow(1); - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-1'; - - tr.insertCell(-1).innerHTML = st.status; - tr.insertCell(-1).innerHTML = st.line1; - tr.insertCell(-1).innerHTML = st.line2; + tb.removeChild(tb.firstChild); + tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-1">', [ + E('<div class="td">', st.status), + E('<div class="td">', st.line1), + E('<div class="td">', st.line2) + ])); } } ); @@ -19,14 +18,14 @@ XHR.poll(5, '<%=url('admin/telephony/status')%>', null, <fieldset class="cbi-section"> <legend><%:Current Telephony State%></legend> - <table class="cbi-section-table" id="telephony_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Uplink%></th> - <th class="cbi-section-table-cell"><%:Port1%></th> - <th class="cbi-section-table-cell"><%:Port2%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="5"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="telephony_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Uplink%></div> + <div class="th cbi-section-table-cell"><%:Port1%></div> + <div class="th cbi-section-table-cell"><%:Port2%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> diff --git a/applications/luci-app-noddos/luasrc/view/noddos/clients.htm b/applications/luci-app-noddos/luasrc/view/noddos/clients.htm index f2fb9312a..4caf3e04e 100644 --- a/applications/luci-app-noddos/luasrc/view/noddos/clients.htm +++ b/applications/luci-app-noddos/luasrc/view/noddos/clients.htm @@ -38,70 +38,70 @@ <fieldset class="cbi-section"> <legend><%:Recognized Clients%></legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IPv4%></th> - <th class="cbi-section-table-cell"><%:MAC%></th> - <th class="cbi-section-table-cell"><%:Manufacturer%></th> - <th class="cbi-section-table-cell"><%:Model%></th> - <th class="cbi-section-table-cell"><%:Class%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Hostname%></div> + <div class="th cbi-section-table-cell"><%:IPv4%></div> + <div class="th cbi-section-table-cell"><%:MAC%></div> + <div class="th cbi-section-table-cell"><%:Manufacturer%></div> + <div class="th cbi-section-table-cell"><%:Model%></div> + <div class="th cbi-section-table-cell"><%:Class%></div> + </div> <% for i,v in ipairs(devdump) do if v.DeviceProfileUuid ~= "" then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=v.Hostname%></td> - <td class="cbi-value-field"><%=v.Ipv4Address%></td> - <td class="cbi-value-field"><a href="/cgi-bin/clientdetails?mac=<%=v.MacAddress%>"><%=v.MacAddress%></a></td> - <td class="cbi-value-field"><%=devicevalues[v.DeviceProfileUuid].Manufacturer%></td> - <td class="cbi-value-field"><%=devicevalues[v.DeviceProfileUuid].Model%></td> - <td class="cbi-value-field"><%=devicevalues[v.DeviceProfileUuid].ThingClass%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td cbi-value-field"><%=v.Hostname%></div> + <div class="td cbi-value-field"><%=v.Ipv4Address%></div> + <div class="td cbi-value-field"><a href="/cgi-bin/clientdetails?mac=<%=v.MacAddress%>"><%=v.MacAddress%></a></div> + <div class="td cbi-value-field"><%=devicevalues[v.DeviceProfileUuid].Manufacturer%></div> + <div class="td cbi-value-field"><%=devicevalues[v.DeviceProfileUuid].Model%></div> + <div class="td cbi-value-field"><%=devicevalues[v.DeviceProfileUuid].ThingClass%></div> + </div> <% style=false end end %> - </table> + </div> </div> </fieldset> <br /> <fieldset class="cbi-section"> <legend><%:Unrecognized Clients%></legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IPv4%></th> - <th class="cbi-section-table-cell"><%:MAC%></th> - <th class="cbi-section-table-cell"><%:Manufacturer%></th> - <th class="cbi-section-table-cell"><%:Model%></th> - <th class="cbi-section-table-cell"><%:DhcpVendor%></th> - <th class="cbi-section-table-cell"><%:DhcpHostname%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Hostname%></div> + <div class="th cbi-section-table-cell"><%:IPv4%></div> + <div class="th cbi-section-table-cell"><%:MAC%></div> + <div class="th cbi-section-table-cell"><%:Manufacturer%></div> + <div class="th cbi-section-table-cell"><%:Model%></div> + <div class="th cbi-section-table-cell"><%:DhcpVendor%></div> + <div class="th cbi-section-table-cell"><%:DhcpHostname%></div> + </div> <% for i,v in ipairs(devdump) do if v.DeviceProfileUuid == "" then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=v.Hostname%></td> - <td class="cbi-value-field"><%=v.Ipv4Address%></td> - <td class="cbi-value-field"><a href="/cgi-bin/clientdetails?mac=<%=v.MacAddress%>"><%=v.MacAddress%></a></td> - <td class="cbi-value-field"><%=v.SsdpManufacturer%></td> - <td class="cbi-value-field"><%=v.SsdpModelName%></td> - <td class="cbi-value-field"><%=v.DhcpVendor1%></td> - <td class="cbi-value-field"><%=v.DhcpHostname%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td cbi-value-field"><%=v.Hostname%></div> + <div class="td cbi-value-field"><%=v.Ipv4Address%></div> + <div class="td cbi-value-field"><a href="/cgi-bin/clientdetails?mac=<%=v.MacAddress%>"><%=v.MacAddress%></a></div> + <div class="td cbi-value-field"><%=v.SsdpManufacturer%></div> + <div class="td cbi-value-field"><%=v.SsdpModelName%></div> + <div class="td cbi-value-field"><%=v.DhcpVendor1%></div> + <div class="td cbi-value-field"><%=v.DhcpHostname%></div> + </div> <% style=false end end %> - </table> + </div> </div> </fieldset> diff --git a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm index 03a9ed70e..66e44e967 100644 --- a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm +++ b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm @@ -5,8 +5,8 @@ function(x) { var tb = document.getElementById('ocserv_status_table'); - if (tb && (idx < tb.rows.length)) - tb.rows[0].parentNode.removeChild(tb.rows[idx]); + if (tb && (idx + 1 < tb.childNodes.length)) + tb.removeChild(tb.childNodes[idx + 1]); } ); } @@ -18,38 +18,28 @@ if (st && tb) { /* clear all rows */ - while( tb.rows.length > 1 ) - tb.deleteRow(1); + while (tb.firstElementChild !== tb.lastElementChild) + tb.removeChild(tb.lastElementChild); - for( var i = 0; i < st.length; i++ ) + for (var i = 0; i < st.length; i++) { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = st[i].user; - tr.insertCell(-1).innerHTML = st[i].group; - tr.insertCell(-1).innerHTML = st[i].vpn_ip; - tr.insertCell(-1).innerHTML = st[i].ip; - tr.insertCell(-1).innerHTML = st[i].device; - tr.insertCell(-1).innerHTML = st[i].time; - tr.insertCell(-1).innerHTML = st[i].cipher; - tr.insertCell(-1).innerHTML = st[i].status; - - tr.insertCell(-1).innerHTML = String.format( - '<input class="cbi-button cbi-input-remove" type="button" value="<%:Disconnect%>" onclick="ocserv_disconnect(%d)" />', - st[i].id - ); + tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ + E('<div class="td">', st[i].user), + E('<div class="td">', st[i].group), + E('<div class="td">', st[i].vpn_ip), + E('<div class="td">', st[i].ip), + E('<div class="td">', st[i].device), + E('<div class="td">', st[i].time), + E('<div class="td">', st[i].cipher), + E('<div class="td">', st[i].status), + E('<div class="td">', + E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Disconnect%>" onclick="ocserv_disconnect(%d)" />' + .format(st[i].id))) + ])); } - if( tb.rows.length == 1 ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 5; - td.innerHTML = '<em><br /><%:There are no active users.%></em>'; - } + if (tb.firstElementChild === tb.lastElementChild) + tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active users.%></em></div></div>')); } } ); @@ -57,20 +47,21 @@ <fieldset class="cbi-section"> <legend><%:Active OpenConnect Users%></legend> - <table class="cbi-section-table" id="ocserv_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:User%></th> - <th class="cbi-section-table-cell"><%:Group%></th> - <th class="cbi-section-table-cell"><%:IP Address%></th> - <th class="cbi-section-table-cell"><%:VPN IP Address%></th> - <th class="cbi-section-table-cell"><%:Device%></th> - <th class="cbi-section-table-cell"><%:Time%></th> - <th class="cbi-section-table-cell"><%:Cipher%></th> - <th class="cbi-section-table-cell"><%:Status%></th> - <th class="cbi-section-table-cell"> </th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="5"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="ocserv_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:User%></div> + <div class="th cbi-section-table-cell"><%:Group%></div> + <div class="th cbi-section-table-cell"><%:IP Address%></div> + <div class="th cbi-section-table-cell"><%:VPN IP Address%></div> + <div class="th cbi-section-table-cell"><%:Device%></div> + <div class="th cbi-section-table-cell"><%:Time%></div> + <div class="th cbi-section-table-cell"><%:Cipher%></div> + <div class="th cbi-section-table-cell"><%:Status%></div> + <div class="th cbi-section-table-cell"> </div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> + diff --git a/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm b/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm index 476150dd2..150ed87da 100644 --- a/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm +++ b/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm @@ -132,11 +132,11 @@ end { var service = info[idx]; s += String.format( - '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+'">' + - '<td class="cbi-section-table-titles"><a href="%s">%s</a></td>' + - '<td class="cbi-section-table-titles">%s</td>' + - '<td class="cbi-section-table-titles"><a href="http://%s/cgi-bin-status.html">%s</a></td>' + - '</tr>', + '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+'">' + + '<div class="td cbi-section-table-titles"><a href="%s">%s</a></div>' + + '<div class="td cbi-section-table-titles">%s</div>' + + '<div class="td cbi-section-table-titles"><a href="http://%s/cgi-bin-status.html">%s</a></div>' + + '</div>', service.url, service.descr, service.proto, service.origin_link, service.origin || '?' ); } @@ -153,16 +153,16 @@ end <fieldset class="cbi-section"> <legend><%:Internal services%></legend> - <table class="cbi-section-table"> - <thead> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Url%></th> - <th class="cbi-section-table-cell"><%:Protocol%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - </tr> - </thead> - - <tbody id="olsr_services"> + <div class="table cbi-section-table"> + <div class="thead"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Url%></div> + <div class="th cbi-section-table-cell"><%:Protocol%></div> + <div class="th cbi-section-table-cell"><%:Source%></div> + </div> + </div> + + <div class="tbody" id="olsr_services"> <% for k, line in ipairs(services) do local field = {} @@ -178,15 +178,15 @@ end local url, proto, descr, origin = pcdata(field[1]), pcdata(field[2]), utl.trim(pcdata(field[3])), pcdata(field[4]) %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%>"> - <td class="cbi-section-table-titles"><a href="<%=url%>"><%=descr%></a></td> - <td class="cbi-section-table-titles"><%=proto%></td> - <td class="cbi-section-table-titles"><a href="http://<%=origin_link%>/cgi-bin-status.html"><%=origin%></a></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%>"> + <div class="td cbi-section-table-titles"><a href="<%=url%>"><%=descr%></a></div> + <div class="td cbi-section-table-titles"><%=proto%></div> + <div class="td cbi-section-table-titles"><a href="http://<%=origin_link%>/cgi-bin-status.html"><%=origin%></a></div> + </div> <% i = ((i % 2) + 1) end %> - </tbody> - </table> + </div> + </div> <br /> <%=last_update%> </fieldset> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm index 5ea7b74e4..2dc4ce173 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm @@ -41,7 +41,7 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, { var hna = info[idx]; var linkgw = '' - s += '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + hna.proto + '">' + s += '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + hna.proto + '">' if (hna.proto == '6') { linkgw = '<a href="http://[' + hna.gateway + ']/cgi-bin-status.html">' + hna.gateway + '</a>' } else { @@ -61,11 +61,11 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, } s += String.format( - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>', hna.destination + '/' + hna.genmask, linkgw + hostname, validity + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>', hna.destination + '/' + hna.genmask, linkgw + hostname, validity ) - s += '</tr>' + s += '</div>' } hnadiv.innerHTML = s; } @@ -79,21 +79,21 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, <fieldset class="cbi-section"> <legend><%:Overview of currently active OLSR host net announcements%></legend> - <table class="cbi-section-table"> - <thead> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Announced network%></th> - <th class="cbi-section-table-cell"><%:OLSR gateway%></th> - <th class="cbi-section-table-cell"><%:Validity Time%></th> - </tr> + <div class="table cbi-section-table"> + <div class="thead"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Announced network%></div> + <div class="th cbi-section-table-cell"><%:OLSR gateway%></div> + <div class="th cbi-section-table-cell"><%:Validity Time%></div> + </div> - </thead> - <tbody id="olsrd_hna"> + </div> + <div class="tbody" id="olsrd_hna"> <% for k, route in ipairs(hna) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=hna[k].proto%>"> - <td class="cbi-section-table-cell"><%=hna[k].destination%>/<%=hna[k].genmask%> </td> - <td class="cbi-section-table-cell"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=hna[k].proto%>"> + <div class="td cbi-section-table-cell"><%=hna[k].destination%>/<%=hna[k].genmask%> </div> + <div class="td cbi-section-table-cell"> <% if hna[k].proto == '6' then %> <a href="http://[<%=hna[k].gateway%>]/cgi-bin-status.html"><%=hna[k].gateway%></a> <% else %> @@ -102,20 +102,20 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, <% if hna[k].hostname then %> / <a href="http://<%=hna[k].hostname%>/cgi-bin-status.html"><%=hna[k].hostname%></a> <% end %> - </td> + </div> <% if hna[k].validityTime then validity = hna[k].validityTime .. 's' else validity = '-' end %> - <td class="cbi-section-table-cell"><%=validity%></td> - </tr> + <div class="td cbi-section-table-cell"><%=validity%></div> + </div> <% i = ((i % 2) + 1) end %> - </tbody> - </table> + </div> + </div> </fieldset> <%+status-olsr/common_js%> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm index 81d0a3dd3..e3ccd0c23 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm @@ -18,31 +18,31 @@ local i = 1 <fieldset class="cbi-section"> <legend><%:Overview of interfaces where OLSR is running%></legend> - <table class="cbi-section-table"> - <tr> - <th class="cbi-section-table-cell"><%:Interface%></th> - <th class="cbi-section-table-cell"><%:State%></th> - <th class="cbi-section-table-cell"><%:MTU%></th> - <th class="cbi-section-table-cell"><%:WLAN%></th> - <th class="cbi-section-table-cell"><%:Source address%></th> - <th class="cbi-section-table-cell"><%:Netmask%></th> - <th class="cbi-section-table-cell"><%:Broadcast address%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr"> + <div class="th cbi-section-table-cell"><%:Interface%></div> + <div class="th cbi-section-table-cell"><%:State%></div> + <div class="th cbi-section-table-cell"><%:MTU%></div> + <div class="th cbi-section-table-cell"><%:WLAN%></div> + <div class="th cbi-section-table-cell"><%:Source address%></div> + <div class="th cbi-section-table-cell"><%:Netmask%></div> + <div class="th cbi-section-table-cell"><%:Broadcast address%></div> + </div> <% for k, iface in ipairs(iface) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=iface.proto%>"> - <td class="cbi-section-table-cell"><%=iface.name%></td> - <td class="cbi-section-table-cell"><%=iface.state%></td> - <td class="cbi-section-table-cell"><%=iface.olsrMTU%></td> - <td class="cbi-section-table-cell"><%=iface.wireless and luci.i18n.translate('yes') or luci.i18n.translate('no')%></td> - <td class="cbi-section-table-cell"><%=iface.ipv4Address or iface.ipv6Address%></td> - <td class="cbi-section-table-cell"><%=iface.netmask%></td> - <td class="cbi-section-table-cell"><%=iface.broadcast or iface.multicast%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=iface.proto%>"> + <div class="td cbi-section-table-cell"><%=iface.name%></div> + <div class="td cbi-section-table-cell"><%=iface.state%></div> + <div class="td cbi-section-table-cell"><%=iface.olsrMTU%></div> + <div class="td cbi-section-table-cell"><%=iface.wireless and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell"><%=iface.ipv4Address or iface.ipv6Address%></div> + <div class="td cbi-section-table-cell"><%=iface.netmask%></div> + <div class="td cbi-section-table-cell"><%=iface.broadcast or iface.multicast%></div> + </div> <% i = ((i % 2) + 1) end %> - </table> + </div> </fieldset> <%+status-olsr/common_js%> <%+footer%> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm index f658288fc..8c9f63af0 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm @@ -15,11 +15,11 @@ local i = 1 <div id="togglebuttons"></div> <fieldset class="cbi-section"> <legend><%:Overview of known multiple interface announcements%></legend> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:OLSR node%></th> - <th class="cbi-section-table-cell" ><%:Secondary OLSR interfaces%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:OLSR node%></div> + <div class="th cbi-section-table-cell" ><%:Secondary OLSR interfaces%></div> + </div> <% for k, mid in ipairs(mids) do local aliases = '' @@ -37,14 +37,14 @@ local i = 1 end %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=mid.proto%>"> - <td class="cbi-section-table-cell"><a href="http://<%=host%>/cgi-bin-status.html"><%=mid.ipAddress%></a></td> - <td class="cbi-section-table-cell"><%=aliases%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=mid.proto%>"> + <div class="td cbi-section-table-cell"><a href="http://<%=host%>/cgi-bin-status.html"><%=mid.ipAddress%></a></div> + <div class="td cbi-section-table-cell"><%=aliases%></div> + </div> <% i = ((i % 2) + 1) end %> - </table> + </div> </fieldset> <%+status-olsr/common_js%> <%+footer%> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm index c077c2048..ab0986586 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm @@ -64,36 +64,36 @@ end if (neigh.proto == '6') { s += String.format( - '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + - '<td class="cbi-section-table-titles" style="background-color:%s"><a href="http://[%s]/cgi-bin-status.html">%s</a></td>', + '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + + '<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://[%s]/cgi-bin-status.html">%s</a></div>', neigh.proto, neigh.dfgcolor, neigh.rip, neigh.rip ); } else { s += String.format( - '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + - '<td class="cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></td>', + '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + + '<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>', neigh.proto, neigh.dfgcolor, neigh.rip, neigh.rip ); } if (neigh.hn) { s += String.format( - '<td class="cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></td>', + '<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>', neigh.dfgcolor, neigh.hn, neigh.hn ); } else { s += String.format( - '<td class="cbi-section-table-titles" style="background-color:%s">?</td>', + '<div class="td cbi-section-table-titles" style="background-color:%s">?</div>', neigh.dfgcolor ); } s += String.format( - '<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' + - '<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' + - '<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' + - '<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' + - '<td class="cbi-section-table-titles" style="background-color:%s">%s</td>' + - '<td class="cbi-section-table-titles" style="background-color:%s" title="Signal: %s Noise: %s">%s</td>' + - '</tr>', + '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-titles" style="background-color:%s" title="Signal: %s Noise: %s">%s</div>' + + '</div>', neigh.dfgcolor, neigh.ifn, neigh.dfgcolor, neigh.lip, neigh.dfgcolor, neigh.lq, neigh.dfgcolor, neigh.nlq, neigh.color, neigh.cost, neigh.snr_color, neigh.signal, neigh.noise, neigh.snr || '?' ); } @@ -112,21 +112,21 @@ end <fieldset class="cbi-section"> <legend><%:Overview of currently established OLSR connections%></legend> - <table class="cbi-section-table"> - <thead> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Neighbour IP%></th> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - <th class="cbi-section-table-cell"><%:Local interface IP%></th> - <th class="cbi-section-table-cell">LQ</th> - <th class="cbi-section-table-cell">NLQ</th> - <th class="cbi-section-table-cell">ETX</th> - <th class="cbi-section-table-cell">SNR</th> - </tr> - </thead> + <div class="table cbi-section-table"> + <div class="thead"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Neighbour IP%></div> + <div class="th cbi-section-table-cell"><%:Hostname%></div> + <div class="th cbi-section-table-cell"><%:Interface%></div> + <div class="th cbi-section-table-cell"><%:Local interface IP%></div> + <div class="th cbi-section-table-cell">LQ</div> + <div class="th cbi-section-table-cell">NLQ</div> + <div class="th cbi-section-table-cell">ETX</div> + <div class="th cbi-section-table-cell">SNR</div> + </div> + </div> - <tbody id="olsr_neigh_table"> + <div class="tbody" id="olsr_neigh_table"> <% local i = 1 for k, link in ipairs(links) do link.linkCost = tonumber(link.linkCost) or 0 @@ -147,25 +147,25 @@ end end %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=link.proto%>"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=link.proto%>"> <% if link.proto == "6" then %> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://[<%=link.remoteIP%>]/cgi-bin-status.html"><%=link.remoteIP%></a></td> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://[<%=link.remoteIP%>]/cgi-bin-status.html"><%=link.remoteIP%></a></div> <% else %> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.remoteIP%>/cgi-bin-status.html"><%=link.remoteIP%></a></td> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.remoteIP%>/cgi-bin-status.html"><%=link.remoteIP%></a></div> <% end %> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.hostname%>/cgi-bin-status.html"><%=link.hostname%></a></td> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.interface%></td> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.localIP%></td> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.linkQuality)%></td> - <td class="cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.neighborLinkQuality)%></td> - <td class="cbi-section-table-titles" style="background-color:<%=color%>"><%=string.format("%.3f", link.linkCost)%></td> - <td class="cbi-section-table-titles" style="background-color:<%=snr_color%>" title="Signal: <%=link.signal%> Noise: <%=link.noise%>"><%=link.snr%></td> - </tr> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.hostname%>/cgi-bin-status.html"><%=link.hostname%></a></div> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.interface%></div> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.localIP%></div> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.linkQuality)%></div> + <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.neighborLinkQuality)%></div> + <div class="td cbi-section-table-titles" style="background-color:<%=color%>"><%=string.format("%.3f", link.linkCost)%></div> + <div class="td cbi-section-table-titles" style="background-color:<%=snr_color%>" title="Signal: <%=link.signal%> Noise: <%=link.noise%>"><%=link.snr%></div> + </div> <% i = ((i % 2) + 1) end %> - </tbody> - </table> + </div> + </div> <br /> <%+status-olsr/legend%> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm index 61e17b3b2..832a27aed 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/overview.htm @@ -160,48 +160,48 @@ XHR.poll(10, '<%=REQUEST_URI%>/json', { }, <fieldset class="cbi-section"> <legend><%:Network%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Interfaces%></td><td> + <div class="table" width="100%" cellspacing="10"> + <div class="tr"><div class="td" width="33%"><%:Interfaces%></div><div class="td"> <a href="<%=REQUEST_URI%>/interfaces"> <span id="nr_ifaces">-<span> </a> - </td></tr> - <tr><td width="33%"><%:Neighbors%></td><td> + </div></div> + <div class="tr"><div class="td" width="33%"><%:Neighbors%></div><div class="td"> <a href="<%=REQUEST_URI%>/neighbors"> <span id="nr_neigh">-</span> </a> - </td></tr> - <tr><td width="33%"><%:Nodes%></td><td> + </div></div> + <div class="tr"><div class="td" width="33%"><%:Nodes%></div><div class="td"> <a href="<%=REQUEST_URI%>/topology"> <span id="nr_nodes">-</span> </a> - </td></tr> - <tr><td width="33%"><%:HNA%></td><td> + </div></div> + <div class="tr"><div class="td" width="33%"><%:HNA%></div><div class="td"> <a href="<%=REQUEST_URI%>/hna"> <span id="nr_hna">-</span> </a> - </td></tr> - <tr><td width="33%"><%:Links total%></td><td> + </div></div> + <div class="tr"><div class="td" width="33%"><%:Links total%></div><div class="td"> <a href="<%=REQUEST_URI%>/topology"> <span id="nr_topo">-</span> </a> - </td></tr> - <tr><td width="33%"><%:Links per node (average)%></td><td> + </div></div> + <div class="tr"><div class="td" width="33%"><%:Links per node (average)%></div><div class="td"> <span id="meshfactor">-</span> - </td></tr> + </div></div> - </table> + </div> </fieldset> <fieldset class="cbi-section"> <legend>OLSR <%:Configuration%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Version%></td><td> + <div class="table" width="100%" cellspacing="10"> + <div class="tr"><div class="td" width="33%"><%:Version%></div><div class="td"> <span id="version">-<span> - </td></tr> - <tr><td width="33%"><%:Download Config%></td><td> + </div></div> + <div class="tr"><div class="td" width="33%"><%:Download Config%></div><div class="td"> <% if has_ipv4_conf then %> <a href="<%=REQUEST_URI%>?openwrt_v4">OpenWrt (IPv4)</a>, <% end %> @@ -214,8 +214,8 @@ XHR.poll(10, '<%=REQUEST_URI%>/json', { }, <% if has_ipv6_conf then %> <a href="<%=REQUEST_URI%>?conf_v6">OLSRD (IPv6)</a> <% end %> - </td></tr> - </table> + </div></div> + </div> </fieldset> <%+footer%> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm index 8e46daa02..c75b94fce 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm @@ -50,9 +50,9 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, var route = info[idx]; s += String.format( - '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + - '<td class="cbi-section-table-cell">%s/%s</td>' + - '<td class="cbi-section-table-cell">' + + '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + + '<div class="td cbi-section-table-cell">%s/%s</div>' + + '<div class="td cbi-section-table-cell">' + '<a href="http://%s/cgi-bin-status.html">%s</a>', route.proto, route.dest, route.genmask, route.gw, route.gw ) @@ -72,11 +72,11 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, } s += String.format( - '</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' + - '</tr>', + '</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell" style="background-color:%s">%s</div>' + + '</div>', route.interface, route.metric, route.color, route.etx || '?' ); } @@ -96,27 +96,27 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, <fieldset class="cbi-section"> <legend><%:Overview of currently known routes to other OLSR nodes%></legend> -<table class="cbi-section-table"> - <thead> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Announced network%></th> - <th class="cbi-section-table-cell"><%:OLSR gateway%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - <th class="cbi-section-table-cell"><%:Metric%></th> - <th class="cbi-section-table-cell">ETX</th> - </tr> - </thead> +<div class="table cbi-section-table"> + <div class="thead"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Announced network%></div> + <div class="th cbi-section-table-cell"><%:OLSR gateway%></div> + <div class="th cbi-section-table-cell"><%:Interface%></div> + <div class="th cbi-section-table-cell"><%:Metric%></div> + <div class="th cbi-section-table-cell">ETX</div> + </div> + </div> - <tbody id="olsrd_routes"> + <div class="tbody" id="olsrd_routes"> <% for k, route in ipairs(routes) do ETX = tonumber(route.rtpMetricCost)/1024 or '0' color = olsrtools.etx_color(ETX) %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>"> - <td class="cbi-section-table-cell"><%=route.destination%>/<%=route.genmask%></td> - <td class="cbi-section-table-cell"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>"> + <div class="td cbi-section-table-cell"><%=route.destination%>/<%=route.genmask%></div> + <div class="td cbi-section-table-cell"> <% if route.proto == '6' then %> <a href="http://[<%=route.gateway%>]/cgi-bin-status.html"><%=route.gateway%></a> <% else %> @@ -125,16 +125,16 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, <% if route.hostname then %> / <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.hostname%></a> <% end %> - </td> - <td class="cbi-section-table-cell"><%=route.networkInterface%></td> - <td class="cbi-section-table-cell"><%=route.metric%></td> - <td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", ETX)%></td> - </tr> + </div> + <div class="td cbi-section-table-cell"><%=route.networkInterface%></div> + <div class="td cbi-section-table-cell"><%=route.metric%></div> + <div class="td cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", ETX)%></div> + </div> <% i = ((i % 2) + 1) end %> - </tbody> -</table> + </div> +</div> <%+status-olsr/legend%> </fieldset> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm index 6aa7a7546..7ca66816a 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm @@ -56,7 +56,7 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, for (var idx = 0; idx < info.length; idx++) { var smartgw = info[idx]; - s += '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + smartgw.proto + '">' + s += '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-' + smartgw.proto + '">' if (smartgw.proto == '6') { linkgw = '<a href="http://[' + smartgw.ipAddress + ']/cgi-bin-status.html">' + smartgw.ipAddress + '</a>' } else { @@ -64,18 +64,18 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, } s += String.format( - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>', + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>', linkgw, smartgw.status, smartgw.tcPathCost, smartgw.hopCount, smartgw.uplinkSpeed, smartgw.downlinkSpeed, smartgw.v4, smartgw.v6, smartgw.externalPrefix ) - s += '</tr>' + s += '</div>' } smartgwdiv.innerHTML = s; } @@ -94,23 +94,23 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, <fieldset class="cbi-section"> <legend><%:Overview of smart gateways in this network%></legend> - <table class="cbi-section-table"> - <thead> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Gateway%></th> - <th class="cbi-section-table-cell"><%:Status%></th> - <th class="cbi-section-table-cell"><%:ETX%></th> - <th class="cbi-section-table-cell"><%:Hops%></th> - <th class="cbi-section-table-cell"><%:Uplink%></th> - <th class="cbi-section-table-cell"><%:Downlink%></th> - <th class="cbi-section-table-cell"><%:IPv4%></th> - <th class="cbi-section-table-cell"><%:IPv6%></th> - <th class="cbi-section-table-cell"><%:Prefix%></th> - - </tr> - </thead> - - <tbody id="olsrd_smartgw"> + <div class="table cbi-section-table"> + <div class="thead"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Gateway%></div> + <div class="th cbi-section-table-cell"><%:Status%></div> + <div class="th cbi-section-table-cell"><%:ETX%></div> + <div class="th cbi-section-table-cell"><%:Hops%></div> + <div class="th cbi-section-table-cell"><%:Uplink%></div> + <div class="th cbi-section-table-cell"><%:Downlink%></div> + <div class="th cbi-section-table-cell"><%:IPv4%></div> + <div class="th cbi-section-table-cell"><%:IPv6%></div> + <div class="th cbi-section-table-cell"><%:Prefix%></div> + + </div> + </div> + + <div class="tbody" id="olsrd_smartgw"> <% for k, gw in ipairs(gws) do gw.tcPathCost = tonumber(gw.tcPathCost)/1024 or 0 @@ -119,27 +119,27 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, end %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=proto%>"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=proto%>"> <% if gw.proto == '6' then %> - <td class="cbi-section-table-cell"><a href="http://[<%=gw.ipAddress%>]/cgi-bin-status.html"><%=gw.ipAddress%></a></td> + <div class="td cbi-section-table-cell"><a href="http://[<%=gw.ipAddress%>]/cgi-bin-status.html"><%=gw.ipAddress%></a></div> <% else %> - <td class="cbi-section-table-cell"><a href="http://<%=gw.ipAddress%>/cgi-bin-status.html"><%=gw.ipAddress%></a></td> + <div class="td cbi-section-table-cell"><a href="http://<%=gw.ipAddress%>/cgi-bin-status.html"><%=gw.ipAddress%></a></div> <% end %> - <td class="cbi-section-table-cell"><%=gw.ipv4Status or gw.ipv6Status or '-' %></td> - <td class="cbi-section-table-cell"><%=string.format("%.3f", gw.tcPathCost)%></td> - <td class="cbi-section-table-cell"><%=gw.hopCount%></td> - <td class="cbi-section-table-cell"><%=gw.uplinkSpeed%></td> - <td class="cbi-section-table-cell"><%=gw.downlinkSpeed%></td> - <td class="cbi-section-table-cell"><%=gw.ipv4 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></td> - <td class="cbi-section-table-cell"><%=gw.ipv6 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></td> - <td class="cbi-section-table-cell"><%=gw.externalPrefix%></td> - </tr> + <div class="td cbi-section-table-cell"><%=gw.ipv4Status or gw.ipv6Status or '-' %></div> + <div class="td cbi-section-table-cell"><%=string.format("%.3f", gw.tcPathCost)%></div> + <div class="td cbi-section-table-cell"><%=gw.hopCount%></div> + <div class="td cbi-section-table-cell"><%=gw.uplinkSpeed%></div> + <div class="td cbi-section-table-cell"><%=gw.downlinkSpeed%></div> + <div class="td cbi-section-table-cell"><%=gw.ipv4 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell"><%=gw.ipv6 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell"><%=gw.externalPrefix%></div> + </div> <% i = ((i % 2) + 1) end %> - </tbody> - </table> + </div> + </div> </fieldset> <% else %> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm index b3abeaecb..02fdfddac 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm @@ -17,14 +17,14 @@ local olsrtools = require "luci.tools.olsr" <fieldset class="cbi-section"> <legend><%:Overview of currently known OLSR nodes%></legend> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:OLSR node%></th> - <th class="cbi-section-table-cell"><%:Last hop%></th> - <th class="cbi-section-table-cell"><%:LQ%></th> - <th class="cbi-section-table-cell"><%:NLQ%></th> - <th class="cbi-section-table-cell"><%:ETX%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:OLSR node%></div> + <div class="th cbi-section-table-cell"><%:Last hop%></div> + <div class="th cbi-section-table-cell"><%:LQ%></div> + <div class="th cbi-section-table-cell"><%:NLQ%></div> + <div class="th cbi-section-table-cell"><%:ETX%></div> + </div> <% for k, route in ipairs(routes) do local cost = string.format("%.3f", tonumber(route.tcEdgeCost/1024) or 0) @@ -33,28 +33,28 @@ local olsrtools = require "luci.tools.olsr" local nlq = string.format("%.3f", tonumber(route.neighborLinkQuality) or 0) %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>"> <% if route.proto == "6" then %> - <td class="cbi-section-table-cell"><a href="http://[<%=route.destinationIP%>]/cgi-bin-status.html"><%=route.destinationIP%></a></td> - <td class="cbi-section-table-cell"><a href="http://[<%=route.lastHopIP%>]/cgi-bin-status.html"><%=route.lastHopIP%></a></td> + <div class="td cbi-section-table-cell"><a href="http://[<%=route.destinationIP%>]/cgi-bin-status.html"><%=route.destinationIP%></a></div> + <div class="td cbi-section-table-cell"><a href="http://[<%=route.lastHopIP%>]/cgi-bin-status.html"><%=route.lastHopIP%></a></div> <% else %> - <td class="cbi-section-table-cell"><a href="http://<%=route.destinationIP%>/cgi-bin-status.html"><%=route.destinationIP%></a></td> - <td class="cbi-section-table-cell"><a href="http://<%=route.lastHopIP%>/cgi-bin-status.html"><%=route.lastHopIP%></a></td> + <div class="td cbi-section-table-cell"><a href="http://<%=route.destinationIP%>/cgi-bin-status.html"><%=route.destinationIP%></a></div> + <div class="td cbi-section-table-cell"><a href="http://<%=route.lastHopIP%>/cgi-bin-status.html"><%=route.lastHopIP%></a></div> <%end%> - <td class="cbi-section-table-cell"><%=lq%></td> - <td class="cbi-section-table-cell"><%=nlq%></td> - <td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=cost%></td> - </tr> + <div class="td cbi-section-table-cell"><%=lq%></div> + <div class="td cbi-section-table-cell"><%=nlq%></div> + <div class="td cbi-section-table-cell" style="background-color:<%=color%>"><%=cost%></div> + </div> <% i = ((i % 2) + 1) end %> - </table> + </div> <%+status-olsr/legend%> </fieldset> diff --git a/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm b/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm index 219d89b07..80b95564d 100644 --- a/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm +++ b/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm @@ -1,8 +1,8 @@ <div class="cbi-section-create cbi-tblsection-create"> <br /> - <table class="cbi-section-table"> - <tr class="cbi-section-table-row"> - <td class="cbi-section-table-cell" style="width:140px"> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-row"> + <div class="td cbi-section-table-cell" style="width:140px"> <select class="cbi-input-select" id="_newinst.type" name="_newinst.type"> <option value="_dummy">-- instance type --</option> <option value="ss_local">ss-local</option> @@ -10,15 +10,15 @@ <option value="ss_redir">ss-redir</option> <option value="ss_server">ss-server</option> </select> - </td> - <td class="cbi-section-table-cell" style="width:110px"> + </div> + <div class="td cbi-section-table-cell" style="width:110px"> <input type="text" class="cbi-input-text" id="_newinst.name" name="_newinst.name" placeholder="<%:Name%>"/> - </td> - <td class="cbi-section-table-cell left"> + </div> + <div class="td cbi-section-table-cell left"> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>" value="<%:Add%>" /> - </td> - </tr> - </table> + </div> + </div> + </div> </div> <script type="text/javascript">//<![CDATA[ XHR.poll(5, '<%=url('admin/services/shadowsocks-libev/status')%>', null, diff --git a/applications/luci-app-splash/luasrc/view/admin_status/splash.htm b/applications/luci-app-splash/luasrc/view/admin_status/splash.htm index 37f67776a..aad330791 100644 --- a/applications/luci-app-splash/luasrc/view/admin_status/splash.htm +++ b/applications/luci-app-splash/luasrc/view/admin_status/splash.htm @@ -145,19 +145,19 @@ end { var s = ''; if (info.length == undefined) { - s += '<tr class="cbi-section-table-row"><td colspan="7" class="cbi-section-table-cell"><br /><em><%:No clients connected%></em><br /></td></tr>' + s += '<div class="tr cbi-section-table-row"><div colspan="7" class="td cbi-section-table-cell"><br /><em><%:No clients connected%></em><br /></div></div>' }; for (var idx = 0; idx < info.length; idx++) { var splash = info[idx]; s += String.format( - '<tr class="cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+'">' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s</td>' + - '<td class="cbi-section-table-cell">%s/%s</td>' + - '<td class="cbi-section-table-cell">', + '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+'">' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s</div>' + + '<div class="td cbi-section-table-cell">%s/%s</div>' + + '<div class="td cbi-section-table-cell">', splash.hostname, splash.ip, splash.mac, splash.timeleft, splash.trafficin, splash.trafficout); <% if is_admin then %> @@ -185,7 +185,7 @@ end <% else %> s += String.format('%s', splash.policy); <% end %> - s += '</td></tr>' + s += '</div></div>' } tbody.innerHTML = s; } @@ -200,18 +200,18 @@ end <legend><%:Active Clients%></legend> <div class="cbi-section-node"> <% if is_admin then %><form action="<%=REQUEST_URI%>" method="post"><input type="hidden" name="token" value="<%=token%>" /><% end %> - <table class="cbi-section-table"> - <thead> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IP Address%></th> - <th class="cbi-section-table-cell"><%:MAC Address%></th> - <th class="cbi-section-table-cell"><%:Time remaining%></th> - <th class="cbi-section-table-cell"><%:Traffic in/out%></th> - <th class="cbi-section-table-cell"><%:Policy%></th> - </tr> - </thead> - <tbody id="splash_table"> + <div class="table cbi-section-table"> + <div class="thead"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Hostname%></div> + <div class="th cbi-section-table-cell"><%:IP Address%></div> + <div class="th cbi-section-table-cell"><%:MAC Address%></div> + <div class="th cbi-section-table-cell"><%:Time remaining%></div> + <div class="th cbi-section-table-cell"><%:Traffic in/out%></div> + <div class="th cbi-section-table-cell"><%:Policy%></div> + </div> + </div> + <div class="tbody" id="splash_table"> <%- local count = 0 @@ -227,16 +227,16 @@ end if c.ip then count = count + 1 -%> - <tr class="cbi-section-table-row cbi-rowstyle-<%=2-(count%2)%>"> - <td class="cbi-section-table-cell"><%=c.hostname or "<em>" .. translate("unknown") .. "</em>"%></td> - <td class="cbi-section-table-cell"><%=c.ip or "<em>" .. translate("unknown") .. "</em>"%></td> - <td class="cbi-section-table-cell"><%=showmac(c.mac)%></td> - <td class="cbi-section-table-cell"><%= + <div class="tr cbi-section-table-row cbi-rowstyle-<%=2-(count%2)%>"> + <div class="td cbi-section-table-cell"><%=c.hostname or "<em>" .. translate("unknown") .. "</em>"%></div> + <div class="td cbi-section-table-cell"><%=c.ip or "<em>" .. translate("unknown") .. "</em>"%></div> + <div class="td cbi-section-table-cell"><%=showmac(c.mac)%></div> + <div class="td cbi-section-table-cell"><%= (c.limit >= os.time()) and wat.date_format(c.limit-os.time()) or (c.policy ~= "normal") and "-" or "<em>" .. translate("expired") .. "</em>" - %></td> - <td class="cbi-section-table-cell"><%=wat.byte_format(c.bytes_in)%> / <%=wat.byte_format(c.bytes_out)%></td> - <td class="cbi-section-table-cell"> + %></div> + <div class="td cbi-section-table-cell"><%=wat.byte_format(c.bytes_in)%> / <%=wat.byte_format(c.bytes_out)%></div> + <div class="td cbi-section-table-cell"> <% if is_admin then %> <select name="policy.<%=c.mac:lower()%>" style="width:200px"> <option value="whitelist"<%=c.policy=="whitelist" and ' selected="selected"'%>><%:whitelisted%></option> @@ -250,21 +250,21 @@ end <% else %> <%=c.policy%> <% end %> - </td> - </tr> + </div> + </div> <%- end end if count == 0 then -%> - <tr class="cbi-section-table-row"> - <td colspan="7" class="cbi-section-table-cell"> + <div class="tr cbi-section-table-row"> + <div colspan="7" class="td cbi-section-table-cell"> <br /><em><%:No clients connected%></em><br /> - </td> - </tr> + </div> + </div> <%- end -%> - </tbody> - </table> + </div> + </div> <% if is_admin then %></form><% end %> </div> </fieldset> diff --git a/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm b/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm index 75e52aeb2..bee6fcb36 100644 --- a/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm +++ b/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm @@ -17,14 +17,14 @@ This is free software, licensed under the Apache License, Version 2.0 </div> <fieldset class="cbi-section"> - <table class="cbi-section-table" style="empty-cells:hide"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" style="text-align:left"><%:Device%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:SSID%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:BSSID%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Encryption%></th> - <th class="cbi-section-table-cell" style="text-align:center" colspan="2"><%:Actions%></th> - </tr> + <div class="table cbi-section-table" style="empty-cells:hide"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Device%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:SSID%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:BSSID%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Encryption%></div> + <div class="th cbi-section-table-cell" style="text-align:center" colspan="2"><%:Actions%></div> + </div> <% uci:foreach("wireless", "wifi-iface", function(s) local iface = s.network or "" @@ -40,25 +40,25 @@ This is free software, licensed under the Apache License, Version 2.0 style = "text-align:left;color:#0069d6;font-weight:bold" end %> - <tr class="cbi-section-table-row cbi-rowstyle-1" style="<%=style%>"> - <td style="<%=style%>"><%=device%></td> - <td style="<%=style%>"><%=ssid%></td> - <td style="<%=style%>"><%=bssid%></td> - <td style="<%=style%>"><%=encryption%></td> - <td class="cbi-value-field" style="width:80px"> + <div class="tr cbi-section-table-row cbi-rowstyle-1" style="<%=style%>"> + <div class="td" style="<%=style%>"><%=device%></div> + <div class="td" style="<%=style%>"><%=ssid%></div> + <div class="td" style="<%=style%>"><%=bssid%></div> + <div class="td" style="<%=style%>"><%=encryption%></div> + <div class="td cbi-value-field" style="width:80px"> <input class="cbi-button cbi-button-up" type="button" value="" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiorder')%>?cfg=<%=section%>&dir=up'" alt="<%:Move up%>" title="<%:Move up%>"/> <input class="cbi-button cbi-button-down" type="button" value="" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiorder')%>?cfg=<%=section%>&dir=down'" alt="<%:Move down%>" title="<%:Move down%>"/> - </td> - <td class="cbi-value-field" style="width:150px"> + </div> + <div class="td cbi-value-field" style="width:150px"> <input type="button" class="cbi-button cbi-button-edit" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiedit')%>?cfg=<%=section%>'" title="<%:Edit this Uplink%>" value="<%:Edit%>"/> <input type="button" class="cbi-button cbi-button-remove" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifidelete')%>?cfg=<%=section%>'" title="<%:Delete this Uplink%>" value="<%:Delete%>"/> - </td> - </tr> + </div> + </div> <% end end) %> - </table> + </div> </fieldset> <div class="cbi-page-actions right"> <% diff --git a/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm b/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm index a8f63a17e..81182b99b 100644 --- a/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm +++ b/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm @@ -42,28 +42,28 @@ This is free software, licensed under the Apache License, Version 2.0 <div class="cbi-map"> <h2 name="content"><%:Wireless Scan%></h2> <fieldset class="cbi-section"> - <table class="cbi-section-table" style="empty-cells:hide"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" style="text-align:left"><%:Uplink SSID%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Uplink BSSID%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Encryption%></th> - <th class="cbi-section-table-cell" style="text-align:left" colspan="2"><%:Signal strength%></th> - </tr> + <div class="table cbi-section-table" style="empty-cells:hide"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Uplink SSID%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Uplink BSSID%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Encryption%></div> + <div class="th cbi-section-table-cell" style="text-align:left" colspan="2"><%:Signal strength%></div> + </div> <% for i, net in ipairs(iw.scanlist or { }) do %> - <tr class="cbi-section-table-row cbi-rowstyle-1"> - <td class="cbi-value-field" style="text-align:left"> + <div class="tr cbi-section-table-row cbi-rowstyle-1"> + <div class="td cbi-value-field" style="text-align:left"> <%=net.ssid and utl.pcdata(net.ssid) or "<em>%s</em>" % translate("hidden")%> - </td> - <td class="cbi-value-field" style="text-align:left"> + </div> + <div class="td cbi-value-field" style="text-align:left"> <%=net.bssid and utl.pcdata(net.bssid)%> - </td> - <td class="cbi-value-field" style="text-align:left"> + </div> + <div class="td cbi-value-field" style="text-align:left"> <%=format_wifi_encryption(net.encryption)%> - </td> - <td class="cbi-value-field" style="text-align:left"> + </div> + <div class="td cbi-value-field" style="text-align:left"> <%=percent_wifi_signal(net)%> % - </td> - <td class="cbi-value-field" style="width:100px;text-align:right"> + </div> + <div class="td cbi-value-field" style="width:100px;text-align:right"> <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/wifiadd')%>" method="post"> <input type="hidden" name="token" value="<%=token%>"/> <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>"/> @@ -76,10 +76,10 @@ This is free software, licensed under the Apache License, Version 2.0 <% end %> <input class="cbi-button cbi-button-apply" type="submit" value="<%:Add Uplink%>"/> </form> - </td> - </tr> + </div> + </div> <% end %> - </table> + </div> </fieldset> <div class="cbi-page-actions right"> <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/wifiscan')%>" method="post"> diff --git a/applications/luci-app-upnp/luasrc/view/upnp_status.htm b/applications/luci-app-upnp/luasrc/view/upnp_status.htm index 89fdb5e21..1e0922579 100644 --- a/applications/luci-app-upnp/luasrc/view/upnp_status.htm +++ b/applications/luci-app-upnp/luasrc/view/upnp_status.htm @@ -4,8 +4,8 @@ function(x) { var tb = document.getElementById('upnp_status_table'); - if (tb && (idx < tb.rows.length)) - tb.rows[0].parentNode.removeChild(tb.rows[idx]); + if (tb && (idx + 1 < tb.childNodes.length)) + tb.removeChild(tb.childNodes[idx + 1]); } ); } @@ -17,35 +17,21 @@ if (st && tb) { /* clear all rows */ - while( tb.rows.length > 1 ) - tb.deleteRow(1); + while (tb.firstElementChild !== tb.lastElementChild) + tb.removeChild(tb.lastElementChild); - for( var i = 0; i < st.length; i++ ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); + for (var i = 0; i < st.length; i++) + tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ + E('<div class="td">', st[i].proto), + E('<div class="td">', st[i].extport), + E('<div class="td">', st[i].intaddr), + E('<div class="td">', st[i].intport), + E('<div class="td">', st[i].descr), + E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num)) + ])); - tr.insertCell(-1).innerHTML = st[i].proto; - tr.insertCell(-1).innerHTML = st[i].extport; - tr.insertCell(-1).innerHTML = st[i].intaddr; - tr.insertCell(-1).innerHTML = st[i].intport; - tr.insertCell(-1).innerHTML = st[i].descr; - - tr.insertCell(-1).innerHTML = String.format( - '<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />', - st[i].num - ); - } - - if( tb.rows.length == 1 ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 5; - td.innerHTML = '<em><br /><%:There are no active redirects.%></em>'; - } + if (tb.firstElementChild === tb.lastElementChild) + tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active redirects.%></em></div></div>')); } } ); @@ -53,17 +39,17 @@ <fieldset class="cbi-section"> <legend><%:Active UPnP Redirects%></legend> - <table class="cbi-section-table" id="upnp_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Protocol%></th> - <th class="cbi-section-table-cell"><%:External Port%></th> - <th class="cbi-section-table-cell"><%:Client Address%></th> - <th class="cbi-section-table-cell"><%:Client Port%></th> - <th class="cbi-section-table-cell"><%:Description%></th> - <th class="cbi-section-table-cell"> </th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="5"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="upnp_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Protocol%></div> + <div class="th cbi-section-table-cell"><%:External Port%></div> + <div class="th cbi-section-table-cell"><%:Client Address%></div> + <div class="th cbi-section-table-cell"><%:Client Port%></div> + <div class="th cbi-section-table-cell"><%:Description%></div> + <div class="th cbi-section-table-cell"> </div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> diff --git a/applications/luci-app-wireguard/luasrc/view/wireguard.htm b/applications/luci-app-wireguard/luasrc/view/wireguard.htm index 5af6232ae..64d995529 100644 --- a/applications/luci-app-wireguard/luasrc/view/wireguard.htm +++ b/applications/luci-app-wireguard/luasrc/view/wireguard.htm @@ -164,43 +164,43 @@ for ikey, iface in pairs(data) do -%> <legend><%:Interface%> <%=ikey%></legend> - <table width="100%" cellspacing="10"> - <tr> - <td width="33%" style="vertical-align:top"><%:Configuration%></td> - <td> - <table> - <tr> - <td id="<%=ikey%>_icon" style="width:16px; text-align:center; padding:3px"> + <div class="table" width="100%" cellspacing="10"> + <div class="tr"> + <div class="td" width="33%" style="vertical-align:top"><%:Configuration%></div> + <div class="td"> + <div class="table"> + <div class="tr"> + <div class="td" id="<%=ikey%>_icon" style="width:16px; text-align:center; padding:3px"> - </td> - <td id="<%=ikey%>_info" style="vertical-align:middle; padding: 3px"> + </div> + <div class="td" id="<%=ikey%>_info" style="vertical-align:middle; padding: 3px"> <em><%:Collecting data...%></em> - </td> - </tr></table> - </td> - </tr> + </div> + </div></div> + </div> + </div> <%- for pkey, peer in pairs(iface.peers) do -%> - <tr> - <td width="33%" style="vertical-align:top"><%:Peer%></td> - <td> - <table> - <tr> - <td id="<%=ikey%>_<%=peer.public_key%>_icon" style="width:16px; text-align:center; padding:3px"> + <div class="tr"> + <div class="td" width="33%" style="vertical-align:top"><%:Peer%></div> + <div class="td"> + <div class="table"> + <div class="tr"> + <div class="td" id="<%=ikey%>_<%=peer.public_key%>_icon" style="width:16px; text-align:center; padding:3px"> <img src="<%=resource%>/icons/tunnel_disabled.png" /><br /> <small>?</small> - </td> - <td id="<%=ikey%>_<%=peer.public_key%>_info" style="vertical-align:middle; padding: 3px"> + </div> + <div class="td" id="<%=ikey%>_<%=peer.public_key%>_info" style="vertical-align:middle; padding: 3px"> <em><%:Collecting data...%></em> - </td> - </tr></table> - </td> - </tr> + </div> + </div></div> + </div> + </div> <%- end -%> - </table> + </div> <%- end -%> diff --git a/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm b/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm index 786ee43d1..bdd6bc968 100644 --- a/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm +++ b/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm @@ -1,2 +1,2 @@ </div> -</td> +</div> diff --git a/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm b/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm index 9c9c21814..a4b68cda7 100644 --- a/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm +++ b/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm @@ -1,2 +1,2 @@ -<td class="cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %>"> +<div class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %>"> <div id="cbi-<%=self.config.."-"..section.."-"..self.option%>" data-index="<%=self.index%>" data-depends="<%=pcdata(self:deplist2json(section))%>"> diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm index 3cb87563f..bb11cf1c0 100644 --- a/modules/luci-base/luasrc/view/cbi/tblsection.htm +++ b/modules/luci-base/luasrc/view/cbi/tblsection.htm @@ -27,52 +27,52 @@ end <div class="cbi-section-descr"><%=self.description%></div> <div class="cbi-section-node"> <%- local count = 0 -%> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> <%- if not self.anonymous then -%> <%- if self.sectionhead then -%> - <th class="cbi-section-table-cell"><%=self.sectionhead%></th> + <div class="th cbi-section-table-cell"><%=self.sectionhead%></div> <%- else -%> - <th> </th> + <div class="th"> </div> <%- end -%> <%- count = count +1; end -%> <%- for i, k in pairs(self.children) do if not k.optional then -%> - <th class="cbi-section-table-cell"<%=width(k)%>> + <div class="th cbi-section-table-cell"<%=width(k)%>> <%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%> <%-=k.title-%> <%- if k.titleref then -%></a><%- end -%> - </th> + </div> <%- count = count + 1; end; end; if self.sortable then -%> - <th class="cbi-section-table-cell"><%:Sort%></th> + <div class="th cbi-section-table-cell"><%:Sort%></div> <%- count = count + 1; end; if self.extedit or self.addremove then -%> - <th class="cbi-section-table-cell"> </th> + <div class="th cbi-section-table-cell"> </div> <%- count = count + 1; end -%> - </tr> - <tr class="cbi-section-table-descr"> + </div> + <div class="tr cbi-section-table-descr"> <%- if not self.anonymous then -%> <%- if self.sectiondesc then -%> - <th class="cbi-section-table-cell"><%=self.sectiondesc%></th> + <div class="th cbi-section-table-cell"><%=self.sectiondesc%></div> <%- else -%> - <th></th> + <div class="th"></div> <%- end -%> <%- end -%> <%- for i, k in pairs(self.children) do if not k.optional then -%> - <th class="cbi-section-table-cell"<%=width(k)%>><%=k.description%></th> + <div class="th cbi-section-table-cell"<%=width(k)%>><%=k.description%></div> <%- end; end; if self.sortable then -%> - <th class="cbi-section-table-cell"></th> + <div class="th cbi-section-table-cell"></div> <%- end; if self.extedit or self.addremove then -%> - <th class="cbi-section-table-cell"></th> + <div class="th cbi-section-table-cell"></div> <%- end -%> - </tr> + </div> <%- local isempty = true for i, k in ipairs(self:cfgsections()) do section = k isempty = false scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" } -%> - <tr class="cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>"> + <div class="tr cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>"> <% if not self.anonymous then -%> - <th><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></th> + <div class="th"><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></div> <%- end %> @@ -85,14 +85,14 @@ end -%> <%- if self.sortable then -%> - <td class="cbi-section-table-cell"> + <div class="td cbi-section-table-cell"> <input class="cbi-button cbi-button-up" type="button" value="" onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move up%>" title="<%:Move up%>" /> <input class="cbi-button cbi-button-down" type="button" value="" onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move down%>" title="<%:Move down%>" /> - </td> + </div> <%- end -%> <%- if self.extedit or self.addremove then -%> - <td class="cbi-section-table-cell"> + <div class="td cbi-section-table-cell"> <%- if self.extedit then -%> <input class="cbi-button cbi-button-edit" type="button" value="<%:Edit%>" <%- if type(self.extedit) == "string" then @@ -104,17 +104,17 @@ end <%- end; if self.addremove then %> <input class="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 -%> - </td> + </div> <%- end -%> - </tr> + </div> <%- end -%> <%- if isempty then -%> - <tr class="cbi-section-table-row"> - <td colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></td> - </tr> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></div> + </div> <%- end -%> - </table> + </div> <% if self.error then %> <div class="cbi-section-error"> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm index 2512a35b3..14be40169 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm @@ -164,7 +164,7 @@ ifc.ip6addrs[i] ); } - + if (ifc.ip6prefix) { html += String.format('<strong><%:IPv6-PD%>:</strong> %s<br />', ifc.ip6prefix); @@ -212,20 +212,20 @@ <fieldset class="cbi-section"> <legend><%:Interface Overview%></legend> - <table class="cbi-section-table" style="margin:10px; empty-cells:hide"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Status%></th> - <th class="cbi-section-table-cell"><%:Actions%></th> - </tr> + <div class="table cbi-section-table" style="margin:10px; empty-cells:hide"> + <div class="tr cbi-section-table-titles"> + <div class="th"><%:Network%></div> + <div class="th left"><%:Status%></div> + <div class="th"><%:Actions%></div> + </div> <% for i, net in ipairs(netlist) do local z = net[3] local c = z and z:get_color() or "#EEEEEE" local t = z and translate("Part of zone %q" % z:name()) or translate("No zone assigned") %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>"> - <td class="cbi-value-field" style="padding:3px"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>"> + <div class="td"> <div class="ifacebox"> <div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>"> <strong><%=net[1]:upper()%></strong> @@ -235,19 +235,19 @@ <small>?</small> </div> </div> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net[1]%>-ifc-description"> + </div> + <div class="td left" id="<%=net[1]%>-ifc-description"> <em><%:Collecting data...%></em> - </td> - <td style="width:420px"> + </div> + <div class="td"> <input type="button" class="cbi-button cbi-button-reload" style="width:100px" onclick="iface_shutdown('<%=net[1]%>', true)" title="<%:Reconnect this interface%>" value="<%:Connect%>" /> <input type="button" class="cbi-button cbi-button-reset" style="width:100px" onclick="iface_shutdown('<%=net[1]%>', false)" title="<%:Shutdown this interface%>" value="<%:Stop%>" /> <input type="button" class="cbi-button cbi-button-edit" style="width:100px" onclick="location.href='<%=url("admin/network/network", net[1])%>'" title="<%:Edit this interface%>" value="<%:Edit%>" id="<%=net[1]%>-ifc-edit" /> <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="iface_delete('<%=net[1]%>')" value="<%:Delete%>" /> - </td> - </tr> + </div> + </div> <% end %> - </table> + </div> <input type="button" class="cbi-button cbi-button-add" value="<%:Add new interface...%>" onclick="location.href='<%=url("admin/network/iface_add")%>'" /> </fieldset> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm index b15dd13f3..58f5400da 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm @@ -71,17 +71,17 @@ ); //]]></script> -<table> - <tr class="cbi-section-table"> - <td></td> - <td class="cbi-value-field" style="min-width:16px; padding:3px; text-align:center" id="<%=self.option%>-ifc-signal"> +<div class="table"> + <div class="tr cbi-section-table"> + <div class="td"></div> + <div class="td cbi-value-field" style="min-width:16px; padding:3px; text-align:center" id="<%=self.option%>-ifc-signal"> <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> <small>?</small> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-ifc-description"> + </div> + <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-ifc-description"> <em><%:Collecting data...%></em> - </td> - </tr> -</table> + </div> + </div> +</div> <%+cbi/valuefooter%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm index 28a37dcd9..9005279a4 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm @@ -20,10 +20,10 @@ if (st && st[0] && tb) { /* clear all rows */ - while( tb.rows.length > 1 ) - tb.deleteRow(1); + while (tb.firstElementChild !== tb.lastElementChild) + tb.removeChild(tb.lastElementChild); - for( var i = 0; i < st[0].length; i++ ) + for (var i = 0; i < st[0].length; i++) { var timestr; @@ -34,24 +34,16 @@ else timestr = String.format('%t', st[0][i].expires); - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = st[0][i].hostname ? st[0][i].hostname : '?'; - tr.insertCell(-1).innerHTML = st[0][i].ipaddr; - tr.insertCell(-1).innerHTML = st[0][i].macaddr; - tr.insertCell(-1).innerHTML = timestr; + tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ + E('<div class="td">', st[0][i].hostname || '?'), + E('<div class="td">', st[0][i].ipaddr), + E('<div class="td">', st[0][i].macaddr), + E('<div class="td">', timestr) + ])); } - if( tb.rows.length == 1 ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } + if (tb.firstElementChild === tb.lastElementChild) + tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); } var tb6 = document.getElementById('lease6_status_table'); @@ -60,10 +52,10 @@ tb6.parentNode.style.display = 'block'; /* clear all rows */ - while( tb6.rows.length > 1 ) - tb6.deleteRow(1); + while (tb6.firstElementChild !== tb6.lastElementChild) + tb6.removeChild(tb6.lastElementChild); - for( var i = 0; i < st[1].length; i++ ) + for (var i = 0; i < st[1].length; i++) { var timestr; @@ -74,35 +66,29 @@ else timestr = String.format('%t', st[1][i].expires); - var tr = tb6.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - var host = hosts[duid2mac(st[1][i].duid)]; - if (!st[1][i].hostname) - tr.insertCell(-1).innerHTML = - (host && (host.name || host.ipv4 || host.ipv6)) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">? (%h)</div>'.format(host.name || host.ipv4 || host.ipv6) - : '?'; - else - tr.insertCell(-1).innerHTML = - (host && host.name && st[1][i].hostname != host.name) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(st[1][i].hostname, host.name) - : st[1][i].hostname; - - tr.insertCell(-1).innerHTML = st[1][i].ip6addr; - tr.insertCell(-1).innerHTML = st[1][i].duid; - tr.insertCell(-1).innerHTML = timestr; + var host = hosts[duid2mac(st[1][i].duid)], + name = st[1][i].hostname, + hint = null; + + if (!name) { + if (host) + hint = host.name || host.ipv4 || host.ipv6; + } + else { + if (host && host.name && st[1][i].hostname != host.name) + hint = host.name; + } + + tb6.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">'.format((i % 2) + 1), [ + E('<div class="td">', hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(name || '?', hint) : (name || '?')), + E('<div class="td">', st[1][i].ip6addr), + E('<div class="td">', st[1][i].duid), + E('<div class="td">', timestr) + ])); } - if( tb6.rows.length == 1 ) - { - var tr = tb6.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } + if (tb6.firstElementChild === tb6.lastElementChild) + tb6.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); } } ); @@ -110,30 +96,30 @@ <fieldset class="cbi-section"> <legend><%:Active DHCP Leases%></legend> - <table class="cbi-section-table" id="lease_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IPv4-Address%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="lease_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Hostname%></div> + <div class="th cbi-section-table-cell"><%:IPv4-Address%></div> + <div class="th cbi-section-table-cell"><%:MAC-Address%></div> + <div class="th cbi-section-table-cell"><%:Leasetime remaining%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> <fieldset class="cbi-section" style="display:none"> <legend><%:Active DHCPv6 Leases%></legend> - <table class="cbi-section-table" id="lease6_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Host%></th> - <th class="cbi-section-table-cell"><%:IPv6-Address%></th> - <th class="cbi-section-table-cell"><%:DUID%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="lease6_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Host%></div> + <div class="th cbi-section-table-cell"><%:IPv6-Address%></div> + <div class="th cbi-section-table-cell"><%:DUID%></div> + <div class="th cbi-section-table-cell"><%:Leasetime remaining%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm index 3533c6fa4..e9cfb3e85 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm @@ -91,24 +91,24 @@ <div class="cbi-map"> <fieldset class="cbi-section"> - <table class="cbi-section-table" style="empty-cells:hide"> + <div class="table cbi-section-table" style="empty-cells:hide"> <!-- scan list --> <% for i, net in ipairs(scanlist(3)) do net.encryption = net.encryption or { } %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> - <td class="cbi-value-field" style="width:16px; padding:3px"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> + <div class="td cbi-value-field" style="width:16px; padding:3px"> <abbr title="<%:Signal%>: <%=net.signal%> <%:dB%> / <%:Quality%>: <%=net.quality%>/<%=net.quality_max%>"> <img src="<%=guess_wifi_signal(net)%>" /><br /> <small><%=percent_wifi_signal(net)%>%</small> </abbr> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px"> + </div> + <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px"> <big><strong><%=net.ssid and utl.pcdata(net.ssid) or "<em>%s</em>" % translate("hidden")%></strong></big><br /> <strong>Channel:</strong> <%=net.channel%> | <strong>Mode:</strong> <%=net.mode%> | <strong>BSSID:</strong> <%=net.bssid%> | <strong>Encryption:</strong> <%=format_wifi_encryption(net.encryption)%> - </td> - <td class="cbi-value-field" style="width:40px"> + </div> + <div class="td cbi-value-field" style="width:40px"> <form action="<%=url('admin/network/wireless_join')%>" method="post"> <input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>" /> @@ -128,11 +128,11 @@ <input class="cbi-button cbi-button-apply" type="submit" value="<%:Join Network%>" /> </form> - </td> - </tr> + </div> + </div> <% end %> <!-- /scan list --> - </table> + </div> </fieldset> </div> <div class="cbi-page-actions right"> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm index 4465095ff..31f1fed81 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm @@ -195,8 +195,8 @@ { var assoctable = document.getElementById('iw-assoclist'); if (assoctable) - while (assoctable.rows.length > 1) - assoctable.rows[1].parentNode.removeChild(assoctable.rows[1]); + while (assoctable.firstElementChild !== assoctable.lastElementChild) + assoctable.removeChild(assoctable.lastElementChild); var devup = { }; var rowstyle = 1; @@ -293,7 +293,7 @@ if (assoctable) { var assoclist = [ ]; - for( var bssid in iw.assoclist ) + for (var bssid in iw.assoclist) { assoclist.push(iw.assoclist[bssid]); assoclist[assoclist.length-1].bssid = bssid; @@ -301,11 +301,8 @@ assoclist.sort(function(a, b) { a.bssid < b.bssid }); - for( var j = 0; j < assoclist.length; j++ ) + for (var j = 0; j < assoclist.length; j++) { - var tr = assoctable.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + rowstyle; - var icon; var q = (-1 * (assoclist[j].noise - assoclist[j].signal)) / 5; if (q < 1) @@ -319,48 +316,35 @@ else icon = "<%=resource%>/icons/signal-75-100.png"; - tr.insertCell(-1).innerHTML = String.format( - '<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>', - iw.device.name, iw.ifname - ); - - tr.insertCell(-1).innerHTML = nowrap(String.format('%h', iw.ssid ? iw.ssid : '?')); - tr.insertCell(-1).innerHTML = assoclist[j].bssid; - - var host = hosts[assoclist[j].bssid]; - if (host) - tr.insertCell(-1).innerHTML = String.format( - '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>', - ((host.name && (host.ipv4 || host.ipv6)) - ? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6) - : '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr() - ); - else - tr.insertCell(-1).innerHTML = '?'; - - tr.insertCell(-1).innerHTML = String.format( - '<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>', - assoclist[j].signal, assoclist[j].noise, assoclist[j].signal - assoclist[j].noise, - icon, - assoclist[j].signal, assoclist[j].noise - ); - - tr.insertCell(-1).innerHTML = nowrap(wifirate(assoclist[j], true)) + '<br />' + nowrap(wifirate(assoclist[j], false)); + var host = hosts[assoclist[j].bssid], + name = host ? (host.name || host.ipv4 || host.ipv6) : null, + hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null; + + assoctable.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(rowstyle), [ + E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>' + .format(iw.device.name, iw.ifname)), + E('<div class="td" style="white-space:nowrap">%h</div>' + .format(iw.ssid || '?')), + E('<div class="td">%h</div>' + .format(assoclist[j].bssid)), + E('<div class="td">', hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%h (%h)</div>' + .format(name || '?', hint) : (name || '?')), + E('<div class="td"><span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span></div>' + .format(assoclist[j].signal, assoclist[j].noise, assoclist[j].signal - assoclist[j].noise, icon, assoclist[j].signal, assoclist[j].noise)), + E('<div class="td">', [ + E('<span style="white-space:nowrap">', wifirate(assoclist[j], true)), + E('<br />'), + E('<span style="white-space:nowrap">', wifirate(assoclist[j], false)) + ]) + ])); rowstyle = (rowstyle == 1) ? 2 : 1; } } } - if (assoctable && assoctable.rows.length == 1) - { - var tr = assoctable.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 8; - td.innerHTML = '<br /><em><%:No information available%></em>'; - } + if (assoctable && assoctable.firstElementChild === assoctable.lastElementChild) + assoctable.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:No information available%></em></div></div>')); for (var dev in devup) { @@ -386,15 +370,17 @@ <% for _, dev in ipairs(devices) do local nets = dev:get_wifinets() %> <!-- device <%=dev:name()%> --> <fieldset class="cbi-section"> - <table class="cbi-section-table" style="margin:10px; empty-cells:hide"> + <div class="table cbi-section-table" style="margin:10px; empty-cells:hide"> <!-- physical device --> - <tr> - <td style="width:34px"><img src="<%=resource%>/icons/wifi_big_disabled.png" style="float:left; margin-right:10px" id="<%=dev:name()%>-iw-upstate" /></td> - <td colspan="2" style="text-align:left"> + <div class="tr"> + <div class="td"> + <img src="<%=resource%>/icons/wifi_big_disabled.png" id="<%=dev:name()%>-iw-upstate" /> + </div> + <div class="td left"> <big><strong><%=guess_wifi_hw(dev)%> (<%=dev:name()%>)</strong></big><br /> <span id="<%=dev:name()%>-iw-devinfo"></span> - </td> - <td style="width:310px;text-align:right"> + </div> + <div class="td right"> <form action="<%=url('admin/network/wireless_join')%>" method="post" class="inline"> <input type="hidden" name="device" value="<%=dev:name()%>" /> <input type="hidden" name="token" value="<%=token%>" /> @@ -405,38 +391,36 @@ <input type="hidden" name="token" value="<%=token%>" /> <input type="submit" class="cbi-button cbi-button-add" style="width:100px" title="<%:Provide new network%>" value="<%:Add%>" /> </form> - </td> - </tr> + </div> + </div> <!-- /physical device --> <!-- network list --> <% if #nets > 0 then %> <% for i, net in ipairs(nets) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> - <td></td> - <td class="cbi-value-field" style="vertical-align:middle; padding:3px" id="<%=net:id()%>-iw-signal"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> + <div class="td" id="<%=net:id()%>-iw-signal"> <span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-none.png" /> 0%</span> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net:id()%>-iw-status"> + </div> + <div class="td left" id="<%=net:id()%>-iw-status"> <em><%:Collecting data...%></em> - </td> - <td class="cbi-value-field" style="width:310px;text-align:right"> + </div> + <div class="td right"> <input id="<%=net:id()%>-iw-toggle" type="button" class="cbi-button cbi-button-reload" style="width:100px" onclick="wifi_shutdown('<%=net:id()%>', this)" title="<%:Delete this network%>" value="<%:Enable%>" /> <input type="button" class="cbi-button cbi-button-edit" style="width:100px" onclick="location.href='<%=net:adminlink()%>'" title="<%:Edit this network%>" value="<%:Edit%>" /> <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="wifi_delete('<%=net:id()%>')" title="<%:Delete this network%>" value="<%:Remove%>" /> - </td> - </tr> + </div> + </div> <% end %> <% else %> - <tr class="cbi-section-table-row cbi-rowstyle-2"> - <td></td> - <td colspan="3" class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px"> + <div class="tr cbi-section-table-row cbi-rowstyle-2"> + <div class="td left"> <em><%:No network configured on this device%></em> - </td> - </tr> + </div> + </div> <% end %> <!-- /network list --> - </table> + </div> </fieldset> <!-- /device <%=dev:name()%> --> <% end %> @@ -445,21 +429,21 @@ <h2><%:Associated Stations%></h2> <fieldset class="cbi-section"> - <table class="cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"></th> - <th class="cbi-section-table-cell"><%:SSID%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Host%></th> - <th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th> - <th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th> - </tr> - <tr class="cbi-section-table-row cbi-rowstyle-2"> - <td class="cbi-value-field" colspan="6"> + <div class="table cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"></div> + <div class="th cbi-section-table-cell"><%:SSID%></div> + <div class="th cbi-section-table-cell"><%:MAC-Address%></div> + <div class="th cbi-section-table-cell"><%:Host%></div> + <div class="th cbi-section-table-cell"><%:Signal%> / <%:Noise%></div> + <div class="th cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></div> + </div> + <div class="tr cbi-section-table-row cbi-rowstyle-2"> + <div class="td"> <em><%:Collecting data...%></em> - </td> - </tr> - </table> + </div> + </div> + </div> </fieldset> </div> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm index 04687f38e..85468252e 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm @@ -62,17 +62,17 @@ ); //]]></script> -<table> - <tr class="cbi-section-table"> - <td></td> - <td class="cbi-value-field" style="width:16px; padding:3px" id="<%=self.option%>-iw-signal"> +<div class="table"> + <div class="tr cbi-section-table"> + <div class="td"></div> + <div class="td cbi-value-field" style="width:16px; padding:3px" id="<%=self.option%>-iw-signal"> <img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" /><br /> <small>0%</small> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description"> + </div> + <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description"> <em><%:Collecting data...%></em> - </td> - </tr> -</table> + </div> + </div> +</div> <%+cbi/valuefooter%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm index 33bbee784..db1d0b888 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm @@ -275,27 +275,27 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></td> - <td id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></td> - <td id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - </tr> -</table> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></div> + <div class="td" id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></div> + <div class="td" id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + </div> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm index b7ebc4145..30d93f78b 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm @@ -139,8 +139,8 @@ { var conn = json.connections; - while (conn_table.rows.length > 1) - conn_table.rows[0].parentNode.deleteRow(-1); + while (conn_table.firstElementChild !== conn_table.lastElementChild) + conn_table.removeChild(conn_table.lastElementChild); var lookup_queue = [ ]; @@ -153,13 +153,10 @@ { var c = conn[i]; - if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') - || (c.src == '::1' && c.dst == '::1')) + if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') || + (c.src == '::1' && c.dst == '::1')) continue; - var tr = conn_table.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2)); - if (!dns_cache[c.src]) lookup_queue.push(c.src); @@ -169,14 +166,13 @@ var src = dns_cache[c.src] || (c.layer3 == 'ipv6' ? '[' + c.src + ']' : c.src); var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst); - tr.insertCell(-1).innerHTML = c.layer3.toUpperCase(); - tr.insertCell(-1).innerHTML = c.layer4.toUpperCase(); - tr.insertCell(-1).innerHTML = String.format('%s:%d', src, c.sport); - tr.insertCell(-1).innerHTML = String.format('%s:%d', dst, c.dport); - - var traf = tr.insertCell(-1); - traf.style.whiteSpace = 'nowrap'; - traf.innerHTML = String.format('%1024.2mB (%d <%:Pkts.%>)', c.bytes, c.packets); + conn_table.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [ + E('<div class="td">', c.layer3.toUpperCase()), + E('<div class="td">', c.layer4.toUpperCase()), + E('<div class="td">', [ src, ':', c.sport ]), + E('<div class="td">', [ dst, ':', c.dport ]), + E('<div class="td" style="white-space:nowrap">', '%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)), + ])); } if (lookup_queue.length > 0) @@ -324,52 +320,52 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> - <table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></td> - <td id="lb_udp_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_udp_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_udp_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></td> - <td id="lb_tcp_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_tcp_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_tcp_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></td> - <td id="lb_otr_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_otr_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_otr_peak">0</td> - </tr> - </table> + <div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></div> + <div class="td" id="lb_udp_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_udp_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_udp_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></div> + <div class="td" id="lb_tcp_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_tcp_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_tcp_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></div> + <div class="td" id="lb_otr_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_otr_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_otr_peak">0</div> + </div> + </div> <br /> <div class="cbi-section-node"> - <table class="cbi-section-table" id="connections"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Protocol%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - <th class="cbi-section-table-cell"><%:Destination%></th> - <th class="cbi-section-table-cell"><%:Transfer%></th> - </tr> - - <tr><td colspan="5"><em><%:Collecting data...%></em></td></tr> - </table> + <div class="table cbi-section-table" id="connections"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Network%></div> + <div class="th cbi-section-table-cell"><%:Protocol%></div> + <div class="th cbi-section-table-cell"><%:Source%></div> + <div class="th cbi-section-table-cell"><%:Destination%></div> + <div class="th cbi-section-table-cell"><%:Transfer%></div> + </div> + + <div class="tr"><div class="td" colspan="5"><em><%:Collecting data...%></em></div></div> + </div> </div> </fieldset> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm index 5e6e494ad..a72936f32 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm @@ -235,7 +235,7 @@ '<strong><%:Type%>: </strong>%s%s<br />', ifc6.proto, (ifc6.ip6prefix) ? '-pd' : '' ); - + if (!ifc6.ip6prefix) { s += String.format( @@ -358,10 +358,10 @@ if (ls) { /* clear all rows */ - while( ls.rows.length > 1 ) - ls.rows[0].parentNode.deleteRow(1); + while (ls.firstElementChild !== ls.lastElementChild) + ls.removeChild(ls.lastElementChild); - for( var i = 0; i < info.leases.length; i++ ) + for (var i = 0; i < info.leases.length; i++) { var timestr; @@ -372,24 +372,16 @@ else timestr = String.format('%t', info.leases[i].expires); - var tr = ls.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = info.leases[i].hostname ? info.leases[i].hostname : '?'; - tr.insertCell(-1).innerHTML = info.leases[i].ipaddr; - tr.insertCell(-1).innerHTML = info.leases[i].macaddr; - tr.insertCell(-1).innerHTML = timestr; + ls.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ + E('<div class="td">', info.leases[i].hostname ? info.leases[i].hostname : '?'), + E('<div class="td">', info.leases[i].ipaddr), + E('<div class="td">', info.leases[i].macaddr), + E('<div class="td">', timestr) + ])); } - if( ls.rows.length == 1 ) - { - var tr = ls.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } + if (ls.firstElementChild === ls.lastElementChild) + ls.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); } var ls6 = document.getElementById('lease6_status_table'); @@ -398,10 +390,10 @@ ls6.parentNode.style.display = 'block'; /* clear all rows */ - while( ls6.rows.length > 1 ) - ls6.rows[0].parentNode.deleteRow(1); + while (ls6.firstElementChild !== ls6.lastElementChild) + ls6.removeChild(ls6.lastElementChild); - for( var i = 0; i < info.leases6.length; i++ ) + for (var i = 0; i < info.leases6.length; i++) { var timestr; @@ -412,35 +404,29 @@ else timestr = String.format('%t', info.leases6[i].expires); - var tr = ls6.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - var host = hosts[duid2mac(info.leases6[i].duid)]; - if (!info.leases6[i].hostname) - tr.insertCell(-1).innerHTML = - (host && (host.name || host.ipv4 || host.ipv6)) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">? (%h)</div>'.format(host.name || host.ipv4 || host.ipv6) - : '?'; - else - tr.insertCell(-1).innerHTML = - (host && host.name && info.leases6[i].hostname != host.name) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(info.leases6[i].hostname, host.name) - : info.leases6[i].hostname; - - tr.insertCell(-1).innerHTML = info.leases6[i].ip6addr; - tr.insertCell(-1).innerHTML = info.leases6[i].duid; - tr.insertCell(-1).innerHTML = timestr; - } + var host = hosts[duid2mac(info.leases6[i].duid)], + name = info.leases6[i].hostname, + hint = null; - if( ls6.rows.length == 1 ) - { - var tr = ls6.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row'; + if (!name) { + if (host) + hint = host.name || host.ipv4 || host.ipv6; + } + else { + if (host && host.name && info.leases6[i].hostname != host.name) + hint = host.name; + } - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; + ls6.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">'.format((i % 2) + 1), [ + E('<div class="td">', hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(name || '?', hint) : (name || '?')), + E('<div class="td">', info.leases6[i].ip6addr), + E('<div class="td">', info.leases6[i].duid), + E('<div class="td">', timestr) + ])); } + + if (ls6.firstElementChild === ls6.lastElementChild) + ls6.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); } <% end %> @@ -450,24 +436,12 @@ var ws = document.getElementById('wifi_status_table'); if (ws) { - var wsbody = ws.rows[0].parentNode; - while (ws.rows.length > 0) - wsbody.deleteRow(0); + while (ws.lastElementChild) + ws.removeChild(ws.lastElementChild); for (var didx = 0; didx < info.wifinets.length; didx++) { var dev = info.wifinets[didx]; - - var tr = wsbody.insertRow(-1); - var td; - - td = tr.insertCell(-1); - td.width = "33%"; - td.innerHTML = dev.name; - td.style.verticalAlign = "top"; - - td = tr.insertCell(-1); - var s = ''; for (var nidx = 0; nidx < dev.networks.length; nidx++) @@ -490,10 +464,10 @@ icon = "<%=resource%>/icons/signal-75-100.png"; s += String.format( - '<table><tr><td style="text-align:center; width:32px; padding:3px">' + + '<div class="table"><div class="tr"><div class="td" style="text-align:center; width:32px; padding:3px">' + '<img src="%s" title="<%:Signal%>: %d dBm / <%:Noise%>: %d dBm" />' + '<br /><small>%d%%</small>' + - '</td><td style="text-align:left; padding:3px"><small>' + + '</div><div class="td" style="text-align:left; padding:3px"><small>' + '<strong><%:SSID%>:</strong> <a href="%s">%h</a><br />' + '<strong><%:Mode%>:</strong> %s<br />' + '<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>)<br />' + @@ -520,7 +494,7 @@ s += '<em><%:Wireless is disabled or not associated%></em>'; } - s += '</small></td></tr></table>'; + s += '</small></div></div></div>'; for (var bssid in net.assoclist) { @@ -539,7 +513,10 @@ if (!s) s = '<em><%:No information available%></em>'; - td.innerHTML = s; + ws.appendChild(E('<div class="tr">', [ + E('<div class="td left" width="33%" style="vertical-align:top">', dev.name), + E('<div class="td">', s) + ])); } } @@ -547,8 +524,8 @@ if (ac) { /* clear all rows */ - while( ac.rows.length > 1 ) - ac.rows[0].parentNode.deleteRow(1); + while (ac.firstElementChild !== ac.lastElementChild) + ac.removeChild(ac.lastElementChild); assoclist.sort(function(a, b) { return (a.name == b.name) @@ -557,11 +534,8 @@ ; }); - for( var i = 0; i < assoclist.length; i++ ) + for (var i = 0; i < assoclist.length; i++) { - var tr = ac.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2)); - var icon; var q = (-1 * (assoclist[i].noise - assoclist[i].signal)) / 5; if (q < 1) @@ -575,49 +549,31 @@ else icon = "<%=resource%>/icons/signal-75-100.png"; - tr.insertCell(-1).innerHTML = String.format( - '<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>', - assoclist[i].radio, assoclist[i].ifname - ); - - tr.insertCell(-1).innerHTML = String.format( - '<a href="%s">%s</a>', - assoclist[i].link, - '%h'.format(assoclist[i].name).nobr() - ); - - tr.insertCell(-1).innerHTML = assoclist[i].bssid; - - var host = hosts[assoclist[i].bssid]; - if (host) - tr.insertCell(-1).innerHTML = String.format( - '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>', - ((host.name && (host.ipv4 || host.ipv6)) - ? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6) - : '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr() - ); - else - tr.insertCell(-1).innerHTML = '?'; - - tr.insertCell(-1).innerHTML = String.format( - '<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>', - assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, - icon, - assoclist[i].signal, assoclist[i].noise - ); - - tr.insertCell(-1).innerHTML = wifirate(assoclist[i], true).nobr() + '<br />' + wifirate(assoclist[i], false).nobr(); + var host = hosts[assoclist[i].bssid], + name = host ? (host.name || host.ipv4 || host.ipv6) : null, + hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null; + + ac.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [ + E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>' + .format(assoclist[i].radio, assoclist[i].ifname)), + E('<div class="td"><a href="%s" style="white-space:nowrap">%h</a></div>' + .format(assoclist[i].link, assoclist[i].name)), + E('<div class="td">', + assoclist[i].bssid), + E('<div class="td">', + hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%h (%h)</div>'.format(name || '?', hint) : (name || '?')), + E('<div class="td"><span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span></div>' + .format(assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, icon, assoclist[i].signal, assoclist[i].noise)), + E('<div class="td">', [ + E('<span style="white-space:nowrap">', wifirate(assoclist[i], true)), + E('<br />'), + E('<span style="white-space:nowrap">', wifirate(assoclist[i], false)) + ]) + ])); } - if (ac.rows.length == 1) - { - var tr = ac.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 7; - td.innerHTML = '<br /><em><%:No information available%></em>'; - } + if (ac.firstElementChild === ac.lastElementChild) + ac.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:No information available%></em></div></div>')); } <% end %> @@ -679,108 +635,113 @@ <fieldset class="cbi-section"> <legend><%:System%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Hostname%></td><td><%=luci.sys.hostname() or "?"%></td></tr> - <tr><td width="33%"><%:Model%></td><td><%=pcdata(boardinfo.model or boardinfo.system or "?")%></td></tr> - <tr><td width="33%"><%:Firmware Version%></td><td> + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Hostname%></div><div class="td left"><%=luci.sys.hostname() or "?"%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Model%></div><div class="td left"><%=pcdata(boardinfo.model or boardinfo.system or "?")%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Firmware Version%></div><div class="td left"> <%=pcdata(ver.distname)%> <%=pcdata(ver.distversion)%> / <%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>) - </td></tr> - <tr><td width="33%"><%:Kernel Version%></td><td><%=unameinfo.release or "?"%></td></tr> - <tr><td width="33%"><%:Local Time%></td><td id="localtime">-</td></tr> - <tr><td width="33%"><%:Uptime%></td><td id="uptime">-</td></tr> - <tr><td width="33%"><%:Load Average%></td><td id="loadavg">-</td></tr> - </table> + </div></div> + <div class="tr"><div class="td left" width="33%"><%:Kernel Version%></div><div class="td left"><%=unameinfo.release or "?"%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Local Time%></div><div class="td left" id="localtime">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Uptime%></div><div class="td left" id="uptime">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Load Average%></div><div class="td left" id="loadavg">-</div></div> + </div> </fieldset> <fieldset class="cbi-section"> <legend><%:Memory%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Total Available%></td><td id="memtotal">-</td></tr> - <tr><td width="33%"><%:Free%></td><td id="memfree">-</td></tr> - <tr><td width="33%"><%:Buffered%></td><td id="membuff">-</td></tr> - </table> + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="memtotal">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="memfree">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left" id="membuff">-</div></div> + </div> </fieldset> <% if swapinfo.total > 0 then %> <fieldset class="cbi-section"> <legend><%:Swap%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Total Available%></td><td id="swaptotal">-</td></tr> - <tr><td width="33%"><%:Free%></td><td id="swapfree">-</td></tr> - </table> + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="swaptotal">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="swapfree">-</div></div> + </div> </fieldset> <% end %> <fieldset class="cbi-section"> <legend><%:Network%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></td><td> - <table><tr> - <td id="wan4_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> - <td id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> - </tr></table> - </td></tr> + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></div><div class="td"> + <div class="table"><div class="tr"> + <div class="td" id="wan4_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div> + <div class="td left" id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div> + </div></div> + </div></div> <% if has_ipv6 then %> - <tr><td width="33%" style="vertical-align:top"><%:IPv6 WAN Status%></td><td> - <table><tr> - <td id="wan6_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> - <td id="wan6_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> - </tr></table> - </td></tr> + <div class="tr"><div class="td left" width="33%" style="vertical-align:top"><%:IPv6 WAN Status%></div><div class="td"> + <div class="table"><div class="tr"> + <div class="td" id="wan6_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div> + <div class="td left" id="wan6_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div> + </div></div> + </div></div> <% end %> - <tr><td width="33%"><%:Active Connections%></td><td id="conns">-</td></tr> - </table> + <div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div> + </div> </fieldset> <% if has_dhcp then %> <fieldset class="cbi-section"> <legend><%:DHCP Leases%></legend> - <table class="cbi-section-table" id="lease_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IPv4-Address%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="lease_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th"><%:Hostname%></div> + <div class="th"><%:IPv4-Address%></div> + <div class="th"><%:MAC-Address%></div> + <div class="th"><%:Leasetime remaining%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> <fieldset class="cbi-section" style="display:none"> <legend><%:DHCPv6 Leases%></legend> - <table class="cbi-section-table" id="lease6_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Host%></th> - <th class="cbi-section-table-cell"><%:IPv6-Address%></th> - <th class="cbi-section-table-cell"><%:DUID%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table" id="lease6_status_table"> + <div class="tr cbi-section-table-titles"> + <div class="th"><%:Host%></div> + <div class="th"><%:IPv6-Address%></div> + <div class="th"><%:DUID%></div> + <div class="th"><%:Leasetime remaining%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> <% end %> <% if has_dsl then %> <fieldset class="cbi-section"> - <legend><%:DSL%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%" style="vertical-align:top"><%:DSL Status%></td><td> - <table><tr> - <td id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> - <td id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> - </tr></table> - </td></tr> - </table> + <legend><%:DSL%></legend> + <div class="table" width="100%"> + <div class="tr"> + <div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div> + <div class="td"> + <div class="table"> + <div class="tr"> + <div class="td" id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div> + <div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div> + </div> + </div> + </div> + </div> + </div> </fieldset> <% end %> @@ -788,27 +749,27 @@ <fieldset class="cbi-section"> <legend><%:Wireless%></legend> - <table id="wifi_status_table" width="100%" cellspacing="10"> - <tr><td><em><%:Collecting data...%></em></td></tr> - </table> + <div class="table" id="wifi_status_table" width="100%"> + <div class="tr"><div class="td"><em><%:Collecting data...%></em></div></div> + </div> </fieldset> <fieldset class="cbi-section"> <legend><%:Associated Stations%></legend> - <table class="cbi-section-table valign-middle" id="wifi_assoc_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"> </th> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Host%></th> - <th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th> - <th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="6"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <div class="table cbi-section-table valign-middle" id="wifi_assoc_table"> + <div class="tr cbi-section-table-titles"> + <div class="th"> </div> + <div class="th"><%:Network%></div> + <div class="th"><%:MAC-Address%></div> + <div class="th"><%:Host%></div> + <div class="th"><%:Signal%> / <%:Noise%></div> + <div class="th"><%:RX Rate%> / <%:TX Rate%></div> + </div> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="6"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> <% end %> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm index 3f4b83b80..ced4d5f77 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm @@ -92,14 +92,14 @@ <% for _, tbl in ipairs(tables) do chaincnt = 0 %> <h3><%:Table%>: <%=tbl%></h3> - <table class="cbi-section-table" style="font-size:90%"> + <div class="table cbi-section-table" style="font-size:90%"> <% for _, chain in ipairs(ipt:chains(tbl)) do rowcnt = 0 chaincnt = chaincnt + 1 chaininfo = ipt:chain(tbl, chain) %> - <tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> - <th class="cbi-section-table-cell" style="text-align:left" colspan="11"> + <div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> + <div class="th cbi-section-table-cell" style="text-align:left" colspan="11"> <br /><span id="rule_<%=tbl:lower()%>_<%=chain%>"> <%:Chain%> <em><%=chain%></em> (<%- if chaininfo.policy then -%> @@ -107,47 +107,47 @@ <%- else -%> <%:References%>: <%=chaininfo.references-%> <%- end -%>)</span> - </th> - </tr> - <tr class="cbi-section-table-descr"> - <th class="cbi-section-table-cell"><%:Pkts.%></th> - <th class="cbi-section-table-cell"><%:Traffic%></th> - <th class="cbi-section-table-cell"><%:Target%></th> - <th class="cbi-section-table-cell"><%:Prot.%></th> - <th class="cbi-section-table-cell"><%:In%></th> - <th class="cbi-section-table-cell"><%:Out%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - <th class="cbi-section-table-cell"><%:Destination%></th> - <th class="cbi-section-table-cell" style="width:30%"><%:Options%></th> - </tr> + </div> + </div> + <div class="tr cbi-section-table-descr"> + <div class="th cbi-section-table-cell"><%:Pkts.%></div> + <div class="th cbi-section-table-cell"><%:Traffic%></div> + <div class="th cbi-section-table-cell"><%:Target%></div> + <div class="th cbi-section-table-cell"><%:Prot.%></div> + <div class="th cbi-section-table-cell"><%:In%></div> + <div class="th cbi-section-table-cell"><%:Out%></div> + <div class="th cbi-section-table-cell"><%:Source%></div> + <div class="th cbi-section-table-cell"><%:Destination%></div> + <div class="th cbi-section-table-cell" style="width:30%"><%:Options%></div> + </div> <% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> - <td><%=rule.packets%></td> - <td style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></td> - <td><%=rule.target and link_target(tbl, rule.target) or "-"%></td> - <td><%=rule.protocol%></td> - <td><%=link_iface(rule.inputif)%></td> - <td><%=link_iface(rule.outputif)%></td> - <td><%=rule.source%></td> - <td><%=rule.destination%></td> - <td style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> + <div class="td"><%=rule.packets%></div> + <div class="td" style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></div> + <div class="td"><%=rule.target and link_target(tbl, rule.target) or "-"%></div> + <div class="td"><%=rule.protocol%></div> + <div class="td"><%=link_iface(rule.inputif)%></div> + <div class="td"><%=link_iface(rule.outputif)%></div> + <div class="td"><%=rule.source%></div> + <div class="td"><%=rule.destination%></div> + <div class="td" style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></div> + </div> <% end %> <% if rowcnt == 1 then %> - <tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> - <td colspan="9"><em><%:No rules in this chain%></em></td> - </tr> + <div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> + <div class="td" colspan="9"><em><%:No rules in this chain%></em></div> + </div> <% end %> <% end %> <% if chaincnt == 0 then %> - <tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> - <td colspan="9"><em><%:No chains in this table%></em></td> - </tr> + <div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> + <div class="td" colspan="9"><em><%:No chains in this table%></em></div> + </div> <% end %> - </table> + </div> <br /><br /> <% end %> </fieldset> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm index 97a2f5ed5..c8ada7156 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm @@ -248,37 +248,37 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></td> - <td id="lb_load01_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_load01_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_load01_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></td> - <td id="lb_load05_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_load05_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_load05_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></td> - <td id="lb_load15_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_load15_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_load15_peak">0</td> - </tr> -</table> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></div> + <div class="td" id="lb_load01_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_load01_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_load01_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></div> + <div class="td" id="lb_load05_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_load05_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_load05_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></div> + <div class="td" id="lb_load15_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_load15_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_load15_peak">0</div> + </div> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm index f474c7156..af8037135 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm @@ -39,28 +39,28 @@ <fieldset class="cbi-section"> <legend>ARP</legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></th> - <th class="cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></div> + <div class="th cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></div> + <div class="th cbi-section-table-cell"><%:Interface%></div> + </div> <% for _, v in ipairs(ip.neighbors({ family = 4 })) do if v.mac then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.mac%></td> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td cbi-value-field"><%=v.dest%></div> + <div class="td cbi-value-field"><%=v.mac%></div> + <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div> + </div> <% style = not style end end %> - </table> + </div> </div> </fieldset> <br /> @@ -69,24 +69,24 @@ <legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Target%></th> - <th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></th> - <th class="cbi-section-table-cell"><%:Metric%></th> - <th class="cbi-section-table-cell"><%:Table%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Network%></div> + <div class="th cbi-section-table-cell"><%:Target%></div> + <div class="th cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></div> + <div class="th cbi-section-table-cell"><%:Metric%></div> + <div class="th cbi-section-table-cell"><%:Table%></div> + </div> <% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></td> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.gw%></td> - <td class="cbi-value-field"><%=v.metric or 0%></td> - <td class="cbi-value-field"><%=rtn[v.table] or v.table%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></div> + <div class="td cbi-value-field"><%=v.dest%></div> + <div class="td cbi-value-field"><%=v.gw%></div> + <div class="td cbi-value-field"><%=v.metric or 0%></div> + <div class="td cbi-value-field"><%=rtn[v.table] or v.table%></div> + </div> <% style = not style end %> - </table> + </div> </div> </fieldset> <br /> @@ -99,31 +99,31 @@ <legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Target%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - <th class="cbi-section-table-cell"><%:Metric%></th> - <th class="cbi-section-table-cell"><%:Table%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Network%></div> + <div class="th cbi-section-table-cell"><%:Target%></div> + <div class="th cbi-section-table-cell"><%:Source%></div> + <div class="th cbi-section-table-cell"><%:Metric%></div> + <div class="th cbi-section-table-cell"><%:Table%></div> + </div> <% for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do if v.dest and not v.dest:is6linklocal() then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.from%></td> - <td class="cbi-value-field"><%=v.metric or 0%></td> - <td class="cbi-value-field"><%=rtn[v.table] or v.table%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div> + <div class="td cbi-value-field"><%=v.dest%></div> + <div class="td cbi-value-field"><%=v.from%></div> + <div class="td cbi-value-field"><%=v.metric or 0%></div> + <div class="td cbi-value-field"><%=rtn[v.table] or v.table%></div> + </div> <% style = not style end end %> - </table> + </div> </div> </fieldset> <br /> @@ -132,27 +132,27 @@ <legend><%:IPv6 Neighbours%></legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:IPv6-Address%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:IPv6-Address%></div> + <div class="th cbi-section-table-cell"><%:MAC-Address%></div> + <div class="th cbi-section-table-cell"><%:Interface%></div> + </div> <% for _, v in ipairs(ip.neighbors({ family = 6 })) do if v.dest and not v.dest:is6linklocal() and v.mac then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.mac%></td> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td cbi-value-field"><%=v.dest%></div> + <div class="td cbi-value-field"><%=v.mac%></div> + <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div> + </div> <% style = not style end end %> - </table> + </div> </div> </fieldset> <br /> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm index aa658ff0c..4211b2647 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm @@ -325,28 +325,28 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></td> - <td id="rssi_bw_cur">0 <%:dBm%></td> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></div> + <div class="td" id="rssi_bw_cur">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="rssi_bw_avg">0 <%:dBm%></td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="rssi_bw_avg">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="rssi_bw_peak">0 <%:dBm%></td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></td> - <td id="noise_bw_cur">0 <%:dBm%></td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="rssi_bw_peak">0 <%:dBm%></div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></div> + <div class="td" id="noise_bw_cur">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="noise_bw_avg">0 <%:dBm%></td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="noise_bw_avg">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="noise_bw_peak">0 <%:dBm%></td> - </tr> -</table> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="noise_bw_peak">0 <%:dBm%></div> + </div> +</div> <br /> @@ -354,17 +354,17 @@ <div style="text-align:right"><small id="scale2">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></td> - <td id="rate_bw_cur">0 MBit/s</td> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></div> + <div class="td" id="rate_bw_cur">0 MBit/s</div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="rate_bw_avg">0 MBit/s</td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="rate_bw_avg">0 MBit/s</div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="rate_bw_peak">0 MBit/s</td> - </tr> -</table> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="rate_bw_peak">0 MBit/s</div> + </div> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm b/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm index 88e0fffd9..4944a232b 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm @@ -128,34 +128,34 @@ end <% if display ~= "available" then %> <fieldset class="cbi-section"> - <table class="cbi-section-table" style="width:100%"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" style="text-align:left"> </th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Package name%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Version%></th> - </tr> + <div class="table cbi-section-table" style="width:100%"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell" style="text-align:left"> </div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Package name%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Version%></div> + </div> <% local empty = true; luci.model.ipkg.list_installed(querypat, function(n, v, s, d) empty = false; filter[n] = true %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> - <td style="text-align:left; width:10%"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> + <div class="td" style="text-align:left; width:10%"> <form method="post" class="inline" action="<%=REQUEST_URI%>"> <input type="hidden" name="exec" value="1" /> <input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="remove" value="<%=pcdata(n)%>" /> <a onclick="window.confirm('<%:Remove%> "<%=luci.util.pcdata(n)%>" ?') && this.parentNode.submit(); return false" href="#"><%:Remove%></a> </form> - </td> - <td style="text-align:left"><%=luci.util.pcdata(n)%></td> - <td style="text-align:left"><%=luci.util.pcdata(v)%></td> - </tr> + </div> + <div class="td" style="text-align:left"><%=luci.util.pcdata(n)%></div> + <div class="td" style="text-align:left"><%=luci.util.pcdata(v)%></div> + </div> <% end) %> <% if empty then %> - <tr class="cbi-section-table-row"> - <td style="text-align:left"> </td> - <td style="text-align:left"><em><%:none%></em></td> - <td style="text-align:left"><em><%:none%></em></td> - </tr> + <div class="tr cbi-section-table-row"> + <div class="td" style="text-align:left"> </div> + <div class="td" style="text-align:left"><em><%:none%></em></div> + <div class="td" style="text-align:left"><em><%:none%></em></div> + </div> <% end %> - </table> + </div> </fieldset> <% else %> <fieldset class="cbi-section"> @@ -168,40 +168,40 @@ end </ul> <div class="cbi-section-node"> <% end %> - <table class="cbi-section-table" style="width:100%"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" style="text-align:left"> </th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Package name%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Version%></th> - <th class="cbi-section-table-cell" style="text-align:right"><%:Size (.ipk)%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Description%></th> - </tr> + <div class="table cbi-section-table" style="width:100%"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell" style="text-align:left"> </div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Package name%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Version%></div> + <div class="th cbi-section-table-cell" style="text-align:right"><%:Size (.ipk)%></div> + <div class="th cbi-section-table-cell" style="text-align:left"><%:Description%></div> + </div> <% local empty = true; opkg_list(querypat or letterpat, function(n, v, s, d) if filter[n] then return end; empty = false %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> - <td style="text-align:left; width:10%"> + <div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> + <div class="td" style="text-align:left; width:10%"> <form method="post" class="inline" action="<%=REQUEST_URI%>"> <input type="hidden" name="exec" value="1" /> <input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="install" value="<%=pcdata(n)%>" /> <a onclick="window.confirm('<%:Install%> "<%=luci.util.pcdata(n)%>" ?') && this.parentNode.submit(); return false" href="#"><%:Install%></a> </form> - </td> - <td style="text-align:left"><%=luci.util.pcdata(n)%></td> - <td style="text-align:left"><%=luci.util.pcdata(v)%></td> - <td style="text-align:right"><%=luci.util.pcdata(s)%></td> - <td style="text-align:left"><%=luci.util.pcdata(d)%></td> - </tr> + </div> + <div class="td" style="text-align:left"><%=luci.util.pcdata(n)%></div> + <div class="td" style="text-align:left"><%=luci.util.pcdata(v)%></div> + <div class="td" style="text-align:right"><%=luci.util.pcdata(s)%></div> + <div class="td" style="text-align:left"><%=luci.util.pcdata(d)%></div> + </div> <% end) %> <% if empty then %> - <tr class="cbi-section-table-row"> - <td style="text-align:left"> </td> - <td style="text-align:left"><em><%:none%></em></td> - <td style="text-align:left"><em><%:none%></em></td> - <td style="text-align:right"><em><%:none%></em></td> - <td style="text-align:left"><em><%:none%></em></td> - </tr> + <div class="tr cbi-section-table-row"> + <div class="td" style="text-align:left"> </div> + <div class="td" style="text-align:left"><em><%:none%></em></div> + <div class="td" style="text-align:left"><em><%:none%></em></div> + <div class="td" style="text-align:right"><em><%:none%></em></div> + <div class="td" style="text-align:left"><em><%:none%></em></div> + </div> <% end %> - </table> + </div> <% if not querypat then %> </div> <% end %> diff --git a/modules/luci-mod-freifunk/luasrc/view/freifunk/contact.htm b/modules/luci-mod-freifunk/luasrc/view/freifunk/contact.htm index 1add595c6..dca35376c 100644 --- a/modules/luci-mod-freifunk/luasrc/view/freifunk/contact.htm +++ b/modules/luci-mod-freifunk/luasrc/view/freifunk/contact.htm @@ -31,33 +31,33 @@ end <fieldset xmlns="http://www.w3.org/1999/xhtml" class="cbi-section"> <legend><%:Operator%></legend> - <table cellspacing="10" width="100%" style="text-align:left"> - <tr><th width="33%"><%:Nickname%>:</th><td><%=nickname%></td></tr> - <tr><th width="33%"><%:Realname%>:</th><td><%=name%></td></tr> - <tr><th width="33%"><%:Homepage%>:</th><td> + <div class="table" cellspacing="10" width="100%" style="text-align:left"> + <div class="tr"><div class="th" width="33%"><%:Nickname%>:</div><div class="td"><%=nickname%></div></div> + <div class="tr"><div class="th" width="33%"><%:Realname%>:</div><div class="td"><%=name%></div></div> + <div class="tr"><div class="th" width="33%"><%:Homepage%>:</div><div class="td"> <% for k, v in ipairs(homepage) do %> <a href="<%=v%>"><%=v%></a><br /> <% end %> - </td></tr> - <tr><th width="33%"><%:E-Mail%>:</th><td><a href="mailto:<%=mail%>"><%=mail%></a></td></tr> - <tr><th width="33%"><%:Phone%>:</th><td><%=phone%></td></tr> - </table> + </div></div> + <div class="tr"><div class="th" width="33%"><%:E-Mail%>:</div><div class="td"><a href="mailto:<%=mail%>"><%=mail%></a></div></div> + <div class="tr"><div class="th" width="33%"><%:Phone%>:</div><div class="td"><%=phone%></div></div> + </div> </fieldset> <fieldset xmlns="http://www.w3.org/1999/xhtml" class="cbi-section"> <legend><%:Location%></legend> - <table cellspacing="10" width="100%" style="text-align:left"> - <tr><th width="33%"><%:Location%>:</th><td><%=location%></td></tr> - <tr><th width="33%"><%:Coordinates%>:</th><td><%=lat%> <%=lon%> (<a href="<%=pcdata(luci.dispatcher.build_url("freifunk/map"))%>"><%:Show on map%>)</a></td></tr> - </table> + <div class="table" cellspacing="10" width="100%" style="text-align:left"> + <div class="tr"><div class="th" width="33%"><%:Location%>:</div><div class="td"><%=location%></div></div> + <div class="tr"><div class="th" width="33%"><%:Coordinates%>:</div><div class="td"><%=lat%> <%=lon%> (<a href="<%=pcdata(luci.dispatcher.build_url("freifunk/map"))%>"><%:Show on map%>)</a></div></div> + </div> </fieldset> <% if note then %> <fieldset xmlns="http://www.w3.org/1999/xhtml" class="cbi-section"> <legend><%:Notice%></legend> - <table cellspacing="10" width="100%" style="text-align:left"> - <tr><td><%=note%></td></tr> - </table> + <div class="table" cellspacing="10" width="100%" style="text-align:left"> + <div class="tr"><div class="td"><%=note%></div></div> + </div> </fieldset> <%end%> diff --git a/modules/luci-mod-freifunk/luasrc/view/freifunk/public_status.htm b/modules/luci-mod-freifunk/luasrc/view/freifunk/public_status.htm index 1dc1d8b0d..a71926141 100644 --- a/modules/luci-mod-freifunk/luasrc/view/freifunk/public_status.htm +++ b/modules/luci-mod-freifunk/luasrc/view/freifunk/public_status.htm @@ -246,17 +246,17 @@ end <div class="cbi-section"> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Signal%></th> - <th class="cbi-section-table-cell"><%:Bitrate%></th> - <th class="cbi-section-table-cell"><%:SSID%></th> - <th class="cbi-section-table-cell"><%:BSSID%></th> - <th class="cbi-section-table-cell"><%:Channel%></th> - <th class="cbi-section-table-cell"><%:Mode%></th> - <th class="cbi-section-table-cell"><%:TX%>-<%:Power%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Signal%></div> + <div class="th cbi-section-table-cell"><%:Bitrate%></div> + <div class="th cbi-section-table-cell"><%:SSID%></div> + <div class="th cbi-section-table-cell"><%:BSSID%></div> + <div class="th cbi-section-table-cell"><%:Channel%></div> + <div class="th cbi-section-table-cell"><%:Mode%></div> + <div class="th cbi-section-table-cell"><%:TX%>-<%:Power%></div> + <div class="th cbi-section-table-cell"><%:Interface%></div> + </div> <% for _, dev in ipairs(devices) do local net @@ -301,20 +301,20 @@ end end local interface = net.iwinfo.ifname or "N/A" %> - <tr class="cbi-section-table-row cbi-rowstyle-1"> - <td class="cbi-value-field" id="<%=net:ifname()%>-signal"><%=signal_string%></td> - <td class="cbi-value-field" id="<%=net:ifname()%>-bitrate"><%=bitrate%></td> - <td class="cbi-value-field" id="<%=net:ifname()%>-ssid"><%=ssid%></td> - <td class="cbi-value-field" id="<%=net:ifname()%>-bssid"><%=bssid%></td> - <td class="cbi-value-field" id="<%=net:ifname()%>-channel"><%=chan%></td> - <td class="cbi-value-field" id="<%=net:ifname()%>-mode"><%=mode%></td> - <td class="cbi-value-field" id="<%=net:ifname()%>-txpower"><%=txpwr%></td> - <td class="cbi-value-field"><%=interface%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-1"> + <div class="td cbi-value-field" id="<%=net:ifname()%>-signal"><%=signal_string%></div> + <div class="td cbi-value-field" id="<%=net:ifname()%>-bitrate"><%=bitrate%></div> + <div class="td cbi-value-field" id="<%=net:ifname()%>-ssid"><%=ssid%></div> + <div class="td cbi-value-field" id="<%=net:ifname()%>-bssid"><%=bssid%></div> + <div class="td cbi-value-field" id="<%=net:ifname()%>-channel"><%=chan%></div> + <div class="td cbi-value-field" id="<%=net:ifname()%>-mode"><%=mode%></div> + <div class="td cbi-value-field" id="<%=net:ifname()%>-txpower"><%=txpwr%></div> + <div class="td cbi-value-field"><%=interface%></div> + </div> <% end end end %> - </table> + </div> </div> </div> </div> @@ -328,35 +328,35 @@ end <% if not def4 and not def6 then %> <%:No default routes known.%> <%else%> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - <th class="cbi-section-table-cell"><%:Gateway%></th> - <th class="cbi-section-table-cell"><%:Metric%></th> - </tr> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Network%></div> + <div class="th cbi-section-table-cell"><%:Interface%></div> + <div class="th cbi-section-table-cell"><%:Gateway%></div> + <div class="th cbi-section-table-cell"><%:Metric%></div> + </div> <% if def4 then %> - <tr class="cbi-section-table-row cbi-rowstyle-1"> - <td class="cbi-value-field" id="v4dst"><%=def4.dest%></td> - <td class="cbi-value-field" id="v4dev"><%=def4.dev%></td> - <td class="cbi-value-field" id="v4gw"><%=def4.gateway%></td> - <td class="cbi-value-field" id="v4metr"><%=def4.metr%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-1"> + <div class="td cbi-value-field" id="v4dst"><%=def4.dest%></div> + <div class="td cbi-value-field" id="v4dev"><%=def4.dev%></div> + <div class="td cbi-value-field" id="v4gw"><%=def4.gateway%></div> + <div class="td cbi-value-field" id="v4metr"><%=def4.metr%></div> + </div> <% end if def6 then %> - <tr class="cbi-section-table-row cbi-rowstyle-2"> - <td class="cbi-value-field" id="v6dst"><%=def6.dest%></td> - <td class="cbi-value-field" id="v6dev"><%=def6.dev%></td> - <td class="cbi-value-field" id="v6gw"><%=def6.gateway%></td> - <td class="cbi-value-field" id="v6metr"><%=def6.metr%></td> - </tr> + <div class="tr cbi-section-table-row cbi-rowstyle-2"> + <div class="td cbi-value-field" id="v6dst"><%=def6.dest%></div> + <div class="td cbi-value-field" id="v6dev"><%=def6.dev%></div> + <div class="td cbi-value-field" id="v6gw"><%=def6.gateway%></div> + <div class="td cbi-value-field" id="v6metr"><%=def6.metr%></div> + </div> <% end %> - </table> + </div> <% end %> </div> </div> |