From c91aec06988f9c658971081a4423c782111d7685 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 4 Jan 2024 16:30:45 -0500
Subject: [PATCH] Clean up paginator styling

---
 netbox/templates/htmx/table.html         |   4 +-
 netbox/templates/inc/paginator.html      | 132 ++++++++++++++++-------
 netbox/templates/inc/paginator_htmx.html |  75 -------------
 3 files changed, 98 insertions(+), 113 deletions(-)
 delete mode 100644 netbox/templates/inc/paginator_htmx.html

diff --git a/netbox/templates/htmx/table.html b/netbox/templates/htmx/table.html
index 8d56a4427..1ad1a7bc1 100644
--- a/netbox/templates/htmx/table.html
+++ b/netbox/templates/htmx/table.html
@@ -4,10 +4,10 @@
 
 {% with preferences|get_key:"pagination.placement" as paginator_placement %}
   {% if paginator_placement == 'top' or paginator_placement == 'both' %}
-    {% include 'inc/paginator_htmx.html' with table=table paginator=table.paginator page=table.page %}
+    {% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page %}
   {% endif %}
   {% render_table table 'inc/table_htmx.html' %}
   {% if paginator_placement != 'top' %}
-    {% include 'inc/paginator_htmx.html' with table=table paginator=table.paginator page=table.page %}
+    {% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page %}
   {% endif %}
 {% endwith %}
diff --git a/netbox/templates/inc/paginator.html b/netbox/templates/inc/paginator.html
index b3a9127c2..1d122cf7a 100644
--- a/netbox/templates/inc/paginator.html
+++ b/netbox/templates/inc/paginator.html
@@ -1,55 +1,115 @@
 {% load helpers %}
 {% load i18n %}
 
-<div class="row">
-  <div class="col col-md-6 mb-0">
-    {# Page number carousel #}
-    {% if paginator.num_pages > 1 %}
-      <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages">
+<div class="d-flex justify-content-between align-items-center p-2">
+
+  {# Pages carousel #}
+  {% if paginator.num_pages > 1 %}
+    <nav aria-label="{% trans "Page selection" %}">
+      <ul class="pagination mb-0">
+
+        {# Previous page #}
         {% if page.has_previous %}
-          <a href="{% querystring request page=page.previous_page_number %}" class="btn btn-outline-secondary">
-            <i class="mdi mdi-chevron-double-left"></i>
-          </a>
+          <li class="page-item">
+            {% if htmx %}
+              <a href="#"
+                hx-get="{{ table.htmx_url }}{% querystring request page=page.previous_page_number %}"
+                hx-target="closest .htmx-container"
+                {% if not table.embedded %}hx-push-url="true"{% endif %}
+                class="page-link"
+              >
+                <i class="mdi mdi-chevron-left"></i>
+              </a>
+            {% else %}
+              <a href="{% querystring request page=page.previous_page_number %}" class="page-link">
+                <i class="mdi mdi-chevron-left"></i>
+              </a>
+            {% endif %}
+          </li>
         {% endif %}
+        {# /Previous page #}
+
+        {# Page numbers #}
         {% for p in page.smart_pages %}
-          {% if p %}
-            <a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
-              {{ p }}
-            </a>
-          {% else %}
-            <button type="button" class="btn btn-outline-secondary" disabled>
-              <span>&hellip;</span>
-            </button>
-          {% endif %}
+          <li class="page-item{% if page.number == p %} active" aria-current="page{% endif %}">
+            {% if p and htmx %}
+              <a href="#"
+                hx-get="{{ table.htmx_url }}{% querystring request page=p %}"
+                hx-target="closest .htmx-container"
+                {% if not table.embedded %}hx-push-url="true"{% endif %}
+                class="page-link"
+              >
+                {{ p }}
+              </a>
+            {% elif p %}
+              <a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
+                {{ p }}
+              </a>
+            {% else %}
+              <span class="page-link" disabled>&hellip;</span>
+            {% endif %}
+          </li>
         {% endfor %}
+        {# /Page numbers #}
+
+        {# Next page #}
         {% if page.has_next %}
-          <a href="{% querystring request page=page.next_page_number %}" class="btn btn-outline-secondary">
-            <i class="mdi mdi-chevron-double-right"></i>
-          </a>
+          <li class="page-item">
+            {% if htmx %}
+              <a href="#"
+                hx-get="{{ table.htmx_url }}{% querystring request page=page.next_page_number %}"
+                hx-target="closest .htmx-container"
+                {% if not table.embedded %}hx-push-url="true"{% endif %}
+                class="page-link"
+              >
+                <i class="mdi mdi-chevron-right"></i>
+              </a>
+            {% else %}
+              <a href="{% querystring request page=page.next_page_number %}" class="page-link">
+                <i class="mdi mdi-chevron-right"></i>
+              </a>
+            {% endif %}
+          </li>
         {% endif %}
-      </div>
-    {% endif %}
-  </div>
-  <div class="col col-md-6 mb-0 text-end">
-    {# Per-page count selector #}
+        {# /Next page #}
+
+      </ul>
+    </nav>
+  {% endif %}
+  {# /Pages carousel #}
+
+  {# Showing #}
+  <small class="text-end text-muted">
+    {% blocktrans trimmed with start=page.start_index end=page.end_index total=page.paginator.count %}
+      Showing {{ start }}-{{ end }} of {{ total }}
+    {% endblocktrans %}
+  </small>
+  {# /Showing #}
+
+  {# Pagination options #}
+  <nav class="text-end" aria-label="{% trans "Pagination options" %}">
     {% if page %}
-      <div class="dropdown dropup">
+      <div class="dropdown">
         <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
           {% trans "Per Page" %}
         </button>
-        <ul class="dropdown-menu">
+        <div class="dropdown-menu">
           {% for n in page.paginator.get_page_lengths %}
-            <li>
+            {% if htmx %}
+              <a href="#"
+                hx-get="{{ table.htmx_url }}{% querystring request per_page=n %}"
+                hx-target="closest .htmx-container"
+                {% if not table.embedded %}hx-push-url="true"{% endif %}
+                class="dropdown-item"
+              >{{ n }}</a>
+            {% else %}
               <a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
-            </li>
+            {% endif %}
           {% endfor %}
-        </ul>
+        </div>
       </div>
-      <small class="text-end text-muted">
-        {% blocktrans trimmed with start=page.start_index end=page.end_index total=page.paginator.count %}
-          Showing {{ start }}-{{ end }} of {{ total }}
-        {% endblocktrans %}
-      </small>
     {% endif %}
-  </div>
+  </nav>
+  {# /Pagination options #}
+
 </div>
diff --git a/netbox/templates/inc/paginator_htmx.html b/netbox/templates/inc/paginator_htmx.html
deleted file mode 100644
index 967b9d003..000000000
--- a/netbox/templates/inc/paginator_htmx.html
+++ /dev/null
@@ -1,75 +0,0 @@
-{% load helpers %}
-{% load i18n %}
-
-<div class="row">
-  <div class="col col-md-6 mb-0">
-    {# Page number carousel #}
-    {% if paginator.num_pages > 1 %}
-      <div class="btn-group btn-group-sm" role="group" aria-label="Pages">
-        {% if page.has_previous %}
-          <a href="#"
-             hx-get="{{ table.htmx_url }}{% querystring request page=page.previous_page_number %}"
-             hx-target="closest .htmx-container"
-             {% if not table.embedded %}hx-push-url="true"{% endif %}
-             class="btn btn-outline-secondary"
-          >
-            <i class="mdi mdi-chevron-double-left"></i>
-          </a>
-        {% endif %}
-        {% for p in page.smart_pages %}
-          {% if p %}
-            <a href="#"
-               hx-get="{{ table.htmx_url }}{% querystring request page=p %}"
-               hx-target="closest .htmx-container"
-             {% if not table.embedded %}hx-push-url="true"{% endif %}
-               class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}"
-            >
-              {{ p }}
-            </a>
-          {% else %}
-            <button type="button" class="btn btn-outline-secondary" disabled>
-              <span>&hellip;</span>
-            </button>
-          {% endif %}
-        {% endfor %}
-        {% if page.has_next %}
-          <a href="#"
-             hx-get="{{ table.htmx_url }}{% querystring request page=page.next_page_number %}"
-             hx-target="closest .htmx-container"
-             {% if not table.embedded %}hx-push-url="true"{% endif %}
-             class="btn btn-outline-secondary"
-          >
-            <i class="mdi mdi-chevron-double-right"></i>
-          </a>
-        {% endif %}
-      </div>
-    {% endif %}
-  </div>
-  <div class="col col-md-6 mb-0 text-end">
-    {# Per-page count selector #}
-    {% if page %}
-      <div class="dropdown dropup">
-        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
-          {% trans "Per Page" %}
-        </button>
-        <ul class="dropdown-menu">
-          {% for n in page.paginator.get_page_lengths %}
-            <li>
-              <a href="#"
-                 hx-get="{{ table.htmx_url }}{% querystring request per_page=n %}"
-                 hx-target="closest .htmx-container"
-                 {% if not table.embedded %}hx-push-url="true"{% endif %}
-                 class="dropdown-item"
-              >{{ n }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      </div>
-      <small class="text-end text-muted">
-        {% blocktrans trimmed with start=page.start_index end=page.end_index total=page.paginator.count %}
-          Showing {{ start }}-{{ end }} of {{ total }}
-        {% endblocktrans %}
-      </small>
-    {% endif %}
-  </div>
-</div>