Added accordion style collapsible on client limits form.

Till Brehm

2015-11-15 c52fa27a2c744f008cd30e46fa00aa14d1b75b87

Added accordion style collapsible on client limits form.

 interface/web/client/templates/client_edit_limits.htm

@@ -45,11 +45,21 @@
                </div>
                <div class="form-group">
                    <label for="reseller" class="col-sm-3 control-label">{tmpl_var name='reseller_txt'}</label>
                    <div class="col-sm-9"><input class="form-control" type="checkbox" name="reseller" value="1" id="reseller" /></div></div>
                    <div class="col-sm-9"><input class="form-control" type="checkbox" name="reseller" value="1" id="reseller" /></div>
                </div>
                </tmpl_if>
            <div class="subsectiontoggle"><span class="showing"></span>{tmpl_var name='web_limits_txt'}<em class="showing"></em></div>
            <div>
                <div class="form-group">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingWeb">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseWeb" aria-expanded="true" aria-controls="collapseWeb">
          {tmpl_var name='web_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseWeb" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingWeb">
      <div class="panel-body">
                <div class="form-group">
                    <label for="web_servers" class="col-sm-3 control-label">{tmpl_var name='web_servers_txt'}</label>
                    <div class="col-sm-9"><select data-placeholder="{tmpl_var name='web_servers_placeholder'}" multiple name="web_servers[]" id="web_servers" class="form-control">
                        {tmpl_var name='web_servers'}
@@ -153,10 +163,20 @@
                        {tmpl_var name='limit_backup'}
                    </div>
                </div>
            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-email_limits" aria-expanded="false" aria-controls="toggle-email_limits">{tmpl_var name='email_limits_txt'}</button></div>
            <div id="toggle-email_limits" class="collapse">
                <div class="form-group">
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingMail">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMail" aria-expanded="false" aria-controls="collapseMail">
          {tmpl_var name='email_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseMail" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMail>
      <div class="panel-body">&nbsp;
                <div class="form-group">
                    <label for="mail_servers" class="col-sm-3 control-label">{tmpl_var name='mail_servers_txt'}</label>
                    <div class="col-sm-9"><select data-placeholder="{tmpl_var name='mail_servers_placeholder'}" multiple name="mail_servers[]" id="mail_servers" class="form-control">
                        {tmpl_var name='mail_servers'}
@@ -204,11 +224,21 @@
                    <div class="col-sm-9"><input type="text" name="limit_spamfilter_user" id="limit_spamfilter_user" value="{tmpl_var name='limit_spamfilter_user'}" class="form-control" /></div></div>
                <div class="form-group">
                    <label for="limit_spamfilter_policy" class="col-sm-3 control-label">{tmpl_var name='limit_spamfilter_policy_txt'}</label>
                    <div class="col-sm-9"><input type="text" name="limit_spamfilter_policy" id="limit_spamfilter_policy" value="{tmpl_var name='limit_spamfilter_policy'}" class="form-control" /></div></div>
            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-xmpp_limits" aria-expanded="false" aria-controls="toggle-xmpp_limits">{tmpl_var name='xmpp_limits_txt'}</button></div>
            <div id="toggle-xmpp_limits" class="collapse">
                <div class="form-group">
                    <div class="col-sm-9"><input type="text" name="limit_spamfilter_policy" id="limit_spamfilter_policy" value="{tmpl_var name='limit_spamfilter_policy'}" class="form-control" /></div>
                </div>
      </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingXMPP">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseXMPP" aria-expanded="false" aria-controls="collapseXMPP">
          {tmpl_var name='xmpp_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseXMPP" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingXMPP">
      <div class="panel-body">
                <div class="form-group">
                    <label for="xmpp_servers" class="col-sm-3 control-label">{tmpl_var name='xmpp_servers_txt'}</label>
                    <div class="col-sm-9"><select data-placeholder="{tmpl_var name='xmpp_servers_placeholder'}" multiple name="xmpp_servers[]" id="xmpp_servers" class="form-control">
                        {tmpl_var name='xmpp_servers'}
@@ -268,11 +298,20 @@
                        {tmpl_var name='limit_xmpp_status'}
                    </div>
                </div>

            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-database_limits" aria-expanded="false" aria-controls="toggle-database_limits">{tmpl_var name='database_limits_txt'}</button></div>
            <div id="toggle-database_limits" class="collapse">
                <div class="form-group">
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingDB">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDB" aria-expanded="false" aria-controls="collapseDB">
          {tmpl_var name='database_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseDB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDB">
      <div class="panel-body">
                <div class="form-group">
                    <label for="db_servers" class="col-sm-3 control-label">{tmpl_var name='db_servers_txt'}</label>
                    <div class="col-sm-9"><select data-placeholder="{tmpl_var name='db_servers_placeholder'}" multiple name="db_servers[]" id="db_servers" class="form-control">
                        {tmpl_var name='db_servers'}
@@ -284,11 +323,22 @@
                <div class="form-group">
                    <label for="limit_database_quota" class="col-sm-3 control-label">{tmpl_var name='limit_database_quota_txt'}</label>
                    <div class="col-sm-6"><input type="text" name="limit_database_quota" id="limit_database_quota" value="{tmpl_var name='limit_database_quota'}" class="form-control" /></div><div class="col-sm-3 input-sm">&nbsp;MB
                </div></div>
            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-cron_job_limits" aria-expanded="false" aria-controls="toggle-cron_job_limits">{tmpl_var name='cron_job_limits_txt'}</button></div>
            <div id="toggle-cron_job_limits" class="collapse">
                <div class="form-group">
                    </div>
                </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingCron">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseCron" aria-expanded="false" aria-controls="collapseCron">
          {tmpl_var name='cron_job_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseCron" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCron">
      <div class="panel-body">
                <div class="form-group">
                    <label for="limit_cron" class="col-sm-3 control-label">{tmpl_var name='limit_cron_txt'}</label>
                    <div class="col-sm-9"><input type="text" name="limit_cron" id="limit_cron" value="{tmpl_var name='limit_cron'}" class="form-control" /></div></div>
                <div class="form-group">
@@ -299,11 +349,23 @@
                </div>
                <div class="form-group">
                    <label for="limit_cron_frequency" class="col-sm-3 control-label">{tmpl_var name='limit_cron_frequency_txt'}</label>
                    <div class="col-sm-9"><input type="text" name="limit_cron_frequency" id="limit_cron_frequency" value="{tmpl_var name='limit_cron_frequency'}" class="form-control" /></div></div>
            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-dns_limits" aria-expanded="false" aria-controls="toggle-dns_limits">{tmpl_var name='dns_limits_txt'}</button></div>
            <div id="toggle-dns_limits" class="collapse">
                <div class="form-group">
                    <div class="col-sm-9"><input type="text" name="limit_cron_frequency" id="limit_cron_frequency" value="{tmpl_var name='limit_cron_frequency'}" class="form-control" /></div>
                </div>
            
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingDNS">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDNS" aria-expanded="false" aria-controls="collapseDNS">
          {tmpl_var name='dns_servers_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseDNS" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDNS">
      <div class="panel-body">
                <div class="form-group">
                    <label for="dns_servers" class="col-sm-3 control-label">{tmpl_var name='dns_servers_txt'}</label>
                    <div class="col-sm-9"><select data-placeholder="{tmpl_var name='dns_servers_placeholder'}" multiple name="dns_servers[]" id="dns_servers" class="form-control">
                        {tmpl_var name='dns_servers'}
@@ -323,11 +385,22 @@
                    <div class="col-sm-9"><input type="text" name="limit_dns_slave_zone" id="limit_dns_slave_zone" value="{tmpl_var name='limit_dns_slave_zone'}" class="form-control" /></div></div>
                <div class="form-group">
                    <label for="limit_dns_record" class="col-sm-3 control-label">{tmpl_var name='limit_dns_record_txt'}</label>
                    <div class="col-sm-9"><input type="text" name="limit_dns_record" id="limit_dns_record" value="{tmpl_var name='limit_dns_record'}" class="form-control" /></div></div>
            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-virtualization_limits" aria-expanded="false" aria-controls="toggle-virtualization_limits">{tmpl_var name='virtualization_limits_txt'}</button></div>
            <div id="toggle-virtualization_limits" class="collapse">
                <div class="form-group">
                    <div class="col-sm-9"><input type="text" name="limit_dns_record" id="limit_dns_record" value="{tmpl_var name='limit_dns_record'}" class="form-control" /></div>
                </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingVM">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseVM" aria-expanded="false" aria-controls="collapseVM">
          {tmpl_var name='virtualization_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseVM" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingVM">
      <div class="panel-body">
                <div class="form-group">
                    <label for="limit_openvz_vm" class="col-sm-3 control-label">{tmpl_var name='limit_openvz_vm_txt'}</label>
                    <div class="col-sm-9"><input type="text" name="limit_openvz_vm" id="limit_openvz_vm" value="{tmpl_var name='limit_openvz_vm'}" class="form-control" /></div></div>
                <div class="form-group">
@@ -336,15 +409,27 @@
                        {tmpl_var name='limit_openvz_vm_template_id'}
                    </select></div>
                </div>
            </div>
            <div class="col-sm-3"></div><div class="col-sm-9"><button class="btn btn-default formbutton-default" type="button" data-toggle="collapse" data-target="#toggle-aps_limits" aria-expanded="false" aria-controls="toggle-aps_limits">{tmpl_var name='aps_limits_txt'}</button></div>
            <div id="toggle-aps_limits" class="collapse">
                <div class="form-group">
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingAPS">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseAPS" aria-expanded="false" aria-controls="collapseAPS">
          {tmpl_var name='aps_limits_txt'}
        </a>
      </h4>
    </div>
    <div id="collapseAPS" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAPS">
      <div class="panel-body">
                <div class="form-group">
                    <label for="limit_aps" class="col-sm-3 control-label">{tmpl_var name='limit_aps_txt'}</label>
                    <div class="col-sm-9"><input type="text" name="limit_aps" id="limit_aps" value="{tmpl_var name='limit_aps'}" class="form-control" /></div></div>
            </div>
        

                    <div class="col-sm-9"><input type="text" name="limit_aps" id="limit_aps" value="{tmpl_var name='limit_aps'}" class="form-control" /></div>
                </div>
      </div>
    </div>
  </div>
</div>
        <input type="hidden" name="id" value="{tmpl_var name='id'}">

        <div class="clear"><div class="right">