From: Jo-Philipp Wich <jo@mein.io>
Date: Tue, 19 Jun 2018 15:10:38 +0000 (+0200)
Subject: luci-base: globally cleanup markup
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=d0b91bcca266a6d386f9ebeef695e1cef34ad9cf;p=oweals%2Fluci.git

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>
---

diff --git a/modules/luci-base/luasrc/view/cbi/apply_widget.htm b/modules/luci-base/luasrc/view/cbi/apply_widget.htm
index 702512f49..e3090da65 100644
--- a/modules/luci-base/luasrc/view/cbi/apply_widget.htm
+++ b/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%>' },
diff --git a/modules/luci-base/luasrc/view/cbi/button.htm b/modules/luci-base/luasrc/view/cbi/button.htm
index 30f8ddfda..6ccba58f2 100644
--- a/modules/luci-base/luasrc/view/cbi/button.htm
+++ b/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 %>
diff --git a/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm b/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm
index a4b68cda7..dbb0e1120 100644
--- a/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm
+++ b/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))%>">
diff --git a/modules/luci-base/luasrc/view/cbi/dropdown.htm b/modules/luci-base/luasrc/view/cbi/dropdown.htm
index bdf724837..cf8c03d22 100644
--- a/modules/luci-base/luasrc/view/cbi/dropdown.htm
+++ b/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>
 
diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm b/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm
index 546fd8e85..b38e4b13d 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 %>
 
diff --git a/modules/luci-base/luasrc/view/cbi/footer.htm b/modules/luci-base/luasrc/view/cbi/footer.htm
index e6acfb069..5f939b646 100644
--- a/modules/luci-base/luasrc/view/cbi/footer.htm
+++ b/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 %>
diff --git a/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm b/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm
index f78093676..d4ad093ef 100644
--- a/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm
+++ b/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 %>
diff --git a/modules/luci-base/luasrc/view/cbi/map.htm b/modules/luci-base/luasrc/view/cbi/map.htm
index 02b47f545..83c3cb217 100644
--- a/modules/luci-base/luasrc/view/cbi/map.htm
+++ b/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>
diff --git a/modules/luci-base/luasrc/view/cbi/nsection.htm b/modules/luci-base/luasrc/view/cbi/nsection.htm
index abf67596f..63abc5773 100644
--- a/modules/luci-base/luasrc/view/cbi/nsection.htm
+++ b/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 />
-	</fieldset>
+	</div>
 <% 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 -->
diff --git a/modules/luci-base/luasrc/view/cbi/nullsection.htm b/modules/luci-base/luasrc/view/cbi/nullsection.htm
index ef169593a..7230719d1 100644
--- a/modules/luci-base/luasrc/view/cbi/nullsection.htm
+++ b/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 />
-</fieldset>
+</div>
 <%-
 	if type(self.hidden) == "table" then
 		for k, v in pairs(self.hidden) do
diff --git a/modules/luci-base/luasrc/view/cbi/simpleform.htm b/modules/luci-base/luasrc/view/cbi/simpleform.htm
index 3b758d70e..c6000d22b 100644
--- a/modules/luci-base/luasrc/view/cbi/simpleform.htm
+++ b/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>
+	<input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" />
+<% 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>
diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm
index bb11cf1c0..76434f7e2 100644
--- a/modules/luci-base/luasrc/view/cbi/tblsection.htm
+++ b/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,121 +26,103 @@ 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">
-			<%- 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)%>>
-				<%- 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 -%>
-				<div class="th cbi-section-table-cell"><%:Sort%></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>
-			<%- end; end; if self.sortable then -%>
-				<div class="th cbi-section-table-cell"></div>
-			<%- end; if self.extedit or self.addremove then -%>
-				<div class="th cbi-section-table-cell"></div>
-			<%- end -%>
+	<%- local count = 0 -%>
+	<div class="table cbi-section-table">
+		<div class="tr cbi-section-table-titles <%=(not self.anonymous or self.sectiontitle) and "named" or "anonymous"%>">
+		<%- for i, k in pairs(self.children) do if not k.optional then -%>
+			<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>
-			<%- local isempty = true
-			    for i, k in ipairs(self:cfgsections()) do
-					section = k
-					isempty = false
-					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%>">
-				<% 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
-							node:render(section, scope or {})
-						end
+		<%- count = count + 1; end; end; if self.sortable or self.extedit or self.addremove then -%>
+			<div class="th cbi-section-table-cell cbi-section-actions"></div>
+		<%- count = count + 1; end -%>
+		</div>
+		<div class="tr cbi-section-table-descr">
+		<%- for i, k in pairs(self.children) do if not k.optional then -%>
+			<div class="th cbi-section-table-cell"<%=
+			width(k) ..
+			attr("data-type", k.template and k.template:gsub("^.+/", "") or "")
+		%>><%=k.description%></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
+				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%>"<%=ifattr(title and (not self.anonymous or self.sectiontitle), "data-title", striptags((type(self.sectiontitle) == "function") and self:sectiontitle(section) or k))%>>
+			<%-
+				for k, node in ipairs(self.children) do
+					if not node.optional then
+						node:render(section, scope or {})
 					end
-				-%>
-
-				<%- if self.sortable then -%>
-					<div class="td cbi-section-table-cell">
-						<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=""  onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move down%>" title="<%:Move down%>" />
-					</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)%>'"
-							<%- elseif type(self.extedit) == "function" then
-							%> onclick="location.href='<%=self:extedit(section)%>'"
-							<%- end
-							%> alt="<%:Edit%>" title="<%:Edit%>" />
-						<%- 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>
-				<%- end -%>
-			</div>
-			<%- end -%>
+				end
+			-%>
 
-			<%- if isempty then -%>
-			<div class="tr cbi-section-table-row">
-				<div class="td" colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></div>
-			</div>
+			<%- 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 -%>
+						<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-down" type="button" value="<%:Down%>" onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move down%>" />
+					<% end; 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)%>'"
+						<%- elseif type(self.extedit) == "function" then
+						%> onclick="location.href='<%=self:extedit(section)%>'"
+						<%- end
+						%> alt="<%:Edit%>" title="<%:Edit%>" />
+					<% 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>
 			<%- end -%>
 		</div>
+		<%- end -%>
 
-		<% if self.error then %>
-			<div class="cbi-section-error">
-				<ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%>
-					<li><%=pcdata(e):gsub("\n","<br />")%></li>
-				<%- end end %></ul>
-			</div>
-		<% end %>
-
-		<%- if self.addremove then -%>
-			<% if self.template_addremove then include(self.template_addremove) else -%>
-			<div class="cbi-section-create cbi-tblsection-create">
-				<% 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>
-					<%- end %>
-				<% end %>
-			</div>
-			<%- end %>
+		<%- if isempty then -%>
+		<div class="tr cbi-section-table-row placeholder">
+			<div class="td"><em><%:This section contains no values yet%></em></div>
+		</div>
 		<%- end -%>
 	</div>
-</fieldset>
+
+	<% if self.error then %>
+		<div class="cbi-section-error">
+			<ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%>
+				<li><%=pcdata(e):gsub("\n","<br />")%></li>
+			<%- end end %></ul>
+		</div>
+	<% end %>
+
+	<%- if self.addremove then -%>
+		<% if self.template_addremove then include(self.template_addremove) else -%>
+		<div class="cbi-section-create cbi-tblsection-create">
+			<% 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"><%: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>
 <!-- /tblsection -->
diff --git a/modules/luci-base/luasrc/view/cbi/tsection.htm b/modules/luci-base/luasrc/view/cbi/tsection.htm
index 726521ae3..1a13df0c0 100644
--- a/modules/luci-base/luasrc/view/cbi/tsection.htm
+++ b/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>
-		<br />
+		</div>
 	<%- 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>
diff --git a/modules/luci-base/luasrc/view/cbi/upload.htm b/modules/luci-base/luasrc/view/cbi/upload.htm
index 4fb5201aa..3c3d82b65 100644
--- a/modules/luci-base/luasrc/view/cbi/upload.htm
+++ b/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 %>
 
diff --git a/modules/luci-base/luasrc/view/sysauth.htm b/modules/luci-base/luasrc/view/sysauth.htm
index e7a741aaa..9b0e2de78 100644
--- a/modules/luci-base/luasrc/view/sysauth.htm
+++ b/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>