Merge pull request #1895 from jow-/master

Responsive OpenWrt theme

1 files changed, 93 insertions, 110 deletions

diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm
index bb11cf1c06..76434f7e2b 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 -->