Merge pull request #1895 from jow-/master

Responsive OpenWrt theme

8 files changed, 277 insertions, 299 deletions

diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
index 279b6e06d..f48599b50 100644
--- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
+++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
@@ -18,95 +18,91 @@
 		vals[#vals+1] = '%s (%s)' %{ ip, name }
 	end)
 -%>
-<div class="cbi-section-create cbi-tblsection-create">
-	<br />
-	<div class="table cbi-section-table" style="width:810px; margin-left:5px">
-		<div class="tr cbi-section-table-titles">
-			<div class="th cbi-section-table-cell" colspan="8"><%:New port forward%>:</div>
+
+<h4><%:New port forward%></h4>
+<div class="table">
+	<div class="tr table-titles">
+		<div class="th"><%:Name%></div>
+		<div class="th"><%:Protocol%></div>
+		<div class="th"><%:External zone%></div>
+		<div class="th"><%:External port%></div>
+		<div class="th"><%:Internal zone%></div>
+		<div class="th"><%:Internal IP address%></div>
+		<div class="th"><%:Internal port%></div>
+		<div class="th"></div>
+	</div>
+	<div class="tr">
+		<div class="td">
+			<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New port forward%>" />
+		</div>
+		<div class="td">
+			<select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto">
+				<option value="tcp udp">TCP+UDP</option>
+				<option value="tcp">TCP</option>
+				<option value="udp">UDP</option>
+				<option value="other"><%:Other...%></option>
+			</select>
+		</div>
+		<div class="td">
+			<select class="cbi-input-select" id="_newfwd.extzone" name="_newfwd.extzone">
+				<% for _, z in ipairs(ezl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
+			</select>
+		</div>
+		<div class="td">
+			<input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" data-type="portrange" data-optional="true" />
+		</div>
+		<div class="td">
+			<select class="cbi-input-select" id="_newfwd.intzone" name="_newfwd.intzone">
+				<% for _, z in ipairs(izl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
+			</select>
+		</div>
+		<div class="td">
+			<input type="text" class="cbi-input-text" id="_newfwd.intaddr" name="_newfwd.intaddr" data-type="host" data-optional="true"<%=
+				ifattr(#keys > 0, "data-choices", {keys, vals})
+			%>/>
 		</div>
-		<div class="tr cbi-section-table-descr">
-			<div class="th cbi-section-table-cell"><%:Name%></div>
-			<div class="th cbi-section-table-cell"><%:Protocol%></div>
-			<div class="th cbi-section-table-cell"><%:External zone%></div>
-			<div class="th cbi-section-table-cell"><%:External port%></div>
-			<div class="th cbi-section-table-cell"><%:Internal zone%></div>
-			<div class="th cbi-section-table-cell"><%:Internal IP address%></div>
-			<div class="th cbi-section-table-cell"><%:Internal port%></div>
-			<div class="th cbi-section-table-cell"></div>
+		<div class="td">
+			<input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" data-type="portrange" data-optional="true" />
 		</div>
-		<div class="tr cbi-section-table-row">
-			<div class="td cbi-section-table-cell">
-				<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New port forward%>" />
-			</div>
-			<div class="td cbi-section-table-cell" style="width:110px">
-				<select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto">
-					<option value="tcp udp">TCP+UDP</option>
-					<option value="tcp">TCP</option>
-					<option value="udp">UDP</option>
-					<option value="other"><%:Other...%></option>
-				</select>
-			</div>
-			<div class="td cbi-section-table-cell" style="width:55px">
-				<select class="cbi-input-select" id="_newfwd.extzone" name="_newfwd.extzone">
-					<% for _, z in ipairs(ezl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
-				</select>
-			</div>
-			<div class="td cbi-section-table-cell" style="width:110px">
-				<input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" data-type="portrange" data-optional="true" />
-			</div>
-			<div class="td cbi-section-table-cell" style="width:55px">
-				<select class="cbi-input-select" id="_newfwd.intzone" name="_newfwd.intzone">
-					<% for _, z in ipairs(izl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
-				</select>
-			</div>
-			<div class="td cbi-section-table-cell" style="width:110px">
-				<input type="text" class="cbi-input-text" id="_newfwd.intaddr" name="_newfwd.intaddr" data-type="host" data-optional="true"<%=
-					ifattr(#keys > 0, "data-choices", {keys, vals})
-				%>/>
-			</div>
-			<div class="td cbi-section-table-cell" style="width:110px">
-				<input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" data-type="portrange" data-optional="true" />
-			</div>
-			<div class="td cbi-section-table-cell">
-				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
-			</div>
+		<div class="td bottom">
+			<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
 		</div>
 	</div>
+</div>
 
-	<script type="text/javascript">//<![CDATA[
-		cbi_bind(document.getElementById('_newfwd.extport'), 'blur',
-			function() {
-				var n = document.getElementById('_newfwd.name');
-				var p = document.getElementById('_newfwd.proto');
-				var i = document.getElementById('_newfwd.intport');
-				var hints = {
-				/*  port    name     0=both, 1=tcp, 2=udp, 3=other */
-					21:   [ 'FTP',   1 ],
-					22:   [ 'SSH',   1 ],
-					53:   [ 'DNS',   0 ],
-					80:   [ 'HTTP',  1 ],
-					443:  [ 'HTTPS', 1 ],
-					3389: [ 'RDP',   1 ],
-					5900: [ 'VNC',   1 ],
-				};
+<script type="text/javascript">//<![CDATA[
+	cbi_bind(document.getElementById('_newfwd.extport'), 'blur',
+		function() {
+			var n = document.getElementById('_newfwd.name');
+			var p = document.getElementById('_newfwd.proto');
+			var i = document.getElementById('_newfwd.intport');
+			var hints = {
+			/*  port    name     0=both, 1=tcp, 2=udp, 3=other */
+				21:   [ 'FTP',   1 ],
+				22:   [ 'SSH',   1 ],
+				53:   [ 'DNS',   0 ],
+				80:   [ 'HTTP',  1 ],
+				443:  [ 'HTTPS', 1 ],
+				3389: [ 'RDP',   1 ],
+				5900: [ 'VNC',   1 ],
+			};
 
-				if (!this.className.match(/invalid/))
-				{
-					if (!i.value) i.value = this.value;
+			if (!this.className.match(/invalid/))
+			{
+				if (!i.value) i.value = this.value;
 
-					var hint = hints[this.value || 0] || hints[i.value || 0];
-					if (hint)
-					{
-						p.selectedIndex = hint[1];
+				var hint = hints[this.value || 0] || hints[i.value || 0];
+				if (hint)
+				{
+					p.selectedIndex = hint[1];
 
-						if (!n.value)
-							n.value = hint[0];
-					}
-					else if (!n.value)
-					{
-						n.value = 'Forward' + this.value;
-					}
+					if (!n.value)
+						n.value = hint[0];
 				}
-			});
-	//]]></script>
-</div>
+				else if (!n.value)
+				{
+					n.value = 'Forward' + this.value;
+				}
+			}
+		});
+//]]></script>
diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
index c99ecaca3..273675cd3 100644
--- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
+++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
@@ -5,112 +5,105 @@
 	local zones = fw:get_zones()
 %>
 
-<div class="cbi-section-create cbi-tblsection-create">
-	<% if wz then %>
-		<br />
-		<div class="table cbi-section-table" style="margin-left:5px">
-			<div class="tr cbi-section-table-titles">
-				<div class="th cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</div>
+<% if wz then %>
+	<h4><%:Open ports on router%></h4>
+	<div class="table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Name%></div>
+			<div class="th"><%:Protocol%></div>
+			<div class="th"><%:External port%></div>
+			<div class="th"></div>
+		</div>
+		<div class="tr">
+			<div class="td">
+				<input type="text" class="cbi-input-text" id="_newopen.name" name="_newopen.name" placeholder="<%:New input rule%>" />
+			</div>
+			<div class="td">
+				<select class="cbi-input-select" id="_newopen.proto" name="_newopen.proto">
+					<option value="tcp udp">TCP+UDP</option>
+					<option value="tcp">TCP</option>
+					<option value="udp">UDP</option>
+					<option value="other"><%:Other...%></option>
+				</select>
 			</div>
-			<div class="tr cbi-section-table-descr">
-				<div class="th cbi-section-table-cell"><%:Name%></div>
-				<div class="th cbi-section-table-cell"><%:Protocol%></div>
-				<div class="th cbi-section-table-cell"><%:External port%></div>
-				<div class="th cbi-section-table-cell"></div>
+			<div class="td">
+				<input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" />
 			</div>
-			<div class="tr cbi-section-table-row">
-				<div class="td cbi-section-table-cell" style="width:130px">
-					<input type="text" class="cbi-input-text" id="_newopen.name" name="_newopen.name" placeholder="<%:New input rule%>" />
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<select class="cbi-input-select" id="_newopen.proto" name="_newopen.proto">
-						<option value="tcp udp">TCP+UDP</option>
-						<option value="tcp">TCP</option>
-						<option value="udp">UDP</option>
-						<option value="other"><%:Other...%></option>
-					</select>
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" />
-				</div>
-				<div class="td cbi-section-table-cell left">
-					<input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" />
-				</div>
+			<div class="td bottom">
+				<input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" />
 			</div>
 		</div>
-	<% end %>
-	<% if #zones > 1 then %>
-		<div class="table cbi-section-table" style="margin-left:5px">
-			<div class="tr cbi-section-table-titles">
-				<div class="th cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</div>
+	</div>
+<% end %>
+<% if #zones > 1 then %>
+	<h4><%:New forward rule%></h4>
+	<div class="table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Name%></div>
+			<div class="th"><%:Source zone%></div>
+			<div class="th"><%:Destination zone%></div>
+			<div class="th"></div>
+		</div>
+		<div class="tr">
+			<div class="td">
+				<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New forward rule%>" />
 			</div>
-			<div class="tr cbi-section-table-descr">
-				<div class="th cbi-section-table-cell"><%:Name%></div>
-				<div class="th cbi-section-table-cell"><%:Source zone%></div>
-				<div class="th cbi-section-table-cell"><%:Destination zone%></div>
-				<div class="th cbi-section-table-cell"></div>
+			<div class="td">
+				<select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src">
+					<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
+						<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
+					<%- end %>
+				</select>
 			</div>
-			<div class="tr cbi-section-table-row">
-				<div class="td cbi-section-table-cell" style="width:130px">
-					<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New forward rule%>" />
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src">
-						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
-							<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
-						<%- end %>
-					</select>
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest">
-						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
-							<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
-						<%- end %>
-					</select>
-				</div>
-				<div class="td cbi-section-table-cell left">
-					<input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" />
-				</div>
+			<div class="td">
+				<select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest">
+					<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
+						<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
+					<%- end %>
+				</select>
+			</div>
+			<div class="td bottom">
+				<input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" />
 			</div>
 		</div>
-	<% else %>
-		<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
-	<% end %>
+	</div>
+<% else %>
+	<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
+<% end %>
 
-	<% if wz then %>
-		<script type="text/javascript">//<![CDATA[
-			cbi_validate_field('_newopen.extport', true, 'list(neg(portrange))');
-			cbi_bind(document.getElementById('_newopen.extport'), 'blur',
-				function() {
-					var n = document.getElementById('_newopen.name');
-					var p = document.getElementById('_newopen.proto');
-					var hints = {
-					/*  port    name     0=both, 1=tcp, 2=udp, 3=other */
-						22:   [ 'SSH',   1 ],
-						53:   [ 'DNS',   0 ],
-						80:   [ 'HTTP',  1 ],
-						443:  [ 'HTTPS', 1 ],
-					};
+<% if wz then %>
+	<script type="text/javascript">//<![CDATA[
+		cbi_validate_field('_newopen.extport', true, 'list(neg(portrange))');
+		cbi_bind(document.getElementById('_newopen.extport'), 'blur',
+			function() {
+				var n = document.getElementById('_newopen.name');
+				var p = document.getElementById('_newopen.proto');
+				var hints = {
+				/*  port    name     0=both, 1=tcp, 2=udp, 3=other */
+					22:   [ 'SSH',   1 ],
+					53:   [ 'DNS',   0 ],
+					80:   [ 'HTTP',  1 ],
+					443:  [ 'HTTPS', 1 ],
+				};
 
-					if (!this.className.match(/invalid/))
+				if (!this.className.match(/invalid/))
+				{
+					var hint = hints[this.value || 0];
+					if (hint)
 					{
-						var hint = hints[this.value || 0];
-						if (hint)
-						{
-							p.selectedIndex = hint[1];
+						p.selectedIndex = hint[1];
 
-							if (!n.value)
-								n.value = hint[0];
-						}
-						else if (!n.value && this.value)
-						{
-							n.value = 'Open' + this.value;
-						}
+						if (!n.value)
+							n.value = hint[0];
+					}
+					else if (!n.value && this.value)
+					{
+						n.value = 'Open' + this.value;
 					}
-				});
+				}
+			});
 
 
-			cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');
-		//]]></script>
-	<% end %>
-</div>
+		cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');
+	//]]></script>
+<% end %>
diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm
index b2775cf69..0b4774ccc 100644
--- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm
+++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm
@@ -12,53 +12,48 @@
 	end
 %>
 
-<div class="cbi-section-create cbi-tblsection-create">
-	<% if #zones > 1 then %>
-		<br />
-		<div class="table cbi-section-table" style="width:700px; margin-left:5px">
-			<div class="tr cbi-section-table-titles">
-				<div class="th cbi-section-table-cell left" colspan="6"><%:New source NAT%>:</div>
+<% if #zones > 1 then %>
+	<h4><%:New source NAT%></h4>
+	<div class="table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Name%></div>
+			<div class="th"><%:Source zone%></div>
+			<div class="th"><%:Destination zone%></div>
+			<div class="th"><%:To source IP%></div>
+			<div class="th"><%:To source port%></div>
+			<div class="th"></div>
+		</div>
+		<div class="tr">
+			<div class="td">
+				<input type="text" class="cbi-input-text" id="_newsnat.name" name="_newsnat.name" placeholder="<%:New SNAT rule%>" />
+			</div>
+			<div class="td">
+				<select class="cbi-input-text" id="_newsnat.src" name="_newsnat.src">
+					<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
+						<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
+					<%- end %>
+				</select>
+			</div>
+			<div class="td">
+				<select class="cbi-input-text" id="_newsnat.dest" name="_newsnat.dest">
+					<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
+						<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
+					<%- end %>
+				</select>
+			</div>
+			<div class="td">
+				<input type="text" class="cbi-input-text" id="_newsnat.dip" name="_newsnat.dip" placeholder="<%:Do not rewrite%>" data-type="ip4addr" data-optional="true"<%=
+					ifattr(#keys > 0, "data-choices", { keys, vals })
+				%> />
 			</div>
-			<div class="tr cbi-section-table-descr">
-				<div class="th cbi-section-table-cell"><%:Name%></div>
-				<div class="th cbi-section-table-cell"><%:Source zone%></div>
-				<div class="th cbi-section-table-cell"><%:Destination zone%></div>
-				<div class="th cbi-section-table-cell"><%:To source IP%></div>
-				<div class="th cbi-section-table-cell"><%:To source port%></div>
-				<div class="th cbi-section-table-cell"></div>
+			<div class="td">
+				<input type="text" class="cbi-input-text" id="_newsnat.dport" name="_newsnat.dport" placeholder="<%:Do not rewrite%>" data-type="portrange" data-optional="true" />
 			</div>
-			<div class="tr cbi-section-table-row">
-				<div class="td cbi-section-table-cell">
-					<input type="text" class="cbi-input-text" id="_newsnat.name" name="_newsnat.name" placeholder="<%:New SNAT rule%>" />
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<select class="cbi-input-text" id="_newsnat.src" name="_newsnat.src">
-						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
-							<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
-						<%- end %>
-					</select>
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<select class="cbi-input-text" id="_newsnat.dest" name="_newsnat.dest">
-						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
-							<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
-						<%- end %>
-					</select>
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<input type="text" class="cbi-input-text" id="_newsnat.dip" name="_newsnat.dip" placeholder="<%:Do not rewrite%>" data-type="ip4addr" data-optional="true"<%=
-						ifattr(#keys > 0, "data-choices", { keys, vals })
-					%> />
-				</div>
-				<div class="td cbi-section-table-cell" style="width:110px">
-					<input type="text" class="cbi-input-text" id="_newsnat.dport" name="_newsnat.dport" placeholder="<%:Do not rewrite%>" data-type="portrange" data-optional="true" />
-				</div>
-				<div class="td cbi-section-table-cell">
-					<input type="submit" class="cbi-button cbi-button-link" name="_newsnat.submit" value="<%:Add and edit...%>" />
-				</div>
+			<div class="td bottom">
+				<input type="submit" class="cbi-button cbi-button-link" name="_newsnat.submit" value="<%:Add and edit...%>" />
 			</div>
 		</div>
-	<% else %>
-		<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
-	<% end %>
-</div>
+	</div>
+<% else %>
+	<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
+<% end %>
diff --git a/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm b/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm
index 80b95564d..f016dd47e 100644
--- a/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm
+++ b/applications/luci-app-shadowsocks-libev/luasrc/view/shadowsocks-libev/add_instance.htm
@@ -1,24 +1,17 @@
 <div class="cbi-section-create cbi-tblsection-create">
-	<br />
-	<div class="table cbi-section-table">
-		<div class="tr cbi-section-table-row">
-			<div class="td cbi-section-table-cell" style="width:140px">
-				<select class="cbi-input-select" id="_newinst.type" name="_newinst.type">
-					<option value="_dummy">-- instance type --</option>
-					<option value="ss_local">ss-local</option>
-					<option value="ss_tunnel">ss-tunnel</option>
-					<option value="ss_redir">ss-redir</option>
-					<option value="ss_server">ss-server</option>
-				</select>
-			</div>
-			<div class="td cbi-section-table-cell" style="width:110px">
-				<input type="text" class="cbi-input-text" id="_newinst.name" name="_newinst.name" placeholder="<%:Name%>"/>
-			</div>
-			<div class="td cbi-section-table-cell left">
-				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>" value="<%:Add%>" />
-			</div>
-		</div>
+	<div>
+		<select class="cbi-input-select" id="_newinst.type" name="_newinst.type">
+			<option value="_dummy">-- instance type --</option>
+			<option value="ss_local">ss-local</option>
+			<option value="ss_tunnel">ss-tunnel</option>
+			<option value="ss_redir">ss-redir</option>
+			<option value="ss_server">ss-server</option>
+		</select>
 	</div>
+	<div>
+		<input type="text" class="cbi-input-text" id="_newinst.name" name="_newinst.name" placeholder="<%:Name%>"/>
+	</div>
+	<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>" value="<%:Add%>" />
 </div>
 <script type="text/javascript">//<![CDATA[
 	XHR.poll(5, '<%=url('admin/services/shadowsocks-libev/status')%>', null,
diff --git a/applications/luci-app-travelmate/luasrc/view/travelmate/logread.htm b/applications/luci-app-travelmate/luasrc/view/travelmate/logread.htm
index 6cbeaffde..c40bdeeb5 100644
--- a/applications/luci-app-travelmate/luasrc/view/travelmate/logread.htm
+++ b/applications/luci-app-travelmate/luasrc/view/travelmate/logread.htm
@@ -6,10 +6,10 @@ This is free software, licensed under the Apache License, Version 2.0
 <%+header%>
 
 <div class="cbi-map">
-	<fieldset class="cbi-section">
+	<div class="cbi-section">
 		<div class="cbi-section-descr"><%:This form shows the syslog output, pre-filtered for travelmate related messages only.%></div>
 		<textarea id="logread_id" style="width: 100%; height: 450px; border: 1px solid #cccccc; padding: 5px; font-size: 12px; font-family: monospace; resize: none;" readonly="readonly" wrap="off" rows="<%=content:cmatch("\n")+2%>"><%=content:pcdata()%></textarea>
-	</fieldset>
+	</div>
 </div>
 
 <script type="text/javascript">
diff --git a/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm b/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm
index bee6fcb36..ffacc2f6d 100644
--- a/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm
+++ b/applications/luci-app-travelmate/luasrc/view/travelmate/stations.htm
@@ -11,19 +11,21 @@ This is free software, licensed under the Apache License, Version 2.0
 
 <%+header%>
 
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+
 <div class="cbi-map">
 <div class="cbi-map-descr">
   <%=translatef("Provides an overview of all configured uplinks for the travelmate interface (%s). You can edit, delete or re-order existing uplinks or scan for a new one. The currently used uplink is emphasized in blue.", trmiface)%>
 </div>
 
-<fieldset class="cbi-section">
-  <div class="table cbi-section-table" style="empty-cells:hide">
+<div class="cbi-section">
+  <div class="table cbi-section-table">
     <div class="tr cbi-section-table-titles">
-      <div class="th cbi-section-table-cell" style="text-align:left"><%:Device%></div>
-      <div class="th cbi-section-table-cell" style="text-align:left"><%:SSID%></div>
-      <div class="th cbi-section-table-cell" style="text-align:left"><%:BSSID%></div>
-      <div class="th cbi-section-table-cell" style="text-align:left"><%:Encryption%></div>
-      <div class="th cbi-section-table-cell" style="text-align:center" colspan="2"><%:Actions%></div>
+      <div class="th left"><%:Device%></div>
+      <div class="th left"><%:SSID%></div>
+      <div class="th left"><%:BSSID%></div>
+      <div class="th left"><%:Encryption%></div>
+      <div class="th center">&#160;</div>
     </div>
 <%
   uci:foreach("wireless", "wifi-iface", function(s)
@@ -45,11 +47,9 @@ This is free software, licensed under the Apache License, Version 2.0
       <div class="td" style="<%=style%>"><%=ssid%></div>
       <div class="td" style="<%=style%>"><%=bssid%></div>
       <div class="td" style="<%=style%>"><%=encryption%></div>
-      <div class="td cbi-value-field" style="width:80px">
-        <input class="cbi-button cbi-button-up" type="button" value="" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiorder')%>?cfg=<%=section%>&amp;dir=up'" alt="<%:Move up%>" title="<%:Move up%>"/>
-        <input class="cbi-button cbi-button-down" type="button" value="" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiorder')%>?cfg=<%=section%>&amp;dir=down'" alt="<%:Move down%>" title="<%:Move down%>"/>
-      </div>
-      <div class="td cbi-value-field" style="width:150px">
+      <div class="td cbi-section-actions">
+        <input class="cbi-button cbi-button-up" type="button" value="<%:Up%>" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiorder')%>?cfg=<%=section%>&amp;dir=up'" alt="<%:Move up%>" title="<%:Move up%>"/>
+        <input class="cbi-button cbi-button-down" type="button" value="<%:Down%>" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiorder')%>?cfg=<%=section%>&amp;dir=down'" alt="<%:Move down%>" title="<%:Move down%>"/>
         <input type="button" class="cbi-button cbi-button-edit" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifiedit')%>?cfg=<%=section%>'" title="<%:Edit this Uplink%>" value="<%:Edit%>"/>
         <input type="button" class="cbi-button cbi-button-remove" onclick="location.href='<%=luci.dispatcher.build_url('admin/services/travelmate/wifidelete')%>?cfg=<%=section%>'" title="<%:Delete this Uplink%>" value="<%:Delete%>"/>
       </div>
@@ -59,7 +59,7 @@ This is free software, licensed under the Apache License, Version 2.0
   end)
 %>
   </div>
-</fieldset>
+</div>
 <div class="cbi-page-actions right">
 <%
   uci:foreach("wireless", "wifi-device", function(s)
@@ -68,7 +68,7 @@ This is free software, licensed under the Apache License, Version 2.0
   <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/wifiscan')%>" method="post">
     <input type="hidden" name="device" value="<%=device%>"/>
     <input type="hidden" name="token" value="<%=token%>"/>
-    <input type="submit" class="cbi-button cbi-button-find" title="<%:Find and join network on%> <%=device%>" value="<%:Scan%> <%=device%>"/>
+    <input type="submit" class="cbi-button cbi-button-action important" title="<%:Find and join network on%> <%=device%>" value="<%:Scan%> <%=device%>"/>
   </form>
 <%
   end)
diff --git a/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm b/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm
index 81182b99b..57efd9737 100644
--- a/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm
+++ b/applications/luci-app-travelmate/luasrc/view/travelmate/wifi_scan.htm
@@ -39,31 +39,33 @@ This is free software, licensed under the Apache License, Version 2.0
 
 <%+header%>
 
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+
 <div class="cbi-map">
 <h2 name="content"><%:Wireless Scan%></h2>
-    <fieldset class="cbi-section">
-        <div class="table cbi-section-table" style="empty-cells:hide">
+    <div class="cbi-section">
+        <div class="table cbi-section-table">
             <div class="tr cbi-section-table-titles">
-                <div class="th cbi-section-table-cell" style="text-align:left"><%:Uplink SSID%></div>
-                <div class="th cbi-section-table-cell" style="text-align:left"><%:Uplink BSSID%></div>
-                <div class="th cbi-section-table-cell" style="text-align:left"><%:Encryption%></div>
-                <div class="th cbi-section-table-cell" style="text-align:left" colspan="2"><%:Signal strength%></div>
+                <div class="th left"><%:Uplink SSID%></div>
+                <div class="th left"><%:Uplink BSSID%></div>
+                <div class="th left"><%:Encryption%></div>
+                <div class="th left"><%:Signal strength%></div>
             </div>
             <% for i, net in ipairs(iw.scanlist or { }) do %>
             <div class="tr cbi-section-table-row cbi-rowstyle-1">
-                <div class="td cbi-value-field" style="text-align:left">
+                <div class="td left">
                     <%=net.ssid and utl.pcdata(net.ssid) or "<em>%s</em>" % translate("hidden")%>
                 </div>
-                <div class="td cbi-value-field" style="text-align:left">
+                <div class="td left">
                     <%=net.bssid and utl.pcdata(net.bssid)%>
                 </div>
-                <div class="td cbi-value-field" style="text-align:left">
+                <div class="td left">
                     <%=format_wifi_encryption(net.encryption)%>
                 </div>
-                <div class="td cbi-value-field" style="text-align:left">
+                <div class="td left">
                     <%=percent_wifi_signal(net)%> %
                 </div>
-                <div class="td cbi-value-field" style="width:100px;text-align:right">
+                <div class="td cbi-section-actions">
                     <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/wifiadd')%>" method="post">
                         <input type="hidden" name="token" value="<%=token%>"/>
                         <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>"/>
@@ -80,16 +82,16 @@ This is free software, licensed under the Apache License, Version 2.0
             </div>
             <% end %>
         </div>
-    </fieldset>
+    </div>
 <div class="cbi-page-actions right">
+    <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/stations')%>" method="get">
+        <input class="cbi-button cbi-button-reset" type="submit" value="<%:Back to overview%>"/>
+    </form>
     <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/wifiscan')%>" method="post">
         <input type="hidden" name="token" value="<%=token%>"/>
         <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>"/>
         <input class="cbi-button cbi-input-find" type="submit" value="<%:Repeat scan%>"/>
     </form>
-    <form class="inline" action="<%=luci.dispatcher.build_url('admin/services/travelmate/stations')%>" method="post">
-        <input class="cbi-button cbi-button-reset" type="submit" value="<%:Back to overview%>"/>
-    </form>
 </div>
 </div>
 
diff --git a/applications/luci-app-upnp/luasrc/view/upnp_status.htm b/applications/luci-app-upnp/luasrc/view/upnp_status.htm
index 1e0922579..459c63c1d 100644
--- a/applications/luci-app-upnp/luasrc/view/upnp_status.htm
+++ b/applications/luci-app-upnp/luasrc/view/upnp_status.htm
@@ -16,40 +16,39 @@
 			var tb = document.getElementById('upnp_status_table');
 			if (st && tb)
 			{
-				/* clear all rows */
-				while (tb.firstElementChild !== tb.lastElementChild)
-					tb.removeChild(tb.lastElementChild);
+				var rows = [];
 
 				for (var i = 0; i < st.length; i++)
-					tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
-						E('<div class="td">', st[i].proto),
-						E('<div class="td">', st[i].extport),
-						E('<div class="td">', st[i].intaddr),
-						E('<div class="td">', st[i].intport),
-						E('<div class="td">', st[i].descr),
-						E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num))
-					]));
+					rows.push([
+						st[i].proto,
+						st[i].extport,
+						st[i].intaddr,
+						st[i].intport,
+						st[i].descr,
+						E('<input class="cbi-button cbi-button-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num))
+					]);
 
-				if (tb.firstElementChild === tb.lastElementChild)
-					tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active redirects.%></em></div></div>'));
+				cbi_update_table(tb, rows, '<em><%:There are no active redirects.%></em>');
 			}
 		}
 	);
 //]]></script>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Active UPnP Redirects%></legend>
-	<div class="table cbi-section-table" id="upnp_status_table">
-		<div class="tr cbi-section-table-titles">
-			<div class="th cbi-section-table-cell"><%:Protocol%></div>
-			<div class="th cbi-section-table-cell"><%:External Port%></div>
-			<div class="th cbi-section-table-cell"><%:Client Address%></div>
-			<div class="th cbi-section-table-cell"><%:Client Port%></div>
-			<div class="th cbi-section-table-cell"><%:Description%></div>
-			<div class="th cbi-section-table-cell">&#160;</div>
-		</div>
-		<div class="tr cbi-section-table-row">
-			<div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div>
+	<div class="cbi-section-node">
+		<div class="table" id="upnp_status_table">
+			<div class="tr table-titles">
+				<div class="th"><%:Protocol%></div>
+				<div class="th"><%:External Port%></div>
+				<div class="th"><%:Client Address%></div>
+				<div class="th"><%:Client Port%></div>
+				<div class="th"><%:Description%></div>
+				<div class="th cbi-section-actions">&#160;</div>
+			</div>
+			<div class="tr">
+				<div class="td" colspan="5"><em><%:Collecting data...%></em></div>
+			</div>
 		</div>
 	</div>
-</fieldset>
+</div>