admin: fix pagination template, ensure template is placed correctly in footer

passbook/admin/templates/administration/application/list.html

@@ -62,7 +62,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/certificatekeypair/list.html

@@ -64,7 +64,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/flow/list.html

@@ -69,7 +69,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/group/list.html

@@ -61,7 +61,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/outpost/list.html

@@ -83,7 +83,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/policy/list.html

@@ -78,7 +78,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/policy_binding/list.html

@@ -75,7 +75,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/property_mapping/list.html

@@ -72,7 +72,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/provider/list.html

@@ -91,7 +91,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/source/list.html

@@ -85,7 +85,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/stage/list.html

@@ -81,7 +81,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/stage_binding/list.html

@@ -81,7 +81,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/stage_invitation/list.html

@@ -54,7 +54,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/stage_prompt/list.html

@@ -80,7 +80,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/token/list.html

@@ -65,7 +65,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/admin/templates/administration/user/list.html

@@ -61,7 +61,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}

passbook/audit/templates/audit/list.html

@@ -77,7 +77,7 @@
                     {% endfor %}
                 </tbody>
             </table>
-            <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+            <div class="pf-c-pagination pf-m-bottom">
                 {% include 'partials/pagination.html' %}
             </div>
         </div>

passbook/core/templates/partials/pagination.html

@@ -1,43 +1,42 @@
 {% load i18n %}
+{% load passbook_utils %}
 
-<div class="pf-c-toolbar__item pf-m-pagination">
+<div class="pf-c-toolbar__item pf-m-pagination ">
-    <div class="pf-c-pagination">
+    <div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
-        <div class="pf-c-pagination__total-items">
+        <div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
-            <b>{{ page_obj.start_index }} - {{ page_obj.end_index }}</b>of
+            <div class="pf-c-options-menu">
-            <b>{{ page_obj.count }}</b>
+                <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
-        </div>
+                    <span class="pf-c-options-menu__toggle-text">
-        {% with param=get_param|default:'page' %}
+                        {% blocktrans with start_index=page_obj.start_index end_index=page_obj.end_index total_items=paginator.count %}
-        <nav class="pf-c-pagination__nav" aria-label="Pagination">
+                            {{ start_index }} - {{ end_index }} of {{ total_items }}
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to first page" href="?{{ param }}=1">
-                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-            </a>
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to previous page"
-                {% if page_obj.has_previous %}
-                href="?{{ param }}={{ page_obj.previous_page_number }}"
-                {% else %}
-                disabled
-                {% endif %}>
-                <i class="fas fa-angle-left" aria-hidden="true"></i>
-            </a>
-            <div class="pf-c-pagination__nav-page-select">
-                <span>
-                    {% blocktrans with current=page_obj.number total=page_obj.paginator.num_pages %}
-                    {{ current }} of {{ total }}
                         {% endblocktrans %}
                     </span>
                 </div>
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page"
+            </div>
-                {% if page_obj.has_next %}
+            <nav class="pf-c-pagination__nav" aria-label="Pagination">
-                href="?{{ param }}={{ page_obj.next_page_number }}"
+                <div class="pf-c-pagination__nav-control pf-m-prev">
+                    <a class="pf-c-button pf-m-plain"
+                        {% if page_obj.has_previous %}
+                        href="?{% query_transform page=page_obj.previous_page_number %}"
                         {% else %}
                         disabled
-                {% endif %}>
+                        {% endif %}
+                        aria-label="{% trans 'Go to previous page' %}">
+                        <i class="fas fa-angle-left" aria-hidden="true"></i>
+                    </a>
+                </div>
+                <div class="pf-c-pagination__nav-control pf-m-next">
+                    <a class="pf-c-button pf-m-plain"
+                        {% if page_obj.has_next %}
+                        href="?{% query_transform page=page_obj.next_page_number %}"
+                        {% else %}
+                        disabled
+                        {% endif %}
+                        aria-label="{% trans 'Go to next page' %}">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
                     </a>
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page" href="?{{ param }}={{ page_obj.num_pages }}">
+                </div>
-                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-            </a>
             </nav>
-        {% endwith %}
+        </div>
     </div>
 </div>

passbook/lib/templatetags/passbook_utils.py

@@ -4,6 +4,7 @@ from urllib.parse import urlencode
 
 from django import template
 from django.db.models import Model
+from django.http.request import HttpRequest
 from django.template import Context
 from django.utils.html import escape, mark_safe
 from structlog import get_logger
@@ -115,3 +116,15 @@ def debug(obj) -> str:
 def doc(obj) -> str:
     """Return docstring of object"""
     return mark_safe(obj.__doc__.replace("\n", "<br>"))
+
+
+@register.simple_tag(takes_context=True)
+def query_transform(context: Context, **kwargs) -> str:
+    """Append objects to the current querystring"""
+    if "request" not in context:
+        return ""
+    request: HttpRequest = context["request"]
+    updated = request.GET.copy()
+    for key, value in kwargs.items():
+        updated[key] = value
+    return updated.urlencode()