From d01c8ee3666beafb8c6be7cb075cfb1e8b03b5ea Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Tue, 20 Apr 2021 14:03:36 +0200
Subject: [PATCH] improve responsive design

---
 assets/css/admin.scss                         |  15 +++
 .../site/navigation_admin/index.html.twig     | 118 +++++++++---------
 .../views/site/page_admin/index.html.twig     | 108 ++++++++--------
 .../views/user/user_admin/index.html.twig     |  94 +++++++-------
 4 files changed, 178 insertions(+), 157 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 79b27b1..f904dcf 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -14,6 +14,16 @@ $pagination-active-bg: #343a40;
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~@fortawesome/fontawesome-free/css/all.css";
 
+@for $i from 1 through 100 {
+    .miw-#{$i*5} {
+        min-width: $i * 5px;
+    }
+}
+
+body {
+    overflow-x: hidden;
+}
+
 #logo {
     width: 30px;
 }
@@ -234,6 +244,11 @@ table.table-fixed, .table-fixed > table {
 
 }
 
+.table-responsive {
+    max-width: 100%;
+    overflow-y: hidden;
+}
+
 @media screen and (min-height: 650px) {
     table.table-fixed, .table-fixed > table {
         width: 100%;
diff --git a/core/Resources/views/site/navigation_admin/index.html.twig b/core/Resources/views/site/navigation_admin/index.html.twig
index 78f3fd9..1cbd952 100644
--- a/core/Resources/views/site/navigation_admin/index.html.twig
+++ b/core/Resources/views/site/navigation_admin/index.html.twig
@@ -24,64 +24,66 @@
         {{ knp_pagination_render(pager) }}
     </div>
 
-    <table class="table" data-table-fixed>
-        <thead class="thead-light">
-            <tr>
-                <th class="col-5">
-                    {{ 'Label'|trans }}
-                </th>
-                <th class="col-5">
-                    {{ 'Domain'|trans }}
-                </th>
-                <th class="col-2 text-right">
-                    {{ 'Actions'|trans }}
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for item in pager %}
-                {% set edit = path('admin_site_navigation_edit', {entity: item.id}) %}
-                {% set show = path('admin_site_navigation_show', {entity: item.id}) %}
-
-                <tr data-dblclick="{{ edit }}">
-                    <td class="col-5">
-                        <a href="{{ show }}" class="font-weight-bold text-body d-block">
-                            {{ item.label }}
-                        </a>
-
-                        {{ item.code }}
-                    </td>
-                    <td class="col-5">
-                        <a href="" class="btn btn-sm btn-light">
-                            {{ item.domain }}
-                        </a>
-                    </td>
-                    <td class="col-2 text-right">
-                        <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
-                            <span class="fa fa-edit"></span>
-                        </a>
-                        <button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
-                            <span class="fa fa-trash"></span>
-                        </button>
-
-                        <form method="post" action="{{ path('admin_site_navigation_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
-                            <input type="hidden" name="_method" value="DELETE">
-                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
-                        </form>
-                    </td>
-                </tr>
-            {% else %}
+    <div class="table-responsive">
+        <table class="table" data-table-fixed>
+            <thead class="thead-light">
                 <tr>
-                    <td class="col-12 text-center p-4 text-black-50">
-                        <div class="display-1">
-                            <span class="fa fa-search"></span>
-                        </div>
-                        <div class="display-5 mt-3">
-                            {{ 'No result'|trans }}
-                        </div>
-                    </td>
+                    <th class="col-5">
+                        {{ 'Label'|trans }}
+                    </th>
+                    <th class="col-5">
+                        {{ 'Domain'|trans }}
+                    </th>
+                    <th class="col-2 text-right">
+                        {{ 'Actions'|trans }}
+                    </th>
                 </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                {% for item in pager %}
+                    {% set edit = path('admin_site_navigation_edit', {entity: item.id}) %}
+                    {% set show = path('admin_site_navigation_show', {entity: item.id}) %}
+
+                    <tr data-dblclick="{{ edit }}">
+                        <td class="col-5">
+                            <a href="{{ show }}" class="font-weight-bold text-body d-block">
+                                {{ item.label }}
+                            </a>
+
+                            {{ item.code }}
+                        </td>
+                        <td class="col-5">
+                            <a href="" class="btn btn-sm btn-light">
+                                {{ item.domain }}
+                            </a>
+                        </td>
+                        <td class="col-2 text-right">
+                            <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
+                                <span class="fa fa-edit"></span>
+                            </a>
+                            <button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
+                                <span class="fa fa-trash"></span>
+                            </button>
+
+                            <form method="post" action="{{ path('admin_site_navigation_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
+                                <input type="hidden" name="_method" value="DELETE">
+                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
+                            </form>
+                        </td>
+                    </tr>
+                {% else %}
+                    <tr>
+                        <td class="col-12 text-center p-4 text-black-50">
+                            <div class="display-1">
+                                <span class="fa fa-search"></span>
+                            </div>
+                            <div class="display-5 mt-3">
+                                {{ 'No result'|trans }}
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 {% endblock %}
diff --git a/core/Resources/views/site/page_admin/index.html.twig b/core/Resources/views/site/page_admin/index.html.twig
index e60a961..63b4a40 100644
--- a/core/Resources/views/site/page_admin/index.html.twig
+++ b/core/Resources/views/site/page_admin/index.html.twig
@@ -13,59 +13,61 @@
         {{ knp_pagination_render(pager) }}
     </div>
 
-    <table class="table" data-table-fixed>
-        <thead class="thead-light">
-            <tr>
-                <th class="col-10">{{ 'Name'|trans }}</th>
-                <th class="col-2 text-right">{{ 'Actions'|trans }}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for item in pager %}
-                {% set edit = path('admin_site_page_edit', {entity: item.id}) %}
-
-                <tr data-dblclick="{{ edit }}">
-                    <td class="col-5">
-                        <a href="{{ edit }}" class="font-weight-bold text-body d-block">
-                            {{ item.name }}
-                        </a>
-                    </td>
-                    <td class="col-5">
-                        {% for node in item.nodes %}
-                            <a href="{{ path('admin_site_tree_navigation', {
-                                navigation: node.menu.navigation.id,
-                                'data-modal': path('admin_site_node_edit', {entity: node.id}),
-                            }) }}" class="btn btn-sm btn-light mr-1">
-                                {{ node.label }}
-                            </a>
-                        {% endfor %}
-                    </td>
-                    <td class="col-2 text-right">
-                        <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
-                            <span class="fa fa-edit"></span>
-                        </a>
-                        <button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
-                            <span class="fa fa-trash"></span>
-                        </button>
-
-                        <form method="post" action="{{ path('admin_site_page_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
-                            <input type="hidden" name="_method" value="DELETE">
-                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
-                        </form>
-                    </td>
-                </tr>
-            {% else %}
+    <div class="table-responsive">
+        <table class="table" data-table-fixed>
+            <thead class="thead-light">
                 <tr>
-                    <td class="col-12 text-center p-4 text-black-50">
-                        <div class="display-1">
-                            <span class="fa fa-search"></span>
-                        </div>
-                        <div class="display-5 mt-3">
-                            {{ 'No result'|trans }}
-                        </div>
-                    </td>
+                    <th class="col-10">{{ 'Name'|trans }}</th>
+                    <th class="col-2 text-right">{{ 'Actions'|trans }}</th>
                 </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                {% for item in pager %}
+                    {% set edit = path('admin_site_page_edit', {entity: item.id}) %}
+
+                    <tr data-dblclick="{{ edit }}">
+                        <td class="col-5">
+                            <a href="{{ edit }}" class="font-weight-bold text-body d-block">
+                                {{ item.name }}
+                            </a>
+                        </td>
+                        <td class="col-5">
+                            {% for node in item.nodes %}
+                                <a href="{{ path('admin_site_tree_navigation', {
+                                    navigation: node.menu.navigation.id,
+                                    'data-modal': path('admin_site_node_edit', {entity: node.id}),
+                                }) }}" class="btn btn-sm btn-light mr-1">
+                                    {{ node.label }}
+                                </a>
+                            {% endfor %}
+                        </td>
+                        <td class="col-2 text-right">
+                            <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
+                                <span class="fa fa-edit"></span>
+                            </a>
+                            <button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
+                                <span class="fa fa-trash"></span>
+                            </button>
+
+                            <form method="post" action="{{ path('admin_site_page_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
+                                <input type="hidden" name="_method" value="DELETE">
+                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
+                            </form>
+                        </td>
+                    </tr>
+                {% else %}
+                    <tr>
+                        <td class="col-12 text-center p-4 text-black-50">
+                            <div class="display-1">
+                                <span class="fa fa-search"></span>
+                            </div>
+                            <div class="display-5 mt-3">
+                                {{ 'No result'|trans }}
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 {% endblock %}
diff --git a/core/Resources/views/user/user_admin/index.html.twig b/core/Resources/views/user/user_admin/index.html.twig
index 3e02929..e11f87f 100644
--- a/core/Resources/views/user/user_admin/index.html.twig
+++ b/core/Resources/views/user/user_admin/index.html.twig
@@ -22,52 +22,54 @@
         {{ knp_pagination_render(pager) }}
     </div>
 
-    <table class="table" data-table-fixed>
-        <thead class="thead-light">
-            <tr>
-                <th class="col-10">{{ 'Username'|trans }}</th>
-                <th class="col-2 text-right">{{ 'Actions'|trans }}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for item in pager %}
-                {% set edit = path('admin_user_edit', {entity: item.id}) %}
-                {% set show = path('admin_user_show', {entity: item.id}) %}
-
-                <tr data-dblclick="{{ edit }}">
-                    <td class="col-10">
-                        <a href="{{ show }}" class="font-weight-bold text-body d-block">
-                            {{ item.displayName }}
-                        </a>
-
-                        {{ item.email }}
-                    </td>
-                    <td class="col-2 text-right">
-                        <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
-                            <span class="fa fa-edit"></span>
-                        </a>
-                        <button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
-                            <span class="fa fa-trash"></span>
-                        </button>
-
-                        <form method="post" action="{{ path('admin_user_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
-                            <input type="hidden" name="_method" value="DELETE">
-                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
-                        </form>
-                    </td>
-                </tr>
-            {% else %}
+    <div class="table-responsive">
+        <table class="table" data-table-fixed>
+            <thead class="thead-light">
                 <tr>
-                    <td class="col-12 text-center p-4 text-black-50">
-                        <div class="display-1">
-                            <span class="fa fa-search"></span>
-                        </div>
-                        <div class="display-5 mt-3">
-                            {{ 'No result'|trans }}
-                        </div>
-                    </td>
+                    <th class="col-10 miw-200">{{ 'Username'|trans }}</th>
+                    <th class="col-2 miw-100 text-right">{{ 'Actions'|trans }}</th>
                 </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                {% for item in pager %}
+                    {% set edit = path('admin_user_edit', {entity: item.id}) %}
+                    {% set show = path('admin_user_show', {entity: item.id}) %}
+
+                    <tr data-dblclick="{{ edit }}">
+                        <td class="col-10 miw-200">
+                            <a href="{{ show }}" class="font-weight-bold text-body d-block">
+                                {{ item.displayName }}
+                            </a>
+
+                            {{ item.email }}
+                        </td>
+                        <td class="col-2 miw-100 text-right">
+                            <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
+                                <span class="fa fa-edit"></span>
+                            </a>
+                            <button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
+                                <span class="fa fa-trash"></span>
+                            </button>
+
+                            <form method="post" action="{{ path('admin_user_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
+                                <input type="hidden" name="_method" value="DELETE">
+                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
+                            </form>
+                        </td>
+                    </tr>
+                {% else %}
+                    <tr>
+                        <td class="col-12 text-center p-4 text-black-50">
+                            <div class="display-1">
+                                <span class="fa fa-search"></span>
+                            </div>
+                            <div class="display-5 mt-3">
+                                {{ 'No result'|trans }}
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 {% endblock %}