[BS5] add responsive tabs and more

data/web/templates/user/AppPasswds.twig

@@ -1,11 +1,14 @@
 <div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
-  <div class="card">
-    <div class="card-header">{{ lang.user.app_passwds }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-AppPasswds" data-bs-toggle="collapse" aria-controls="collapse-tab-AppPasswds">
+        {{ lang.user.app_passwds }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.app_passwds }}
+    </div>
+    <div id="collapse-tab-AppPasswds" class="card-body collapse" data-bs-parent="#user-content">
       <p>{{ lang.user.app_hint|raw }}</p>
-      <div class="table-responsive">
-        <table class="table table-striped" id="app_passwd_table"></table>
-      </div>
+      <table id="app_passwd_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.app_passwds }}">
           <div class="btn-group">

data/web/templates/user/Pushover.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
-  <div class="card">
-    <div class="card-header">Pushover API</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-Pushover" data-bs-toggle="collapse" aria-controls="collapse-tab-Pushover">
+        Pushover API
+      </button>
+      <span class="d-none d-md-block">Pushover API
+    </div>
+    <div id="collapse-tab-Pushover" class="card-body collapse" data-bs-parent="#user-content">
       <form data-id="pushover" class="form well" method="post">
         <input type="hidden" value="0" name="evaluate_x_prio">
         <input type="hidden" value="0" name="only_x_prio">

data/web/templates/user/SpamAliases.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
-  <div class="card">
-    <div class="card-header">{{ lang.user.spam_aliases }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-SpamAliases" data-bs-toggle="collapse" aria-controls="collapse-tab-SpamAliases">
+        {{ lang.user.spam_aliases }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.spam_aliases }}
+    </div>
+    <div id="collapse-tab-SpamAliases" class="card-body collapse" data-bs-parent="#user-content">
       <div class="row">
         <div class="col-md-12 col-sm-12 col-12">
           <table id="tla_table" class="table table-striped dt-responsive w-100"></table>

data/web/templates/user/Spamfilter.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
-  <div class="card">
-    <div class="card-header">{{ lang.user.spamfilter }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-Spamfilter" data-bs-toggle="collapse" aria-controls="collapse-tab-Spamfilter">
+        {{ lang.user.spamfilter }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.spamfilter }}
+    </div>
+    <div id="collapse-tab-Spamfilter" class="card-body collapse" data-bs-parent="#user-content">
       <h4>{{ lang.user.spamfilter_behavior }}</h4>
       <div class="row">
         <div class="col-sm-12">
@@ -34,7 +39,7 @@
       </div>
       <hr>
       <div class="row">
-        <div class="col-sm-6">
+        <div class="col-sm-6 my-3">
           <h4>{{ lang.user.spamfilter_wl }}</h4>
           <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
           <form class="form-inline mb-4" data-id="add_wl_policy_mailbox">
@@ -45,9 +50,7 @@
               </span>
             </div>
           </form>
-          <div class="table-responsive">
-            <table class="table table-striped table-condensed" id="wl_policy_mailbox_table"></table>
-          </div>
+          <table id="wl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>
           <div class="mass-actions-user">
             <div class="btn-group" data-acl="{{ acl.spam_policy }}">
               <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
@@ -55,7 +58,7 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-6">
+        <div class="col-sm-6 my-3">
           <h4>{{ lang.user.spamfilter_bl }}</h4>
           <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
           <form class="form-inline mb-4" data-id="add_bl_policy_mailbox">
@@ -66,9 +69,7 @@
               </span>
             </div>
           </form>
-          <div class="table-responsive">
-            <table class="table table-striped table-condensed" id="bl_policy_mailbox_table"></table>
-          </div>
+          <table id="bl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>
           <div class="mass-actions-user">
             <div class="btn-group" data-acl="{{ acl.spam_policy }}">
               <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/user/Syncjobs.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
-  <div class="card">
-    <div class="card-header">{{ lang.user.sync_jobs }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-Syncjobs" data-bs-toggle="collapse" aria-controls="collapse-tab-Syncjobs">
+        {{ lang.user.sync_jobs }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.sync_jobs }}
+    </div>
+    <div id="collapse-tab-Syncjobs" class="card-body collapse" data-bs-parent="#user-content">
       <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">

data/web/templates/user/tab-user-auth.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-user-auth" role="tabpanel" aria-labelledby="tab-user-auth">
-  <div class="card">
-    <div class="card-header">{{ lang.user.mailbox_general }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-user-auth" data-bs-toggle="collapse" aria-controls="collapse-tab-user-auth">
+        {{ lang.user.mailbox_general }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.mailbox_general }}
+    </div>
+    <div id="collapse-tab-user-auth" class="card-body collapse show" data-bs-parent="#user-content">
       {% if not skip_sogo %}
       <div class="row">
         <div class="d-none d-sm-flex col-md-3 col-5 text-end"></div>
@@ -22,11 +27,11 @@
         <div class="d-none d-sm-flex col-md-3 col-5 text-end"></div>
         <div class="col-md-9 col-12">
           <p class="text-muted text-muted-mt-0">{{ lang.user.direct_protocol_access|raw }}</p>
-          {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-6 bg-success">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="badge fs-6 bg-success">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="badge fs-6 bg-success">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="badge fs-6 bg-success">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="badge fs-6 bg-success">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
         </div>
       </div>
       <hr>

data/web/templates/user/tab-user-details.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-details" role="tabpanel" aria-labelledby="tab-user-details">
-  <div class="card">
-    <div class="card-header">{{ lang.user.mailbox_details }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-user-details" data-bs-toggle="collapse" aria-controls="collapse-tab-user-details">
+        {{ lang.user.mailbox_details }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.mailbox_details }}
+    </div>
+    <div id="collapse-tab-user-details" class="card-body collapse" data-bs-parent="#user-content">
       <div class="row">
         <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
           <p class="small">{{ lang.user.direct_aliases_desc }}</p>

data/web/templates/user/tab-user-settings.twig

@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-settings" role="tabpanel" aria-labelledby="tab-user-settings">
-  <div class="card">
-    <div class="card-header">{{ lang.user.mailbox_settings }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-user-settings" data-bs-toggle="collapse" aria-controls="collapse-tab-user-settings">
+        {{ lang.user.mailbox_settings }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.mailbox_settings }}
+    </div>
+    <div id="collapse-tab-user-settings" class="card-body collapse" data-bs-parent="#user-content">
       {# Show tagging options #}
       <div class="row">
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tag_handling }}:</div>