luci-base: globally cleanup markup

 - add responsive attributes to partial cbi templates
 - unify and fix button style classes
 - fix styling of sysauth dialog
 - rework firewall_zoneforwards widget

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

1 files changed, 46 insertions, 33 deletions

diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm b/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm
index 546fd8e85a..b38e4b13db 100644
--- a/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm
+++ b/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm
@@ -14,46 +14,59 @@
 	local def  = fwm:get_defaults()
 	local zone = fwm:get_zone(value)
 	local empty = true
+
+	local function render_zone(zone)
+-%>
+		<label class="zonebadge" style="background-color:<%=zone:get_color()%>">
+			<strong><%=zone:name()%></strong>
+			<div class="cbi-tooltip">
+			<%-
+				local zempty = true
+				for _, net in ipairs(zone:get_networks()) do
+					net = nwm:get_network(net)
+					if net then
+						zempty = false
+			-%>
+				<span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:&#160;
+				<%
+					local nempty = true
+					for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do
+						nempty = false
+				 %>
+					<img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
+				<% end %>
+				<% if nempty then %><em><%:(empty)%></em><% end %>
+				</span>
+			<%- end end -%>
+			<% if zempty then %><span class="ifacebadge"><em><%:(empty)%></em></span><% end %>
+			</div>
+		</label>
+<%-
+	end
 -%>
 
 <% if zone then %>
-<div style="white-space:nowrap">
-	<label class="zonebadge" style="background-color:<%=zone:get_color()%>">
-		<strong><%=zone:name()%>:</strong>
-		<%-
-			local zempty = true
-			for _, net in ipairs(zone:get_networks()) do
-				net = nwm:get_network(net)
-				if net then
-					zempty = false
-		-%>
-			<span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:
-			<%
-				local nempty = true
-				for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do
-					nempty = false
-			 %>
-				<img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
-			<% end %>
-			<% if nempty then %><em><%:(empty)%></em><% end %>
-			</span>
-		<%- end end -%>
-		<%- if zempty then %><em><%:(empty)%></em><% end -%>
-	</label>
-	&#160;&#8658;&#160;
-	<% for _, fwd in ipairs(zone:get_forwardings_by("src")) do
-		fz = fwd:dest_zone()
-		if fz then
-			empty = false %>
-		<label class="zonebadge" style="background-color:<%=fz:get_color()%>">
-			<strong><%=fz:name()%></strong>
-		</label>&#160;
-	<% end end %>
-	<% if empty then %>
+<div class="zone-forwards">
+	<div class="zone-src">
+		<%=render_zone(zone)%>
+	</div>
+	<span>&#8658;</span>
+	<div class="zone-dest">
+	<%
+		for _, fwd in ipairs(zone:get_forwardings_by("src")) do
+			fz = fwd:dest_zone()
+			if fz then
+				empty = false
+				render_zone(fz)
+			end
+		end
+		if empty then
+	%>
 		<label class="zonebadge zonebadge-empty">
 			<strong><%=zone:forward():upper()%></strong>
 		</label>
 	<% end %>
+	</div>
 </div>
 <% end %>