luci-mod-admin-full: cleanup markup

Globally cleanup template markup to support responsive design changes in
OpenWrt theme.

Rework handling of dynamic status tables, consolidate hand-written markup,
fix small render bugs in various places and annotate tables where needed.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 54 insertions, 59 deletions

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 af80371353..9ed37939fe 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
@@ -32,28 +32,30 @@
 
 <%+header%>
 
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+
 <div class="cbi-map" id="cbi-network">
 	<h2 name="content"><%:Routes%></h2>
 	<div class="cbi-map-descr"><%:The following rules are currently active on this system.%></div>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend>ARP</legend>
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></div>
+					<div class="th"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></div>
+					<div class="th"><%:Interface%></div>
 				</div>
 
 				<%
 					for _, v in ipairs(ip.neighbors({ family = 4 })) do
 						if v.mac then
 				%>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.mac%></div>
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
 				</div>
 				<%
 							style = not style
@@ -62,61 +64,57 @@
 				%>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend>
-
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%:Network%></div>
+					<div class="th"><%:Target%></div>
+					<div class="th"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></div>
+					<div class="th"><%:Metric%></div>
+					<div class="th"><%:Table%></div>
 				</div>
 				<% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></div>
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.gw or "-"%></div>
+					<div class="td"><%=v.metric or 0%></div>
+					<div class="td"><%=rtn[v.table] or v.table%></div>
 				</div>
 				<% style = not style end %>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 
 	<%
 		if nixio.fs.access("/proc/net/ipv6_route") then
 			style = true
 	%>
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend>
-
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%:Network%></div>
+					<div class="th"><%:Target%></div>
+					<div class="th"><%:Source%></div>
+					<div class="th"><%:Metric%></div>
+					<div class="th"><%:Table%></div>
 				</div>
 				<%
 					for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do
 						if v.dest and not v.dest:is6linklocal() then
 				%>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.from%></div>
+					<div class="td"><%=v.metric or 0%></div>
+					<div class="td"><%=rtn[v.table] or v.table%></div>
 				</div>
 				<%
 							style = not style
@@ -125,27 +123,25 @@
 				%>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<legend><%:IPv6 Neighbours%></legend>
-
 		<div class="cbi-section-node">
-			<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 class="table">
+				<div class="tr table-titles">
+					<div class="th"><%:IPv6-Address%></div>
+					<div class="th"><%:MAC-Address%></div>
+					<div class="th"><%:Interface%></div>
 				</div>
 				<%
 					for _, v in ipairs(ip.neighbors({ family = 6 })) do
 						if v.dest and not v.dest:is6linklocal() and v.mac then
 				%>
-				<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 class="tr cbi-rowstyle-<%=(style and 1 or 2)%>">
+					<div class="td"><%=v.dest%></div>
+					<div class="td"><%=v.mac%></div>
+					<div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
 				</div>
 				<%
 							style = not style
@@ -154,8 +150,7 @@
 				%>
 			</div>
 		</div>
-	</fieldset>
-	<br />
+	</div>
 	<% end %>
 </div>