vanta-admin 0.15.2__tar.gz → 0.16.0__tar.gz

{vanta_admin-0.15.2/vanta_admin.egg-info → vanta_admin-0.16.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.15.2
+Version: 0.16.0
 Summary: A sharp, dark, and portable Django admin theme forged for builders who want the admin to feel less default.
 Author: oli-dev0
 License-Expression: MIT
@@ -74,6 +74,8 @@ feels more deliberate in everyday use.
   grouped many-to-many selectors.
 - Styled select controls for common admin dropdowns, plus a clearer enhanced
   horizontal selector for many-to-many fields.
+- Vanta-styled changelist pagination with result summaries, previous and next
+  controls, and a direct page jump.
 - Built-in icons for common admin areas, models, and recent actions.
 - A cleaner account menu with display preferences, project links, password
   access, 2FA settings, logout, and a Vanta support link.

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/README.md

@@ -49,6 +49,8 @@ feels more deliberate in everyday use.
   grouped many-to-many selectors.
 - Styled select controls for common admin dropdowns, plus a clearer enhanced
   horizontal selector for many-to-many fields.
+- Vanta-styled changelist pagination with result summaries, previous and next
+  controls, and a direct page jump.
 - Built-in icons for common admin areas, models, and recent actions.
 - A cleaner account menu with display preferences, project links, password
   access, 2FA settings, logout, and a Vanta support link.

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "vanta-admin"
-version = "0.15.2"
+version = "0.16.0"
 description = "A sharp, dark, and portable Django admin theme forged for builders who want the admin to feel less default."
 readme = "README.md"
 license = "MIT"

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/vanta_admin/static/admin/css/theme.admin.css

@@ -4399,52 +4399,177 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
 }
 
 #changelist .paginator {
-  display: grid;
-  gap: 0.45rem;
-  justify-items: start;
-}
-
-#changelist .admin-pagination-pages {
+  flex: 1 1 auto;
+  min-width: 0;
+  position: relative;
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.22rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
-#changelist .admin-pagination-count {
+#changelist .admin-pagination-summary {
+  flex: 1 1 auto;
+  min-width: 0;
   color: var(--muted);
   line-height: 1.35;
 }
 
-#changelist .admin-pagination-count .showall {
+#changelist .admin-pagination-summary .showall {
+  margin-left: 0.45rem;
   min-height: 0;
   padding: 0;
 }
 
-#changelist .paginator a {
+#changelist .admin-pagination-pages-group,
+#changelist .admin-pagination-pages {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.22rem;
+}
+
+#changelist .paginator a,
+#changelist .paginator .admin-pagination-control {
   display: inline-flex;
   align-items: center;
-  min-height: 1.8rem;
-  padding: 0 0.48rem;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0 0.34rem;
+  border: 0;
   border-radius: 0.27rem;
+  background: var(--surface-muted);
   color: var(--text);
   font-weight: 650;
+  transition: color var(--admin-transition), background-color var(--admin-transition), transform var(--admin-transition), filter var(--admin-transition);
+}
+
+#changelist .paginator .admin-pagination-control--arrow {
+  font-size: 1.55rem;
+  line-height: 1;
 }
 
 #changelist .paginator a:hover,
-#changelist .paginator a:focus {
+#changelist .paginator a:focus-visible {
   color: var(--accent-strong);
-  background: var(--accent-softer);
+  background: var(--surface-hover);
+  transform: translateY(-2px);
+}
+
+#changelist .paginator a:focus-visible {
+  outline: 2px solid var(--admin-focus, var(--accent));
+  outline-offset: 2px;
+}
+
+#changelist .paginator .admin-pagination-pages a[aria-current="page"] {
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-weight: 720;
+}
+
+#changelist .paginator .admin-pagination-pages a[aria-current="page"]:hover,
+#changelist .paginator .admin-pagination-pages a[aria-current="page"]:focus-visible {
+  background: var(--accent-soft);
+}
+
+html[data-theme="light"] #changelist .paginator .admin-pagination-pages a[aria-current="page"] {
+  background: var(--accent);
+  color: #fff;
+}
+
+html[data-theme="light"] #changelist .paginator .admin-pagination-pages a[aria-current="page"]:hover,
+html[data-theme="light"] #changelist .paginator .admin-pagination-pages a[aria-current="page"]:focus-visible {
+  background: var(--accent-2);
+  color: #fff;
+}
+
+#changelist .paginator .admin-pagination-pages a:not([aria-current="page"]) {
+  min-width: 2rem;
+}
+
+#changelist .paginator .admin-pagination-pages a:not([aria-current="page"]),
+#changelist .paginator .admin-pagination-pages a[aria-current="page"] {
+  padding: 0 0.34rem;
+}
+
+#changelist .paginator .admin-pagination-pages {
+  gap: 0.14rem;
+}
+
+#changelist .admin-pagination-pages-group {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  flex-wrap: nowrap;
+  transform: translate(-50%, -50%);
 }
 
-#changelist .paginator .this-page {
+#changelist .admin-pagination-jump {
   display: inline-flex;
+  margin-left: auto;
   align-items: center;
-  min-height: 1.8rem;
-  padding: 0 0.48rem;
+  gap: 0.28rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+#changelist .admin-pagination-jump input {
+  width: 3rem;
+  min-height: 2rem;
+  padding: 0 0.3rem;
+  border: 0;
   border-radius: 0.27rem;
-  background: var(--accent-soft);
+  background: var(--surface-muted);
+  color: var(--text);
+  font: inherit;
+  text-align: center;
+}
+
+#changelist .admin-pagination-jump input::-webkit-inner-spin-button,
+#changelist .admin-pagination-jump input::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+#changelist .admin-pagination-jump input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+#changelist .admin-pagination-jump input:focus-visible {
+  outline: 2px solid var(--admin-focus, var(--accent));
+  outline-offset: 2px;
+}
+
+#changelist .admin-pagination-jump-total {
+  color: var(--subtle);
+}
+
+#changelist .admin-pagination-jump button {
+  min-height: 2rem;
+  padding: 0 0.55rem;
+  border: 0;
+  border-radius: 0.27rem;
+  background: var(--surface-muted);
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  transition: color var(--admin-transition), background-color var(--admin-transition), transform var(--admin-transition);
+}
+
+#changelist .admin-pagination-jump button:hover,
+#changelist .admin-pagination-jump button:focus-visible {
+  background: var(--surface-hover);
   color: var(--accent-strong);
-  font-weight: 720;
+  transform: translateY(-2px);
+}
+
+#changelist .admin-pagination-jump button:focus-visible {
+  outline: 2px solid var(--admin-focus, var(--accent));
+  outline-offset: 2px;
 }
 
 /* Filters */

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/vanta_admin/static/admin/css/theme.responsive.css

@@ -1,10 +1,32 @@
 /* Responsive */
 
-@media (max-width: 1200px) {
+@media (max-width: 1280px) {
   :root {
     --admin-sidebar-width: 260px;
   }
 
+  #changelist .paginator {
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  #changelist .admin-pagination-summary {
+    flex-basis: 100%;
+  }
+
+  #changelist .admin-pagination-pages-group {
+    position: static;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    transform: none;
+  }
+
+  #changelist .admin-pagination-jump {
+    align-self: flex-end;
+    margin-left: auto;
+  }
+
   #content.colMS {
     grid-template-columns: 1fr;
     gap: 1.6rem;
@@ -309,6 +331,21 @@
     flex: 1 1 12rem;
   }
 
+  #changelist .paginator {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  #changelist .admin-pagination-pages-group {
+    width: 100%;
+    justify-content: center;
+  }
+
+  #changelist .admin-pagination-jump {
+    align-self: flex-end;
+  }
+
   .change-form p.datetime {
     align-items: flex-start;
   }

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/vanta_admin/static/admin/js/forms.js

@@ -1,12 +1,6 @@
 'use strict';
 
 {
-    const customSelects = Array.from(document.querySelectorAll('select')).filter((select) => (
-        !select.multiple
-        && (!select.size || select.size <= 1)
-        && select.dataset.vantaEnhanced !== 'true'
-    ));
-
     function enhanceActionSelect(select, index) {
         const label = select.closest('label');
         if (select.dataset.vantaEnhanced === 'true') {
@@ -165,9 +159,28 @@
         return dropdown;
     }
 
-    const customDropdowns = customSelects
-        .map(enhanceActionSelect)
-        .filter(Boolean);
+    const customDropdowns = [];
+    let customSelectIndex = 0;
+
+    function enhanceCustomSelects(root = document) {
+        const selects = Array.from(root.querySelectorAll('select')).filter((select) => (
+            !select.multiple
+            && (!select.size || select.size <= 1)
+            && select.dataset.vantaEnhanced !== 'true'
+        ));
+
+        customDropdowns.push(
+            ...selects.map((select) => enhanceActionSelect(select, customSelectIndex++)).filter(Boolean),
+        );
+    }
+
+    enhanceCustomSelects();
+
+    document.addEventListener('formset:added', (event) => {
+        if (event.target instanceof Element) {
+            enhanceCustomSelects(event.target);
+        }
+    });
 
     function parseStructuredLabel(text) {
         const parts = text.split('|').map((part) => part.trim()).filter(Boolean);

vanta_admin-0.16.0/vanta_admin/static/admin/js/pagination-jump.js

@@ -0,0 +1,34 @@
+'use strict';
+
+{
+    const jump = document.querySelector('[data-admin-pagination-jump]');
+    const input = jump?.querySelector('input[name="p"]');
+    const button = jump?.querySelector('[data-admin-pagination-go]');
+
+    if (jump && input && button) {
+        function goToPage() {
+            const minimum = Number(input.min) || 1;
+            const maximum = Number(input.max) || minimum;
+            const requestedPage = Number.parseInt(input.value, 10);
+
+            if (!Number.isInteger(requestedPage)) {
+                input.focus();
+                return;
+            }
+
+            const page = Math.min(Math.max(requestedPage, minimum), maximum);
+            input.value = page;
+            const url = new URL(window.location.href);
+            url.searchParams.set('p', String(page));
+            window.location.assign(url.toString());
+        }
+
+        button.addEventListener('click', goToPage);
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                goToPage();
+            }
+        });
+    }
+}

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/vanta_admin/templates/admin/change_list.html

@@ -24,6 +24,7 @@
 {{ media.js }}
 <script src="{% static 'admin/js/filters.js' %}" defer></script>
 <script src="{% static 'admin/js/changelist.js' %}" defer></script>
+<script src="{% static 'admin/js/pagination-jump.js' %}" defer></script>
 {% endblock %}
 
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

vanta_admin-0.16.0/vanta_admin/templates/admin/pagination.html

@@ -0,0 +1,37 @@
+{% load i18n admin_list admin_theme %}
+<nav class="paginator" aria-labelledby="pagination">
+  <h2 id="pagination" class="visually-hidden">
+    {% blocktranslate with name=cl.opts.verbose_name_plural %}Pagination {{ name }}{% endblocktranslate %}
+  </h2>
+  <div class="admin-pagination-summary">
+    {% pagination_summary cl %}
+    {% if show_all_url %}
+      <a href="{{ show_all_url }}" class="showall">{% translate "Show all" %}</a>
+    {% endif %}
+  </div>
+  {% if pagination_required %}
+    <div class="admin-pagination-pages-group">
+      {% if cl.page_num > 1 %}
+        <a href="{% pagination_url cl cl.page_num|add:'-1' %}" class="admin-pagination-control admin-pagination-control--arrow" aria-label="{% translate 'Previous page' %}">
+          <span aria-hidden="true">‹</span>
+        </a>
+      {% endif %}
+      <div class="admin-pagination-pages">
+        {% for i in page_range %}
+          {% paginator_number cl i %}
+        {% endfor %}
+      </div>
+      {% if cl.page_num < cl.paginator.num_pages %}
+        <a href="{% pagination_url cl cl.page_num|add:'1' %}" class="admin-pagination-control admin-pagination-control--arrow" aria-label="{% translate 'Next page' %}">
+          <span aria-hidden="true">›</span>
+        </a>
+      {% endif %}
+    </div>
+    <div class="admin-pagination-jump" role="group" aria-label="{% translate 'Go to page' %}" data-admin-pagination-jump>
+      <label for="admin-pagination-page">{% translate "Page" %}</label>
+      <input id="admin-pagination-page" name="p" type="number" min="1" max="{{ cl.paginator.num_pages }}" value="{{ cl.page_num }}" inputmode="numeric">
+      <span class="admin-pagination-jump-total">{% blocktranslate with total=cl.paginator.num_pages %}of {{ total }}{% endblocktranslate %}</span>
+      <button type="button" data-admin-pagination-go>{% translate "Go" %}</button>
+    </div>
+  {% endif %}
+</nav>

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/vanta_admin/templatetags/admin_theme.py

@@ -7,6 +7,7 @@ from urllib.parse import urlencode
 from django import get_version, template
 from django.conf import settings
 from django.contrib.admin.models import ADDITION, CHANGE, DELETION, LogEntry
+from django.contrib.admin.views.main import PAGE_VAR
 from django.db import connection
 from django.urls import NoReverseMatch, reverse
 from django.utils import timezone
@@ -171,6 +172,30 @@ def admin_display_name(user):
     return str(user) if user else _("admin")
 
 
+@register.simple_tag
+def pagination_summary(cl):
+    result_count = cl.result_count
+    if result_count:
+        start = ((cl.page_num - 1) * cl.paginator.per_page) + 1
+        end = start + len(cl.result_list) - 1
+    else:
+        start = end = 0
+
+    label = cl.opts.verbose_name if result_count == 1 else cl.opts.verbose_name_plural
+    return format_html(
+        _("Showing {start} to {end} of {count} {label}"),
+        start=start,
+        end=end,
+        count=result_count,
+        label=label,
+    )
+
+
+@register.simple_tag
+def pagination_url(cl, page_number):
+    return cl.get_query_string({PAGE_VAR: page_number})
+
+
 def _visible_admin_model_keys(app_list):
     visible_keys = set()
 

{vanta_admin-0.15.2 → vanta_admin-0.16.0/vanta_admin.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.15.2
+Version: 0.16.0
 Summary: A sharp, dark, and portable Django admin theme forged for builders who want the admin to feel less default.
 Author: oli-dev0
 License-Expression: MIT
@@ -74,6 +74,8 @@ feels more deliberate in everyday use.
   grouped many-to-many selectors.
 - Styled select controls for common admin dropdowns, plus a clearer enhanced
   horizontal selector for many-to-many fields.
+- Vanta-styled changelist pagination with result summaries, previous and next
+  controls, and a direct page jump.
 - Built-in icons for common admin areas, models, and recent actions.
 - A cleaner account menu with display preferences, project links, password
   access, 2FA settings, logout, and a Vanta support link.

{vanta_admin-0.15.2 → vanta_admin-0.16.0}/vanta_admin.egg-info/SOURCES.txt

@@ -32,6 +32,7 @@ vanta_admin/static/admin/img/icon-yes.svg
 vanta_admin/static/admin/js/changelist.js
 vanta_admin/static/admin/js/forms.js
 vanta_admin/static/admin/js/messages.js
+vanta_admin/static/admin/js/pagination-jump.js
 vanta_admin/static/admin/js/sidebar.js
 vanta_admin/static/admin/js/vanta-theme.js
 vanta_admin/templates/admin/app_index.html

vanta_admin-0.15.2/vanta_admin/templates/admin/pagination.html

@@ -1,19 +0,0 @@
-{% load i18n admin_list %}
-{% if pagination_required %}
-  <div class="admin-pagination-pages">
-    {% for i in page_range %}
-      {% paginator_number cl i %}
-    {% endfor %}
-  </div>
-{% endif %}
-<div class="admin-pagination-count">
-  {{ cl.result_count }}
-  {% if cl.result_count == 1 %}
-    {{ cl.opts.verbose_name }}
-  {% else %}
-    {{ cl.opts.verbose_name_plural }}
-  {% endif %}
-  {% if show_all_url %}
-    <a href="{{ show_all_url }}" class="showall">{% translate "Show all" %}</a>
-  {% endif %}
-</div>