Fix display menu on mobile devices

vtsykun · Sep 25, 2023 · 876980d · 876980d
1 parent ddfe4e3
commit 876980d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 4 deletions.
diff --git a/public/packeton/css/main.css b/public/packeton/css/main.css
@@ -235,6 +235,10 @@ strong {
     .navbar .nav > .nav-user > .nav-user-signin:hover > .signin-box {
         display: none;
     }
+    .navbar .nav > .nav-user > section:hover > .nav-user-menu.nav-admin-menu {
+        display: block;
+        width: 100%;
+    }
 }
 
 .navbar .nav > .nav-user > section a {
@@ -1880,3 +1884,16 @@ label.required em {
 .removeRow {
     text-decoration: none !important;
 }
+
+@media (max-width: 576px) {
+    .table-mb {
+        display: block;
+        overflow-x: auto;
+    }
+    .role-name {
+        white-space: normal;
+    }
+    .user-edit-btn {
+        display: none;
+    }
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -93,7 +93,7 @@
                             <li class="nav-user">
                                 <section>
                                     Settings
-                                    <section class="nav-user-menu">
+                                    <section class="nav-user-menu nav-admin-menu">
                                         {{ knp_menu_render('admin_menu', {'allow_safe_labels': true}) }}
                                     </section>
                                 </section>

diff --git a/templates/user/attempts.html.twig b/templates/user/attempts.html.twig
@@ -7,7 +7,7 @@
 
     {% block list %}
         <b style="font-size: 1.3em">All Login attempts</b>
-        <table class="table table-bordered">
+        <table class="table table-mb table-bordered">
             <thead style="background: #dddddd">
             <tr class="table-token-tr">
                 <th>SOURCE</th>

diff --git a/templates/user/list.html.twig b/templates/user/list.html.twig
@@ -33,7 +33,7 @@
                             {% endif %}
                         </a>
 
-                        <div style="width: 90%; margin-top: 10px">
+                        <div style="width: 90%; margin-top: 10px" class="user-edit-btn">
                             <a href="{{ path('users_update', {name: user.userIdentifier}) }}" style="float: right; padding: 5px 14px;" class="btn btn-primary">Edit</a>
                         </div>
                     </div>

diff --git a/templates/user/token_list.html.twig b/templates/user/token_list.html.twig
@@ -12,7 +12,7 @@
         <div style="float:right; margin: 20px">
             <a class="btn btn-primary" href="{{ path('profile_add_tokens') }}">Add Token</a>
         </div>
-        <table class="table table-bordered">
+        <table class="table table-mb table-bordered">
             <thead style="background: #dddddd">
             <tr class="table-token-tr">
                 <th>Name</th>