From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Fri, 6 Oct 2023 07:43:05 +0000 (+0200)
Subject: Use stackable display on pagination
X-Git-Tag: 1.0.0rc2~15
X-Git-Url: https://git.agnieray.net/?a=commitdiff_plain;h=5960ef64ed0354dabeab101e72f2ea575eb1f58f;p=galette.git

Use stackable display on pagination

In order to prevent overflows on small screens.
---

diff --git a/galette/templates/default/elements/ajax_members.html.twig b/galette/templates/default/elements/ajax_members.html.twig
index abfdca4cd..8f49e1d45 100644
--- a/galette/templates/default/elements/ajax_members.html.twig
+++ b/galette/templates/default/elements/ajax_members.html.twig
@@ -12,20 +12,6 @@
                     </th>
                 </tr>
             </thead>
-            <tfoot>
-                <tr>
-                    <td colspan="3" class="center">
-                        <div class="ui basic left aligned fitted segment">
-                            <div class="ui inverted pagination menu">
-                                <div class="header item">
-                                    {{ _T('Pages:') }}
-                                </div>
-                                {{ pagination|raw }}
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-            </tfoot>
             <tbody>
 {% for member in members_list %}
     {% if excluded is not defined or excluded != member.id %}
@@ -80,6 +66,23 @@
                 <tr><td colspan="3" class="emptylist">{{ _T("no member") }}</td></tr>
 {% endfor %}
             </tbody>
+{% if is_paginated %}
+            <tfoot>
+            {# keep this one after "tbody" element to prevent display issues #}
+                <tr>
+                    <td colspan="3" class="center">
+                        <div class="ui basic left aligned fitted segment">
+                            <div class="ui inverted pagination stackable menu">
+                                <div class="header item">
+                                    {{ _T('Pages:') }}
+                                </div>
+                                {{ pagination|raw }}
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </tfoot>
+{% endif %}
         </table>
     </div>
 {% if multiple %}
diff --git a/galette/templates/default/elements/list.html.twig b/galette/templates/default/elements/list.html.twig
index 9b853dc1b..9f7efb44b 100644
--- a/galette/templates/default/elements/list.html.twig
+++ b/galette/templates/default/elements/list.html.twig
@@ -98,7 +98,7 @@
 
             {% if is_paginated %}
             <div class="ui basic center aligned fitted segment">
-                <div class="ui inverted pagination menu">
+                <div class="ui inverted pagination stackable menu">
                     <div class="header item">
                         {{ _T('Pages:') }}
                     </div>
diff --git a/galette/templates/default/pages/groups_list.html.twig b/galette/templates/default/pages/groups_list.html.twig
index cf26651c2..7ba049b9c 100644
--- a/galette/templates/default/pages/groups_list.html.twig
+++ b/galette/templates/default/pages/groups_list.html.twig
@@ -205,7 +205,10 @@
                 modal_class: "members-selection fullscreen",
                 modal_content_class: "scrolling",
                 modal_deny_only: true,
-                modal_cancel_text: _T("Close")|e("js")
+                modal_cancel_text: _T("Close")|e("js"),
+                modal_other_options: {
+                    autofocus: false
+                }
             } %}
             _members_ajax_mapper(res, $('#group_id').val(), mode);
 
@@ -318,7 +321,7 @@
                     success: function(res){
                         $('#listing').remove();
                         var _listing = $($.parseHTML(res)).find('#listing');
-                        $('.members-selection .eleven.wide.column').append(_listing);
+                        $('.members-selection .eleven.wide.column').prepend(_listing);
                         _members_ajax_mapper(res, gid, _mode);
                     },
                     error: function() {
diff --git a/ui/semantic/galette/collections/menu.overrides b/ui/semantic/galette/collections/menu.overrides
index c6ddfe307..824638c1d 100644
--- a/ui/semantic/galette/collections/menu.overrides
+++ b/ui/semantic/galette/collections/menu.overrides
@@ -48,3 +48,12 @@
     content: none;
   }
 }
+
+/*------------------
+     Pagination
+-------------------*/
+@media only screen and (max-width: 991px) {
+  .ui.menu.pagination {
+    width: 100%;
+  }
+}