luci-app-firewall: cleanup template markup

Rework the cbi section add template markup to properly render with the
latest responsive design changes.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-06-19 16:58:39 +02:00
parent bbf096c79e
commit e097d3f734
3 changed files with 211 additions and 227 deletions

View file

@ -18,27 +18,24 @@
vals[#vals+1] = '%s (%s)' %{ ip, name } vals[#vals+1] = '%s (%s)' %{ ip, name }
end) end)
-%> -%>
<div class="cbi-section-create cbi-tblsection-create">
<br /> <h4><%:New port forward%></h4>
<div class="table cbi-section-table" style="width:810px; margin-left:5px"> <div class="table">
<div class="tr cbi-section-table-titles"> <div class="tr table-titles">
<div class="th cbi-section-table-cell" colspan="8"><%:New port forward%>:</div> <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>
<div class="tr cbi-section-table-descr"> <div class="tr">
<div class="th cbi-section-table-cell"><%:Name%></div> <div class="td">
<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>
<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%>" /> <input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New port forward%>" />
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto"> <select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto">
<option value="tcp udp">TCP+UDP</option> <option value="tcp udp">TCP+UDP</option>
<option value="tcp">TCP</option> <option value="tcp">TCP</option>
@ -46,28 +43,28 @@
<option value="other"><%:Other...%></option> <option value="other"><%:Other...%></option>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:55px"> <div class="td">
<select class="cbi-input-select" id="_newfwd.extzone" name="_newfwd.extzone"> <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 %> <% for _, z in ipairs(ezl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" data-type="portrange" data-optional="true" /> <input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" data-type="portrange" data-optional="true" />
</div> </div>
<div class="td cbi-section-table-cell" style="width:55px"> <div class="td">
<select class="cbi-input-select" id="_newfwd.intzone" name="_newfwd.intzone"> <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 %> <% for _, z in ipairs(izl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<input type="text" class="cbi-input-text" id="_newfwd.intaddr" name="_newfwd.intaddr" data-type="host" data-optional="true"<%= <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}) ifattr(#keys > 0, "data-choices", {keys, vals})
%>/> %>/>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" data-type="portrange" data-optional="true" /> <input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" data-type="portrange" data-optional="true" />
</div> </div>
<div class="td cbi-section-table-cell"> <div class="td bottom">
<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" /> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
</div> </div>
</div> </div>
@ -109,4 +106,3 @@
} }
}); });
//]]></script> //]]></script>
</div>

View file

@ -5,24 +5,20 @@
local zones = fw:get_zones() local zones = fw:get_zones()
%> %>
<div class="cbi-section-create cbi-tblsection-create">
<% if wz then %> <% if wz then %>
<br /> <h4><%:Open ports on router%></h4>
<div class="table cbi-section-table" style="margin-left:5px"> <div class="table">
<div class="tr cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<div class="th cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</div> <div class="th"><%:Name%></div>
<div class="th"><%:Protocol%></div>
<div class="th"><%:External port%></div>
<div class="th"></div>
</div> </div>
<div class="tr cbi-section-table-descr"> <div class="tr">
<div class="th cbi-section-table-cell"><%:Name%></div> <div class="td">
<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>
<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%>" /> <input type="text" class="cbi-input-text" id="_newopen.name" name="_newopen.name" placeholder="<%:New input rule%>" />
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<select class="cbi-input-select" id="_newopen.proto" name="_newopen.proto"> <select class="cbi-input-select" id="_newopen.proto" name="_newopen.proto">
<option value="tcp udp">TCP+UDP</option> <option value="tcp udp">TCP+UDP</option>
<option value="tcp">TCP</option> <option value="tcp">TCP</option>
@ -30,45 +26,43 @@
<option value="other"><%:Other...%></option> <option value="other"><%:Other...%></option>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" /> <input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" />
</div> </div>
<div class="td cbi-section-table-cell left"> <div class="td bottom">
<input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" /> <input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" />
</div> </div>
</div> </div>
</div> </div>
<% end %> <% end %>
<% if #zones > 1 then %> <% if #zones > 1 then %>
<div class="table cbi-section-table" style="margin-left:5px"> <h4><%:New forward rule%></h4>
<div class="table">
<div class="tr cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<div class="th cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</div> <div class="th"><%:Name%></div>
<div class="th"><%:Source zone%></div>
<div class="th"><%:Destination zone%></div>
<div class="th"></div>
</div> </div>
<div class="tr cbi-section-table-descr"> <div class="tr">
<div class="th cbi-section-table-cell"><%:Name%></div> <div class="td">
<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>
<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%>" /> <input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New forward rule%>" />
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src"> <select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src">
<% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <% 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> <option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
<%- end %> <%- end %>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest"> <select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest">
<% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <% 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> <option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
<%- end %> <%- end %>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell left"> <div class="td bottom">
<input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" /> <input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" />
</div> </div>
</div> </div>
@ -113,4 +107,3 @@
cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname'); cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');
//]]></script> //]]></script>
<% end %> <% end %>
</div>

View file

@ -12,48 +12,44 @@
end end
%> %>
<div class="cbi-section-create cbi-tblsection-create">
<% if #zones > 1 then %> <% if #zones > 1 then %>
<br /> <h4><%:New source NAT%></h4>
<div class="table cbi-section-table" style="width:700px; margin-left:5px"> <div class="table">
<div class="tr cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<div class="th cbi-section-table-cell left" colspan="6"><%:New source NAT%>:</div> <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>
<div class="tr cbi-section-table-descr"> <div class="tr">
<div class="th cbi-section-table-cell"><%:Name%></div> <div class="td">
<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>
<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%>" /> <input type="text" class="cbi-input-text" id="_newsnat.name" name="_newsnat.name" placeholder="<%:New SNAT rule%>" />
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<select class="cbi-input-text" id="_newsnat.src" name="_newsnat.src"> <select class="cbi-input-text" id="_newsnat.src" name="_newsnat.src">
<% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <% 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> <option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
<%- end %> <%- end %>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <div class="td">
<select class="cbi-input-text" id="_newsnat.dest" name="_newsnat.dest"> <select class="cbi-input-text" id="_newsnat.dest" name="_newsnat.dest">
<% local k, v; for k, v in ipairs(fw:get_zones()) do -%> <% 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> <option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
<%- end %> <%- end %>
</select> </select>
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <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"<%= <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 }) ifattr(#keys > 0, "data-choices", { keys, vals })
%> /> %> />
</div> </div>
<div class="td cbi-section-table-cell" style="width:110px"> <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" /> <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>
<div class="td cbi-section-table-cell"> <div class="td bottom">
<input type="submit" class="cbi-button cbi-button-link" name="_newsnat.submit" value="<%:Add and edit...%>" /> <input type="submit" class="cbi-button cbi-button-link" name="_newsnat.submit" value="<%:Add and edit...%>" />
</div> </div>
</div> </div>
@ -61,4 +57,3 @@
<% else %> <% else %>
<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" /> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
<% end %> <% end %>
</div>