From 21fbe398580197b5739e9734f2b3600e1ea2bda6 Mon Sep 17 00:00:00 2001
From: Dirk Brenken <dev@brenken.org>
Date: Fri, 9 Mar 2018 08:11:06 +0100
Subject: [PATCH] luci-base/firewall_zonelist: fix visual interface/background
 alignment

* fix for #1667, tested with all standard themes

Signed-off-by: Dirk Brenken <dev@brenken.org>
---
 .../luasrc/view/cbi/firewall_zonelist.htm     | 128 +++++++++---------
 1 file changed, 65 insertions(+), 63 deletions(-)

diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index 5cb31511f6..b4260707ef 100644
--- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
@@ -24,70 +24,72 @@
 	end
 -%>
 
-<ul style="margin:0; list-style-type:none; text-align:left">
-	<% if self.allowlocal then %>
-	<li style="padding:0.5em">
-		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
-		<label<%=attr("for", cbid .. "_empty")%>></label>
-		<label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
-			<strong><%:Device%></strong>
-			<% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
-		</label>
-	</li>
-	<% end %>
-	<% if self.allowany then %>
-	<li style="padding:0.5em">
-		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
-		<label<%=attr("for", cbid .. "_any")%>></label>
-		<label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
-			<strong><%:Any zone%></strong>
-			<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
-		</label>
-	</li>
-	<% end %>
-	<%
-		for _, zone in utl.spairs(zones, function(a,b) return (zones[a]:name() < zones[b]:name()) end) do
-			if zone:name() ~= self.exclude then
-				selected = selected or (value == zone:name())
- 	%>
-	<li style="padding:0.5em">
-		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
-		<label<%=attr("for", cbid .. "." .. zone:name())%>></label>
-		<label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
-			<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()%>:
+<span>
+	<ul style="margin:0; list-style-type:none; text-align:left">
+		<% if self.allowlocal then %>
+		<li style="padding:0.5em">
+			<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
+			<label<%=attr("for", cbid .. "_empty")%>></label>
+			<label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
+				<strong><%:Device%></strong>
+				<% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
+			</label>
+		</li>
+		<% end %>
+		<% if self.allowany then %>
+		<li style="padding:0.5em">
+			<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
+			<label<%=attr("for", cbid .. "_any")%>></label>
+			<label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
+				<strong><%:Any zone%></strong>
+				<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
+			</label>
+		</li>
+		<% end %>
+		<%
+			for _, zone in utl.spairs(zones, function(a,b) return (zones[a]:name() < zones[b]:name()) end) do
+				if zone:name() ~= self.exclude then
+					selected = selected or (value == zone:name())
+		%>
+		<li style="padding:0.5em">
+			<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
+			<label<%=attr("for", cbid .. "." .. zone:name())%>></label>
+			<label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
+				<strong><%=zone:name()%>:</strong>
 				<%
-					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>
-	</li>
-	<% end end %>
+					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>
+		</li>
+		<% end end %>
 
-	<% if self.widget ~= "checkbox" and not self.nocreate then %>
-	<li style="padding:0.5em">
-		<input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
-		<label<%=attr("for", cbid .. "_new")%>></label>
-		<div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
-			<em><%:unspecified -or- create:%>&#160;</em>
-			<input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />
-		</div>
-	</li>
-	<% end %>
-</ul>
+		<% if self.widget ~= "checkbox" and not self.nocreate then %>
+		<li style="padding:0.5em">
+			<input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
+			<label<%=attr("for", cbid .. "_new")%>></label>
+			<div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
+				<em><%:unspecified -or- create:%>&#160;</em>
+				<input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />
+			</div>
+		</li>
+		<% end %>
+	</ul>
+</span>
 
 <%+cbi/valuefooter%>
-- 
2.30.2