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 abfdca4cd6d0376c2996fc88504f87094f19f97e..8f49e1d45dc025c1ab79e4a067da83c27e551158 100644 (file)
--- 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 9b853dc1b29e72036ceb27de8fdfc420cbbe7e25..9f7efb44becd2cf0be2c9d5799bc2dc5691951c6 100644 (file)
--- 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 cf26651c257f306791a42dbf441d1da10c19cce8..7ba049b9cffe58f31e791700581e1c46f230b07a 100644 (file)
--- 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 c6ddfe3077ad1a0328da31d964589de8c59e62c6..824638c1df9932f760428a398b64903ab0e2b4ee 100644 (file)
--- 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%;
+  }
+}