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>

modules/luci-base/luasrc/view/cbi/apply_widget.htm

@@ -47,7 +47,7 @@
 	}
 </style>
 
-<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-18.138.59467-72fe5dd"></script>
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 <script type="text/javascript">//<![CDATA[
 	var xhr = new XHR(),
 	    uci_apply_auth = { sid: '<%=luci.dispatcher.context.authsession%>', token: '<%=token%>' },

modules/luci-base/luasrc/view/cbi/button.htm

@@ -1,6 +1,6 @@
 <%+cbi/valueheader%>
 	<% if self:cfgvalue(section) ~= false then %>
-		<input class="cbi-button cbi-input-<%=self.inputstyle or "button" %>" type="submit"<%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self.inputtitle or self.title)%> />
+		<input class="cbi-button cbi-button-<%=self.inputstyle or "button" %>" type="submit"<%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self.inputtitle or self.title)%> />
 	<% else %>
 		-
 	<% end %>

modules/luci-base/luasrc/view/cbi/cell_valueheader.htm

@@ -1,2 +1,10 @@
-<div class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %>">
+<%-
+	local title = luci.util.trim(striptags(self.title))
+	local ftype = self.template and self.template:gsub("^.+/", "")
+-%>
+<div class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %>"<%=
+	attr("data-name", self.option) ..
+	ifattr(ftype and #ftype > 0, "data-type", ftype) ..
+	ifattr(title and #title > 0, "data-title", title)
+%>>
 <div id="cbi-<%=self.config.."-"..section.."-"..self.option%>" data-index="<%=self.index%>" data-depends="<%=pcdata(self:deplist2json(section))%>">

modules/luci-base/luasrc/view/cbi/dropdown.htm

@@ -36,6 +36,18 @@
 				<%=pcdata(self.vallist[i])%>
 			</li>
 		<% end %>
+		<% if self.custom then %>
+			<li>
+				<input type="password" style="display:none" />
+				<input class="create-item-input" type="text"<%=
+					attr("placeholder", self.custom ~= true and
+						self.custom or
+						(self.multiple and
+							translate("Enter custom values") or
+							translate("Enter custom value")))
+				%> />
+			</li>
+		<% end %>
 	</ul>
 </div>
 

modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm

@@ -14,12 +14,12 @@
 	local def  = fwm:get_defaults()
 	local zone = fwm:get_zone(value)
 	local empty = true
--%>
 
-<% if zone then %>
+	local function render_zone(zone)
-<div style="white-space:nowrap">
+-%>
 		<label class="zonebadge" style="background-color:<%=zone:get_color()%>">
-		<strong><%=zone:name()%>:</strong>
+			<strong><%=zone:name()%></strong>
+			<div class="cbi-tooltip">
 			<%-
 				local zempty = true
 				for _, net in ipairs(zone:get_networks()) do
@@ -27,33 +27,46 @@
 					if net then
 						zempty = false
 			-%>
-			<span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:
+				<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())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
+					<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 %><em><%:(empty)%></em><% end -%>
+			<% if zempty then %><span class="ifacebadge"><em><%:(empty)%></em></span><% end %>
+			</div>
 		</label>
-	&#160;&#8658;&#160;
+<%-
-	<% for _, fwd in ipairs(zone:get_forwardings_by("src")) do
+	end
+-%>
+
+<% if zone 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 %>
+				empty = false
-		<label class="zonebadge" style="background-color:<%=fz:get_color()%>">
+				render_zone(fz)
-			<strong><%=fz:name()%></strong>
+			end
-		</label>&#160;
+		end
-	<% end end %>
+		if empty then
-	<% if empty then %>
+	%>
 		<label class="zonebadge zonebadge-empty">
 			<strong><%=zone:forward():upper()%></strong>
 		</label>
 	<% end %>
+	</div>
 </div>
 <% end %>
 

modules/luci-base/luasrc/view/cbi/footer.htm

@@ -1,9 +1,7 @@
 	<%- if pageaction then -%>
 	<div class="cbi-page-actions">
 		<% if redirect and not flow.hidebackbtn then %>
-		<div style="float:left">
 			<input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" />
-		</div>
 		<% end %>
 
 		<% if flow.skip then %>

modules/luci-base/luasrc/view/cbi/full_valuefooter.htm

@@ -3,7 +3,6 @@
 				<br />
 			<%- end %>
 			<div class="cbi-value-description">
-				<span class="cbi-value-helpicon"><img src="<%=resource%>/cbi/help.gif" alt="<%:help%>" /></span>
 				<%=self.description%>
 			</div>
 		<%- end %>

modules/luci-base/luasrc/view/cbi/map.htm

@@ -31,7 +31,6 @@
 				</li>
 			<% end %>
 		</ul>
-		<br />
 		<% for i, section in ipairs(self.children) do %>
 			<div class="cbi-tabcontainer" id="container.m-<%=self.config%>.<%=section.section or section.sectiontype%>"<% if section.sectiontype ~= self.selected_tab then %> style="display:none"<% end %>>
 				<% section:render() %>
@@ -53,6 +52,4 @@
 	<% else %>
 		<%- self:render_children() %>
 	<% end %>
-
-	<br />
 </div>

modules/luci-base/luasrc/view/cbi/nsection.htm

@@ -1,5 +1,5 @@
 <% if self:cfgvalue(self.section) then section = self.section %>
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<% if self.title and #self.title > 0 then -%>
 			<legend><%=self.title%></legend>
 		<%- end %>
@@ -15,17 +15,16 @@
 		<div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>">
 			<%+cbi/ucisection%>
 		</div>
-		<br />
+	</div>
-	</fieldset>
 <% elseif self.addremove then %>
 	<% if self.template_addremove then include(self.template_addremove) else -%>
-	<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.section%>">
+	<div class="cbi-section" id="cbi-<%=self.config%>-<%=self.section%>">
 		<% if self.title and #self.title > 0 then -%>
 			<legend><%=self.title%></legend>
 		<%- end %>
 		<div class="cbi-section-descr"><%=self.description%></div>
 		<input type="submit" class="cbi-button cbi-button-add" name="cbi.cns.<%=self.config%>.<%=self.section%>" value="<%:Add%>" />
-	</fieldset>
+	</div>
 	<%- end %>
 <% end %>
 <!-- /nsection -->

modules/luci-base/luasrc/view/cbi/nullsection.htm

@@ -1,4 +1,4 @@
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<% if self.title and #self.title > 0 then -%>
 		<legend><%=self.title%></legend>
 	<%- end %>
@@ -25,8 +25,7 @@
 			</div>
 		<%- end %>
 	</div>
-	<br />
+</div>
-</fieldset>
 <%-
 	if type(self.hidden) == "table" then
 		for k, v in pairs(self.hidden) do

modules/luci-base/luasrc/view/cbi/simpleform.htm

@@ -10,7 +10,6 @@
 		<% if self.title and #self.title > 0 then %><h2 name="content"><%=self.title%></h2><% end %>
 		<% if self.description and #self.description > 0 then %><div class="cbi-map-descr"><%=self.description%></div><% end %>
 		<% self:render_children() %>
-		<br />
 	</div>
 <%- if self.message then %>
 	<div><%=self.message%></div>
@@ -30,9 +29,12 @@
 	end
 %>
 <% if redirect then %>
-	<div style="float:left">
 	<input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" />
-	</div>
+<% end %>
+<%- if self.cancel ~= false and self.on_cancel then %>
+	<input class="cbi-button cbi-button-link" type="submit" name="cbi.cancel" value="
+		<%- if not self.cancel then -%><%-:Cancel-%><%-else-%><%=self.cancel%><%end-%>
+	" />
 <% end %>
 <%- if self.flow and self.flow.skip then %>
 	<input class="cbi-button cbi-button-skip" type="submit" name="cbi.skip" value="<%:Skip%>" />
@@ -46,11 +48,6 @@
 	<input class="cbi-button cbi-button-reset" type="reset" value="
 		<%- if not self.reset then -%><%-:Reset-%><%-else-%><%=self.reset%><%end-%>
 	" />
-<% end %>
-<%- if self.cancel ~= false and self.on_cancel then %>
-	<input class="cbi-button cbi-button-reset" type="submit" name="cbi.cancel" value="
-		<%- if not self.cancel then -%><%-:Cancel-%><%-else-%><%=self.cancel%><%end-%>
-	" />
 <% end %>
 	</div>
 </form>

modules/luci-base/luasrc/view/cbi/tblsection.htm

@@ -14,10 +14,11 @@ function width(o)
 	end
 	return ''
 end
+
 -%>
 
 <!-- tblsection -->
-<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
+<div class="cbi-section cbi-tblsection" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
 	<% if self.title and #self.title > 0 then -%>
 		<legend><%=self.title%></legend>
 	<%- end %>
@@ -25,57 +26,43 @@ end
 		<input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
 	<%- end -%>
 	<div class="cbi-section-descr"><%=self.description%></div>
-	<div class="cbi-section-node">
 	<%- local count = 0 -%>
 	<div class="table cbi-section-table">
-			<div class="tr cbi-section-table-titles">
+		<div class="tr cbi-section-table-titles <%=(not self.anonymous or self.sectiontitle) and "named" or "anonymous"%>">
-			<%- if not self.anonymous then -%>
-				<%- if self.sectionhead then -%>
-					<div class="th cbi-section-table-cell"><%=self.sectionhead%></div>
-				<%- else -%>
-					<div class="th">&#160;</div>
-				<%- end -%>
-			<%- count = count +1; end -%>
 		<%- for i, k in pairs(self.children) do if not k.optional then -%>
-				<div class="th cbi-section-table-cell"<%=width(k)%>>
+			<div class="th cbi-section-table-cell"<%=
+				width(k) ..
+				attr("data-type", k.template and k.template:gsub("^.+/", "") or "")
+			%>>
 			<%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%>
 				<%-=k.title-%>
 			<%- if k.titleref then -%></a><%- end -%>
 			</div>
-			<%- count = count + 1; end; end; if self.sortable then -%>
+		<%- count = count + 1; end; end; if self.sortable or self.extedit or self.addremove then -%>
-				<div class="th cbi-section-table-cell"><%:Sort%></div>
+			<div class="th cbi-section-table-cell cbi-section-actions"></div>
-			<%- count = count + 1; end; if self.extedit or self.addremove then -%>
-				<div class="th cbi-section-table-cell">&#160;</div>
 		<%- count = count + 1; end -%>
 		</div>
 		<div class="tr cbi-section-table-descr">
-			<%- if not self.anonymous then -%>
-				<%- if self.sectiondesc then -%>
-					<div class="th cbi-section-table-cell"><%=self.sectiondesc%></div>
-				<%- else -%>
-					<div class="th"></div>
-				<%- end -%>
-			<%- end -%>
 		<%- for i, k in pairs(self.children) do if not k.optional then -%>
-				<div class="th cbi-section-table-cell"<%=width(k)%>><%=k.description%></div>
+			<div class="th cbi-section-table-cell"<%=
-			<%- end; end; if self.sortable then -%>
+			width(k) ..
-				<div class="th cbi-section-table-cell"></div>
+			attr("data-type", k.template and k.template:gsub("^.+/", "") or "")
-			<%- end; if self.extedit or self.addremove then -%>
+		%>><%=k.description%></div>
-				<div class="th cbi-section-table-cell"></div>
+		<%- end; end; if self.sortable or self.extedit or self.addremove then -%>
+			<div class="th cbi-section-table-cell cbi-section-actions"></div>
 		<%- end -%>
 		</div>
 		<%- local isempty = true
 		    for i, k in ipairs(self:cfgsections()) do
 				section = k
 				isempty = false
-					scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
+				title = striptags((type(self.sectiontitle) == "function") and self:sectiontitle(section) or k)
+				scope = {
+					valueheader = "cbi/cell_valueheader",
+					valuefooter = "cbi/cell_valuefooter"
+				}
 		-%>
-			<div class="tr cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>">
+		<div class="tr cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>"<%=ifattr(title and (not self.anonymous or self.sectiontitle), "data-title", striptags((type(self.sectiontitle) == "function") and self:sectiontitle(section) or k))%>>
-				<% if not self.anonymous then -%>
-					<div class="th"><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></div>
-				<%- end %>
-
-
 			<%-
 				for k, node in ipairs(self.children) do
 					if not node.optional then
@@ -84,16 +71,12 @@ end
 				end
 			-%>
 
+			<%- if self.sortable or self.extedit or self.addremove then -%>
+				<div class="td cbi-section-table-cell nowrap cbi-section-actions">
 					<%- if self.sortable then -%>
-					<div class="td cbi-section-table-cell">
+						<input class="cbi-button cbi-button-up" type="button" value="<%:Up%>" onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move up%>" />
-						<input class="cbi-button cbi-button-up" type="button" value=""  onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move up%>" title="<%:Move up%>" />
+						<input class="cbi-button cbi-button-down" type="button" value="<%:Down%>" onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move down%>" />
-						<input class="cbi-button cbi-button-down" type="button" value=""  onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move down%>" title="<%:Move down%>" />
+					<% end; if self.extedit then -%>
-					</div>
-				<%- end -%>
-
-				<%- if self.extedit or self.addremove then -%>
-					<div class="td cbi-section-table-cell">
-						<%- if self.extedit then -%>
 						<input class="cbi-button cbi-button-edit" type="button" value="<%:Edit%>"
 						<%- if type(self.extedit) == "string" then
 						%> onclick="location.href='<%=self.extedit:format(section)%>'"
@@ -101,7 +84,7 @@ end
 						%> onclick="location.href='<%=self:extedit(section)%>'"
 						<%- end
 						%> alt="<%:Edit%>" title="<%:Edit%>" />
-						<%- end; if self.addremove then %>
+					<% end; if self.addremove then %>
 						<input class="cbi-button cbi-button-remove" type="submit" value="<%:Delete%>"  onclick="this.form.cbi_state='del-section'; return true" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" />
 					<%- end -%>
 				</div>
@@ -110,8 +93,8 @@ end
 		<%- end -%>
 
 		<%- if isempty then -%>
-			<div class="tr cbi-section-table-row">
+		<div class="tr cbi-section-table-row placeholder">
-				<div class="td" colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></div>
+			<div class="td"><em><%:This section contains no values yet%></em></div>
 		</div>
 		<%- end -%>
 	</div>
@@ -130,16 +113,16 @@ end
 			<% if self.anonymous then %>
 				<input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" />
 			<% else %>
-					<% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
-					<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" />
-					<input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
 				<% if self.invalid_cts then -%>
-						<br /><%:Invalid%></div>
+					<div class="cbi-section-error"><%:Invalid%></div>
 				<%- end %>
+				<div>
+					<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." data-type="uciname" data-optional="true" />
+				</div>
+				<input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
 			<% end %>
 		</div>
 		<%- end %>
 	<%- end -%>
-	</div>
+</div>
-</fieldset>
 <!-- /tblsection -->

modules/luci-base/luasrc/view/cbi/tsection.htm

@@ -1,4 +1,4 @@
-<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
+<div class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
 	<% if self.title and #self.title > 0 then -%>
 		<legend><%=self.title%></legend>
 	<%- end %>
@@ -20,10 +20,9 @@
 
 		<%+cbi/tabmenu%>
 
-		<fieldset class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>">
+		<div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>">
 			<%+cbi/ucisection%>
-		</fieldset>
+		</div>
-		<br />
 	<%- end %>
 
 	<% if isempty then -%>
@@ -36,14 +35,15 @@
 			<% if self.anonymous then -%>
 				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
 			<%- else -%>
-				<% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
-				<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" />
-				<input type="submit" class="cbi-button cbi-button-add" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" />
 				<% if self.invalid_cts then -%>
-					<br /><%:Invalid%></div>
+					<div class="cbi-section-error"><%:Invalid%></div>
 				<%- end %>
+				<div>
+					<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." data-type="uciname" data-optional="true" />
+				</div>
+				<input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
 			<%- end %>
 		</div>
 		<%- end %>
 	<%- end %>
-</fieldset>
+</div>

modules/luci-base/luasrc/view/cbi/upload.htm

@@ -8,7 +8,7 @@
 		<%:Uploaded File%> (<%=t.byte_format(s.size)%>)
                 <% if self.unsafeupload then %>
 		    <input type="hidden"<%= attr("value", v) .. attr("name", cbid) .. attr("id", cbid) %> />
-		    <input class="cbi-button cbi-input-image" type="image" value="<%:Replace entry%>" name="cbi.rlf.<%=section .. "." .. self.option%>" alt="<%:Replace entry%>" title="<%:Replace entry%>" src="<%=resource%>/cbi/reload.gif" />
+		    <input class="cbi-button cbi-button-image" type="image" value="<%:Replace entry%>" name="cbi.rlf.<%=section .. "." .. self.option%>" alt="<%:Replace entry%>" title="<%:Replace entry%>" src="<%=resource%>/cbi/reload.gif" />
                 <% end %>
 	<% end %>
 

modules/luci-base/luasrc/view/sysauth.htm

@@ -18,23 +18,23 @@
 		<div class="cbi-map-descr">
 			<%:Please enter your username and password.%>
 		</div>
-		<fieldset class="cbi-section"><fieldset class="cbi-section-node">
+		<div class="cbi-section"><div class="cbi-section-node">
 			<div class="cbi-value">
 				<label class="cbi-value-title"><%:Username%></label>
 				<div class="cbi-value-field">
-					<input class="cbi-input-user" type="text" name="luci_username" value="<%=duser%>" />
+					<input class="cbi-input-text" type="text" name="luci_username" value="<%=duser%>" />
 				</div>
 			</div>
 			<div class="cbi-value cbi-value-last">
 				<label class="cbi-value-title"><%:Password%></label>
 				<div class="cbi-value-field">
-					<input class="cbi-input-password" type="password" name="luci_password" />
+					<input class="cbi-input-text" type="password" name="luci_password" />
 				</div>
 			</div>
-		</fieldset></fieldset>
+		</div></div>
 	</div>
 
-	<div>
+	<div class="cbi-page-actions">
 		<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
 		<input type="reset" value="<%:Reset%>" class="cbi-button cbi-button-reset" />
 	</div>