luci-app-firewall: cleanup template markup
authorJo-Philipp Wich <jo@mein.io>
Tue, 19 Jun 2018 14:58:39 +0000 (16:58 +0200)
committerJo-Philipp Wich <jo@mein.io>
Sat, 23 Jun 2018 16:01:43 +0000 (18:01 +0200)
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>
applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm

index 279b6e06d6e2a66a6d2a93846bc6730aa59e7414..f48599b505fb8295ba644d8a840771fce3338ff2 100644 (file)
                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>
index c99ecaca376b07b1e11cabc31e68a975f9245030..273675cd30226fcfea872097153bd99a9f043ca7 100644 (file)
        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 %>
index b2775cf69453161ecfc7f81d1c373de8452c3a70..0b4774ccc0d54451f4f154624e37807f76b3e5cc 100644 (file)
        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 %>