Gnous/mailcow
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

[Web] Edit Domain/Mailbox - added collapsible tabs for mobile devices

Browse Source 
Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
This commit is contained in:
Kristian Feldsam 2023-09-03 19:41:06 +02:00
parent db9562e843
commit 9ffa810054
2 changed files with 687 additions and 611 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
data/web/templates/edit/domain.twig
View File

@ -2,15 +2,23 @@
{% block inner_content %} {% block inner_content %}
{% if result %} {% if result %}
<ul class="nav nav-tabs" role="tablist"> <div id="domain-content" class="responsive-tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li>
<li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li>
<li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li>
<li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li>
</ul> </ul>
<hr> <hr class="d-none d-md-block">
<div class="tab-content"> <div class="tab-content">
<div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit"> <div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-dedit" data-bs-toggle="collapse" aria-controls="collapse-tab-dedit">
{{ lang.edit.domain }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-dedit" class="card-body collapse show" data-bs-parent="#domain-content">
<form data-id="editdomain" class="form-horizontal" role="form" method="post"> <form data-id="editdomain" class="form-horizontal" role="form" method="post">
<input type="hidden" value="0" name="active"> <input type="hidden" value="0" name="active">
<input type="hidden" value="0" name="backupmx"> <input type="hidden" value="0" name="backupmx">
@ -144,7 +152,16 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
</div>
<div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit"> <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-ratelimit" data-bs-toggle="collapse" aria-controls="collapse-tab-ratelimit">
{{ lang.edit.ratelimit }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-ratelimit" class="card-body collapse" data-bs-parent="#domain-content">
<form data-id="domratelimit" class="well" method="post"> <form data-id="domratelimit" class="well" method="post">
<div class="row mb-2"> <div class="row mb-2">
<label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label> <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
@ -164,7 +181,16 @@
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter"> <div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-spamfilter" data-bs-toggle="collapse" aria-controls="collapse-tab-spamfilter">
{{ lang.edit.spam_filter }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-spamfilter" class="card-body collapse" data-bs-parent="#domain-content">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<h4>{{ lang.user.spamfilter_wl }}</h4> <h4>{{ lang.user.spamfilter_wl }}</h4>
@ -202,7 +228,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc"> <div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-qwbcc" data-bs-toggle="collapse" aria-controls="collapse-tab-qwbcc">
{{ lang.edit.quota_warning_bcc }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-qwbcc" class="card-body collapse" data-bs-parent="#domain-content">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h4>{{ lang.edit.quota_warning_bcc }}</h4> <h4>{{ lang.edit.quota_warning_bcc }}</h4>
@ -231,6 +266,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
{% else %} {% else %}
{{ parent() }} {{ parent() }}

46
data/web/templates/edit/mailbox.twig
View File

@ -2,15 +2,23 @@
{% block inner_content %} {% block inner_content %}
{% if result %} {% if result %}
<ul class="nav nav-tabs" role="tablist"> <div id="mailbox-content" class="responsive-tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li>
<li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li>
<li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li>
<li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li> <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li>
</ul> </ul>
<hr> <hr class="d-none d-md-block">
<div class="tab-content"> <div class="tab-content">
<div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit"> <div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-medit" data-bs-toggle="collapse" aria-controls="collapse-tab-medit">
{{ lang.edit.mailbox }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-medit" class="card-body collapse show" data-bs-parent="#mailbox-content">
<form class="form-horizontal" data-id="editmailbox" role="form" method="post"> <form class="form-horizontal" data-id="editmailbox" role="form" method="post">
<input type="hidden" value="default" name="sender_acl"> <input type="hidden" value="default" name="sender_acl">
<input type="hidden" value="0" name="force_pw_update"> <input type="hidden" value="0" name="force_pw_update">
@ -265,7 +273,16 @@
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover"> <div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-mpushover" data-bs-toggle="collapse" aria-controls="collapse-tab-mpushover">
{{ lang.edit.pushover }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-mpushover" class="card-body collapse" data-bs-parent="#mailbox-content">
<form data-id="pushover" class="form well" method="post"> <form data-id="pushover" class="form well" method="post">
<input type="hidden" value="0" name="evaluate_x_prio"> <input type="hidden" value="0" name="evaluate_x_prio">
<input type="hidden" value="0" name="only_x_prio"> <input type="hidden" value="0" name="only_x_prio">
@ -361,7 +378,16 @@
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl"> <div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-macl" data-bs-toggle="collapse" aria-controls="collapse-tab-macl">
{{ lang.edit.acl }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-macl" class="card-body collapse" data-bs-parent="#mailbox-content">
<form data-id="useracl" class="form-inline well" method="post"> <form data-id="useracl" class="form-inline well" method="post">
<div class="row"> <div class="row">
<div class="col-sm-1"> <div class="col-sm-1">
@ -378,7 +404,16 @@
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl"> <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
<div class="card mb-4">
<div class="card-header d-flex d-md-none fs-5">
<button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-mrl" data-bs-toggle="collapse" aria-controls="collapse-tab-mrl">
{{ lang.edit.ratelimit }} <span class="badge bg-info table-lines"></span>
</button>
</div>
<div id="collapse-tab-mrl" class="card-body collapse" data-bs-parent="#mailbox-content">
<form data-id="mboxratelimit" class="well" method="post"> <form data-id="mboxratelimit" class="well" method="post">
<div class="row mb-2"> <div class="row mb-2">
<div class="col-sm-2"> <div class="col-sm-2">
@ -401,6 +436,9 @@
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
</div>
</div> </div>
{% else %} {% else %}
{{ parent() }} {{ parent() }}