diff options
Diffstat (limited to 'modules/luci-mod-admin-full/luasrc/view')
14 files changed, 589 insertions, 662 deletions
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 2512a35b3c..14be401697 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 b15dd13f39..58f5400da7 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 28a37dcd98..9005279a4e 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 3533c6fa4d..e9cfb3e85b 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 4465095ff2..31f1fed81f 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 04687f38e7..85468252e9 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 33bbee7843..db1d0b8883 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 b7ebc41451..30d93f78bc 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 5e6e494ad6..a72936f321 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 3f4b83b80b..ced4d5f774 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 97a2f5ed59..c8ada71569 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 f474c71568..af80371353 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 aa658ff0cb..4211b26471 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 88e0fffd9c..4944a232b2 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 %> |