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>

diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index 5cb3151..b426070 100644 (file)
--- 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%>