[BS5] change bootstrap tabs

mailcow · Mar 30, 2022 · 4758033 · 4758033
1 parent 1e48fb8
commit 4758033
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 65 deletions.
diff --git a/data/web/templates/admin.twig b/data/web/templates/admin.twig
@@ -1,37 +1,37 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="dropdown active">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.admin.access }}<span class="caret"></span></a>
+<ul class="nav nav-tabs" role="tablist">
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.access }}</a>
     <ul class="dropdown-menu">
-      <li class="active" data-dont-remember="1" role="presentation"><a href="#tab-config-admins" aria-controls="tab-config-admins" role="tab" data-toggle="tab">{{ lang.admin.admins }}</a></li>
-      <!-- <li role="presentation"><a href="#tab-config-ldap-admins" aria-controls="tab-config-ldap-admins" role="tab" data-toggle="tab">{{ lang.admin.admins_ldap }}</a></li> -->
-      <li role="presentation"><a href="#tab-config-oauth2" aria-controls="tab-config-oauth2" role="tab" data-toggle="tab">{{ lang.admin.oauth2_apps }}</a></li>
-      <li role="presentation"><a href="#tab-config-rspamd" aria-controls="tab-config-rspamd" role="tab" data-toggle="tab">Rspamd UI</a></li>
+      <li><button class="dropdown-item active" data-bs-target="#tab-config-admins" aria-selected="false" aria-controls="tab-config-admins" role="tab" data-bs-toggle="tab">{{ lang.admin.admins }}</button></li>
+      <!-- <li><button class="dropdown-item" data-bs-target="#tab-config-ldap-admins" aria-controls="tab-config-ldap-admins" role="tab" data-bs-toggle="tab">{{ lang.admin.admins_ldap }}</button></li> -->
+      <li><button class="dropdown-item" data-bs-target="#tab-config-oauth2" aria-selected="false" aria-controls="tab-config-oauth2" role="tab" data-bs-toggle="tab">{{ lang.admin.oauth2_apps }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-rspamd" aria-selected="false" aria-controls="tab-config-rspamd" role="tab" data-bs-toggle="tab">Rspamd UI</button></li>
     </ul>
   </li>
 
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.admin.configuration }}<span class="caret"></span></a>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.configuration }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation"><a href="#tab-config-dkim" aria-controls="tab-config-dkim" role="tab" data-toggle="tab">{{ lang.admin.dkim_keys }}</a></li>
-      <li role="presentation"><a href="#tab-config-fwdhosts" aria-controls="tab-config-fwdhosts" role="tab" data-toggle="tab">{{ lang.admin.forwarding_hosts }}</a></li>
-      <li role="presentation"><a href="#tab-config-f2b" aria-controls="tab-config-f2b" role="tab" data-toggle="tab">{{ lang.admin.f2b_parameters }}</a></li>
-      <li role="presentation"><a href="#tab-config-quarantine" aria-controls="tab-config-quarantine" role="tab" data-toggle="tab">{{ lang.admin.quarantine }}</a></li>
-      <li role="presentation"><a href="#tab-config-quota" aria-controls="tab-config-quota" role="tab" data-toggle="tab">{{ lang.admin.quota_notifications }}</a></li>
-      <li role="presentation"><a href="#tab-config-rsettings" aria-controls="tab-config-rsettings" role="tab" data-toggle="tab">{{ lang.admin.rspamd_settings_map }}</a></li>
-      <li role="presentation"><a href="#tab-config-password-policy" aria-controls="tab-config-password-policy" role="tab" data-toggle="tab">{{ lang.admin.password_policy }}</a></li>
-      <li role="presentation"><a href="#tab-config-customize" aria-controls="tab-config-customize" role="tab" data-toggle="tab">{{ lang.admin.customize }}</a></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-dkim" aria-selected="false" aria-controls="tab-config-dkim" role="tab" data-bs-toggle="tab">{{ lang.admin.dkim_keys }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-fwdhosts" aria-selected="false" aria-controls="tab-config-fwdhosts" role="tab" data-bs-toggle="tab">{{ lang.admin.forwarding_hosts }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-f2b" aria-selected="false" aria-controls="tab-config-f2b" role="tab" data-bs-toggle="tab">{{ lang.admin.f2b_parameters }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-quarantine" aria-selected="false" aria-controls="tab-config-quarantine" role="tab" data-bs-toggle="tab">{{ lang.admin.quarantine }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-quota" aria-selected="false" aria-controls="tab-config-quota" role="tab" data-bs-toggle="tab">{{ lang.admin.quota_notifications }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-rsettings" aria-selected="false" aria-controls="tab-config-rsettings" role="tab" data-bs-toggle="tab">{{ lang.admin.rspamd_settings_map }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-password-policy" aria-selected="false" aria-controls="tab-config-password-policy" role="tab" data-bs-toggle="tab">{{ lang.admin.password_policy }}</button></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-config-customize" aria-selected="false" aria-controls="tab-config-customize" role="tab" data-bs-toggle="tab">{{ lang.admin.customize }}</button></li>
     </ul>
   </li>
-  <li role="presentation"><a href="#tab-routing" aria-controls="tab-routing" role="tab" data-toggle="tab">{{ lang.admin.routing }}</a></li>
-  <li role="presentation"><a href="#tab-sys-mails" aria-controls="tab-sys-mails" role="tab" data-toggle="tab">{{ lang.admin.sys_mails }}</a></li>
-  <li role="presentation"><a href="#tab-mailq" aria-controls="tab-mailq" role="tab" data-toggle="tab">{{ lang.admin.queue_manager }}</a></li>
-  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.admin.rspamd_global_filters }}
-      <span class="caret"></span></a>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-routing" aria-selected="false" aria-controls="tab-routing" role="tab" data-bs-toggle="tab">{{ lang.admin.routing }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-sys-mails" aria-selected="false" aria-controls="tab-sys-mails" role="tab" data-bs-toggle="tab">{{ lang.admin.sys_mails }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-mailq" aria-selected="false" aria-controls="tab-mailq" role="tab" data-bs-toggle="tab">{{ lang.admin.queue_manager }}</button></li>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.rspamd_global_filters }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation"><a href="#tab-globalfilter-regex" aria-controls="tab-globalfilter-regex" role="tab" data-toggle="tab">{{ lang.admin.regex_maps }}</a></li>
+      <li><button class="dropdown-item" data-bs-target="#tab-globalfilter-regex" aria-selected="false" aria-controls="tab-globalfilter-regex" role="tab" data-bs-toggle="tab">{{ lang.admin.regex_maps }}</button></li>
     </ul>
   </li>
 </ul>

diff --git a/data/web/templates/mailbox.twig b/data/web/templates/mailbox.twig
@@ -1,30 +1,28 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li role="presentation" class="active"><a href="#tab-domains" aria-controls="tab-domains" role="tab" data-toggle="tab">{{ lang.mailbox.domains }}</a></li>
-  <li role="presentation"><a href="#tab-mailboxes" aria-controls="tab-mailboxes" role="tab" data-toggle="tab">{{ lang.mailbox.mailboxes }}</a></li>
-  {#  <li class="dropdown">
-  <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}
-    <span class="caret"></span></a>
+<ul class="nav nav-tabs" role="tablist">
+  <li class="nav-item" role="presentation"><button class="nav-link active" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+  {#  <li class="nav-item dropdown" role="presentation">
+  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}</a>
   <ul class="dropdown-menu">
-    <li role="presentation"><a href="#tab-mailboxes" aria-controls="tab-mailboxes" role="tab" data-toggle="tab">{{ lang.mailbox.mailboxes }}</a></li>
-    <li role="presentation"><a href="#tab-mailbox-defaults" aria-controls="tab-mailbox-defaults" role="tab" data-toggle="tab">{{ lang.mailbox.mailbox_defaults }}</a></li>
+    <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+    <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailbox-defaults" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailbox-defaults">{{ lang.mailbox.mailbox_defaults }}</button></li>
   </ul>
   </li> #}
-  <li role="presentation"><a href="#tab-resources" aria-controls="tab-resources" role="tab" data-toggle="tab">{{ lang.mailbox.resources }}</a></li>
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.aliases }}
-      <span class="caret"></span></a>
+  <li class="nav-item" role="presentation"><button aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-target="#">{{ lang.mailbox.aliases }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation"><a href="#tab-mbox-aliases" aria-controls="tab-mbox-aliases" role="tab" data-toggle="tab">{{ lang.mailbox.aliases }}</a></li>
-      <li role="presentation"><a href="#tab-domain-aliases" aria-controls="tab-domain-aliases" role="tab" data-toggle="tab">{{ lang.mailbox.domain_aliases }}</a></li>
+      <li role="presentation"><button class="dropdown-item" aria-selected="false" aria-controls="tab-mbox-aliases" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mbox-aliases">{{ lang.mailbox.aliases }}</button></li>
+      <li role="presentation"><button class="dropdown-item" aria-selected="false" aria-controls="tab-domain-aliases" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domain-aliases">{{ lang.mailbox.domain_aliases }}</button></li>
     </ul>
   </li>
-  <li role="presentation"><a href="#tab-syncjobs" aria-controls="tab-syncjobs" role="tab" data-toggle="tab">{{ lang.mailbox.sync_jobs }}</a></li>
-  <li role="presentation"><a href="#tab-filters" aria-controls="tab-filters" role="tab" data-toggle="tab">{{ lang.mailbox.filters }}</a></li>
-  <li role="presentation"><a href="#tab-bcc" aria-controls="tab-bcc" role="tab" data-toggle="tab">{{ lang.mailbox.address_rewriting }}</a></li>
-  <li role="presentation"{% if mailcow_cc_role != 'admin' %} class="hidden"{% endif %}><a href="#tab-tls-policy" aria-controls="tab-tls-policy" role="tab" data-toggle="tab">{{ lang.mailbox.tls_policy_maps }}</a></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-syncjobs" role="tab" data-bs-toggle="tab" data-bs-target="#tab-syncjobs">{{ lang.mailbox.sync_jobs }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-filters" role="tab" data-bs-toggle="tab" data-bs-target="#tab-filters">{{ lang.mailbox.filters }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-bcc" role="tab" data-bs-toggle="tab" data-bs-target="#tab-bcc">{{ lang.mailbox.address_rewriting }}</button></li>
+  <li class="nav-item" role="presentation"{% if mailcow_cc_role != 'admin' %} class="d-none"{% endif %}><button class="nav-link" aria-selected="false" aria-controls="tab-tls-policy" role="tab" data-bs-toggle="tab" data-bs-target="#tab-tls-policy">{{ lang.mailbox.tls_policy_maps }}</button></li>
 </ul>
 
 <div class="row">

diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-bcc">
+<div role="tabpanel" class="tab-pane fade" id="tab-bcc" role="tabpanel" aria-labelledby="tab-bcc">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.bcc_maps }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-domain-aliases">
+<div role="tabpanel" class="tab-pane fade" id="tab-domain-aliases" role="tabpanel" aria-labelledby="tab-domain-aliases">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.domain_aliases }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane active" id="tab-domains">
+<div role="tabpanel" class="tab-pane fade show active" id="tab-domains" role="tabpanel" aria-labelledby="tab-domains">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.domains }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-filters">
+<div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.filters }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-mailbox-defaults.twig b/data/web/templates/mailbox/tab-mailbox-defaults.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-mailbox-defaults">
+<div role="tabpanel" class="tab-pane fade" id="tab-mailbox-defaults" role="tabpanel" aria-labelledby="tab-mailbox-defaults">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.mailbox_defaults }}

diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-mailboxes">
+<div role="tabpanel" class="tab-pane fade" id="tab-mailboxes" role="tabpanel" aria-labelledby="tab-mailboxes">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.mailboxes }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-mbox-aliases">
+<div role="tabpanel" class="tab-pane fade" id="tab-mbox-aliases" role="tabpanel" aria-labelledby="tab-mbox-aliases">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.aliases }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-resources">
+<div role="tabpanel" class="tab-pane fade" id="tab-resources" role="tabpanel" aria-labelledby="tab-resources">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.resources }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-syncjobs">
+<div role="tabpanel" class="tab-pane fade" id="tab-syncjobs"  role="tabpanel" aria-labelledby="tab-syncjobs">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.sync_jobs }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane{% if mailcow_cc_role != 'admin' %} hidden{% endif %}" id="tab-tls-policy">
+<div role="tabpanel" class="tab-pane fade{% if mailcow_cc_role != 'admin' %} d-none{% endif %}" id="tab-tls-policy" role="tabpanel" aria-labelledby="tab-tls-policy">
   <div class="panel panel-default">
     <div class="panel-heading">
       {{ lang.mailbox.tls_policy_maps_long }} <span class="badge badge-info table-lines"></span>

diff --git a/data/web/templates/user.twig b/data/web/templates/user.twig
@@ -2,20 +2,20 @@
 
 {% block content %}
 <!-- Nav tabs -->
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="dropdown active">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.user.mailbox }}<span class="caret"></span></a>
+<ul class="nav nav-tabs" role="tablist">
+  <li class="nav-item dropdown" role="presentation">
+    <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.user.mailbox }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation" class="active" data-dont-remember="1"><a href="#tab-user-auth" aria-controls="tab-user-auth" role="tab" data-toggle="tab">{{ lang.user.mailbox_general }}</a></li>
-      <li role="presentation"><a href="#tab-user-details" aria-controls="tab-config-fwdhosts" role="tab" data-toggle="tab">{{ lang.user.mailbox_details }}</a></li>
-      <li role="presentation"><a href="#tab-user-settings" aria-controls="tab-config-f2b" role="tab" data-toggle="tab">{{ lang.user.mailbox_settings }}</a></li>
+      <li><button class="dropdown-item active" role="tab" aria-selected="true" aria-controls="tab-user-auth" data-bs-toggle="tab" data-bs-target="#tab-user-auth">{{ lang.user.mailbox_general }}</button></li>
+      <li><button class="dropdown-item" role="tab" aria-selected="false" aria-controls="tab-config-fwdhosts" data-bs-toggle="tab" data-bs-target="#tab-user-details">{{ lang.user.mailbox_details }}</button></li>
+      <li><button class="dropdown-item" role="tab" aria-selected="false" aria-controls="tab-config-f2b" data-bs-toggle="tab" data-bs-target="#tab-user-settings">{{ lang.user.mailbox_settings }}</button></li>
     </ul>
   </li>
-  <li role="presentation"><a href="#SpamAliases" aria-controls="SpamAliases" role="tab" data-toggle="tab">{{ lang.user.spam_aliases }}</a></li>
-  <li role="presentation"><a href="#Spamfilter" aria-controls="Spamfilter" role="tab" data-toggle="tab">{{ lang.user.spamfilter }}</a></li>
-  <li role="presentation"><a href="#Syncjobs" aria-controls="Syncjobs" role="tab" data-toggle="tab">{{ lang.user.sync_jobs }}</a></li>
-  <li role="presentation"><a href="#AppPasswds" aria-controls="AppPasswds" role="tab" data-toggle="tab">{{ lang.user.app_passwds }}</a></li>
-  <li role="presentation"><a href="#Pushover" aria-controls="Pushover" role="tab" data-toggle="tab">Pushover API</a></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="SpamAliases" role="tab" data-bs-toggle="tab" data-bs-target="#SpamAliases">{{ lang.user.spam_aliases }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Spamfilter" role="tab" data-bs-toggle="tab" data-bs-target="#Spamfilter">{{ lang.user.spamfilter }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Syncjobs" role="tab" data-bs-toggle="tab" data-bs-target="#Syncjobs">{{ lang.user.sync_jobs }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="AppPasswds" role="tab" data-bs-toggle="tab" data-bs-target="#AppPasswds">{{ lang.user.app_passwds }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Pushover" role="tab" data-bs-toggle="tab" data-bs-target="#Pushover">Pushover API</button></li>
 </ul>
 <hr>
 

diff --git a/data/web/templates/user/tab-user-auth.twig b/data/web/templates/user/tab-user-auth.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane active" id="tab-user-auth">
+<div role="tabpanel" class="tab-pane fade show active" id="tab-user-auth" role="tabpanel" aria-labelledby="tab-user-auth">
   <div class="panel panel-default">
     <div class="panel-heading">{{ lang.user.mailbox_general }}</div>
     <div class="panel-body">

diff --git a/data/web/templates/user/tab-user-details.twig b/data/web/templates/user/tab-user-details.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="tab-user-details">
+<div role="tabpanel" class="tab-pane fade" id="tab-user-details" role="tabpanel" aria-labelledby="tab-user-details">
   <div class="panel panel-default">
     <div class="panel-heading">{{ lang.user.mailbox_details }}</div>
     <div class="panel-body">