vanta-admin 0.6.0__tar.gz → 0.7.0__tar.gz

{vanta_admin-0.6.0/vanta_admin.egg-info → vanta_admin-0.7.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.6.0
+Version: 0.7.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
@@ -50,6 +50,10 @@ feels more deliberate in everyday use.
   themselves after a short time.
 - Changelist actions that appear only when rows are selected, stay available
   while scrolling, and include a clear-selected control.
+- Changelist filters that open from a compact toolbar button instead of taking a
+  permanent right-side column.
+- Active-filter indicators in the toolbar, including a count when filters are
+  applied.
 - Styled select controls for common admin dropdowns, while Django's native
   multi-select fields stay unchanged.
 - Built-in icons for common admin areas, models, and recent actions.

{vanta_admin-0.6.0 → vanta_admin-0.7.0}/README.md

@@ -25,6 +25,10 @@ feels more deliberate in everyday use.
   themselves after a short time.
 - Changelist actions that appear only when rows are selected, stay available
   while scrolling, and include a clear-selected control.
+- Changelist filters that open from a compact toolbar button instead of taking a
+  permanent right-side column.
+- Active-filter indicators in the toolbar, including a count when filters are
+  applied.
 - Styled select controls for common admin dropdowns, while Django's native
   multi-select fields stay unchanged.
 - Built-in icons for common admin areas, models, and recent actions.

{vanta_admin-0.6.0 → vanta_admin-0.7.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "vanta-admin"
-version = "0.6.0"
+version = "0.7.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.6.0 → vanta_admin-0.7.0}/vanta_admin/static/admin/css/theme.admin.css

@@ -896,6 +896,7 @@ body.change-list #content-main {
 }
 
 #changelist {
+  position: relative;
   margin: 0;
   border: 0;
   box-shadow: none;
@@ -903,14 +904,12 @@ body.change-list #content-main {
 }
 
 #changelist .changelist-form-container {
+  position: relative;
   display: block;
 }
 
 #changelist.filtered .changelist-form-container {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) fit-content(13rem);
-  gap: 0.72rem;
-  align-items: start;
+  display: block;
 }
 
 #changelist .changelist-form-container > div {
@@ -938,7 +937,7 @@ body.change-list #content-main {
 
 .admin-changelist-card-header {
   display: flex;
-  gap: 0.85rem;
+  gap: 0.65rem;
   justify-content: space-between;
   align-items: center;
   padding: 0.72rem;
@@ -1332,6 +1331,79 @@ html[data-theme="light"] #changelist .actions {
   width: auto;
 }
 
+#changelist .admin-filter-panel-toggle {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 2.05rem;
+  height: 1.8rem;
+  min-width: 2.05rem;
+  min-height: 1.8rem;
+  margin-top: 2px;
+  padding: 0;
+  border: 0;
+  border-radius: 0.27rem;
+  background: var(--surface-muted);
+  color: var(--admin-accent);
+}
+
+#changelist .admin-filter-panel-toggle svg {
+  display: block;
+  width: 1.18rem;
+  height: 1.18rem;
+}
+
+#changelist .admin-filter-panel-toggle.has-active-filters,
+#changelist .admin-filter-panel-toggle[aria-expanded="true"] {
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+}
+
+#changelist .admin-filter-panel-toggle.has-active-filters::after {
+  content: "";
+  position: absolute;
+  top: 0.28rem;
+  right: 0.28rem;
+  width: 0.38rem;
+  height: 0.38rem;
+  border-radius: 999px;
+  background: var(--admin-accent);
+  animation: admin-filter-active-pulse 1.8s ease-in-out infinite;
+}
+
+#changelist .admin-filter-panel-toggle__count {
+  position: absolute;
+  right: 0.18rem;
+  bottom: 0.12rem;
+  display: block;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  color: var(--admin-accent-strong);
+  font-size: 0.5rem;
+  font-weight: 860;
+  line-height: 1;
+  pointer-events: none;
+}
+
+#changelist .admin-filter-panel-toggle:focus-visible {
+  outline: 2px solid var(--admin-accent-soft);
+  outline-offset: 2px;
+}
+
+@keyframes admin-filter-active-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--admin-accent) 34%, transparent);
+  }
+
+  50% {
+    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--admin-accent) 0%, transparent);
+  }
+}
+
 #changelist-search label {
   display: inline-flex;
   align-items: center;
@@ -2222,31 +2294,49 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
 /* Filters */
 
 #changelist-filter {
-  position: sticky;
-  top: 1.25rem;
-  grid-column: 2;
-  order: 2;
+  position: absolute;
+  top: 3.35rem;
+  right: 0.72rem;
+  z-index: 20;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: auto;
+  width: fit-content;
+  max-width: min(14.5rem, calc(100% - 1.44rem));
+  max-height: min(42rem, calc(100vh - 6rem));
   min-width: 0;
   margin: 0;
   flex: initial;
-  padding: 0.9rem 0.9rem 0.45rem;
+  padding: 0.82rem 0.62rem 0.45rem;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
-  background: var(--surface-strong);
+  background: color-mix(in srgb, var(--admin-surface-raised) 92%, var(--admin-bg));
   box-shadow: none;
   color: var(--admin-text);
-  text-align: center;
+  opacity: 0;
+  overflow: auto;
+  text-align: left;
+  transform: translateY(-0.28rem);
+  transition:
+    opacity var(--admin-transition),
+    transform var(--admin-transition);
+}
+
+#changelist-filter.is-open {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+html[data-theme="light"] #changelist-filter {
+  background: #eef6ff;
 }
 
 #changelist-filter .admin-filter-header {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 0.42rem;
+  width: 100%;
   margin: 0 0 0.22rem;
 }
 
@@ -2336,13 +2426,15 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
   margin: 0.45rem 0 0.18rem;
   padding: 0;
   font-size: 0.74rem;
+  font-weight: 800;
   line-height: 1.2;
   text-align: left;
+  width: 100%;
 }
 
 #changelist-filter details {
   display: grid;
-  justify-items: center;
+  justify-items: stretch;
   width: 100%;
 }
 
@@ -2375,50 +2467,44 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
   color: var(--admin-link);
 }
 
-.admin-filter-footer {
-  display: flex;
-  justify-content: center;
-  margin-top: auto;
-  padding-top: 0.45rem;
-  padding-bottom: 0;
-}
-
 .vanta-filter-actions {
   display: inline-flex;
-  overflow: hidden;
-  border: 1px solid var(--admin-border);
-  border-radius: var(--admin-radius-md);
-  background: var(--admin-surface-muted);
+  align-items: center;
+  gap: 0.18rem;
+  margin-left: 0.12rem;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   box-shadow: none;
 }
 
 .vanta-filter-action {
-  display: grid;
-  place-items: center;
-  width: 48px;
-  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.32rem;
+  height: 1.32rem;
   border: 0;
-  color: var(--admin-muted);
+  border-radius: var(--admin-radius-sm);
+  color: var(--admin-link);
   background: transparent;
-  font-size: 18px;
-  line-height: 1;
+  font-size: 0.86rem;
+  font-weight: 800;
+  line-height: 1.32rem;
   cursor: pointer;
 }
 
 .vanta-filter-action svg {
   display: block;
-  width: 16px;
-  height: 16px;
-  transform: translateY(2.5px);
-}
-
-.vanta-filter-action + .vanta-filter-action {
-  border-left: 1px solid var(--admin-border);
+  width: 0.96rem;
+  height: 0.96rem;
+  transform: translate(0.06rem, 0.12rem);
 }
 
 .vanta-filter-action:hover,
 .vanta-filter-action:focus-visible {
-  color: var(--admin-link-strong);
+  color: var(--admin-accent-strong);
   background: var(--admin-accent-softer);
 }
 
@@ -2428,12 +2514,12 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
 }
 
 .vanta-filter-actions.has-active-action {
-  border-color: var(--admin-accent-border);
+  color: var(--admin-accent-strong);
 }
 
 .vanta-filter-action.is-active {
-  color: var(--admin-link-strong);
-  background: var(--accent-soft);
+  color: var(--admin-accent-strong);
+  background: transparent;
 }
 
 .vanta-filter-action.is-disabled {
@@ -2442,25 +2528,18 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
   pointer-events: none;
 }
 
-.vanta-filter-action.is-disabled:last-child {
-  padding-top: 1px;
-}
-
-.vanta-filter-action.is-active:last-child {
-  padding-top: 3px;
-}
-
 #changelist-filter details ul {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  gap: 0;
-  width: auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.02rem;
+  justify-self: stretch;
+  width: 100%;
   padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
-  overflow: hidden;
+  overflow: visible;
 }
 
 #changelist-filter details .admin-filter-options--stacked {
@@ -2477,6 +2556,7 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
 
 #changelist-filter details li {
   display: flex;
+  width: 100%;
   min-width: 0;
   margin: 0;
   padding: 0;
@@ -2494,22 +2574,23 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
 
 #changelist-filter details li a,
 #changelist-filter details li.selected a {
-  min-height: 1.45rem;
+  min-height: 1rem;
   position: relative;
   z-index: 0;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  width: fit-content;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--admin-radius-sm);
   background: transparent;
-  border: 1px solid var(--admin-border);
   color: var(--admin-muted);
   margin: 0;
-  padding: 0.12rem 0.42rem;
-  font-size: 0.72rem;
+  padding: 0.01rem 0.24rem;
+  font-size: 0.73rem;
   font-weight: 720;
   letter-spacing: 0.01em;
+  line-height: 1.08;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2522,7 +2603,7 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
 
 #changelist-filter details .admin-filter-options--inline li a,
 #changelist-filter details .admin-filter-options--inline li.selected a {
-  min-width: 2.65rem;
+  min-width: 0;
 }
 
 #changelist-filter .admin-facet-count {
@@ -2530,84 +2611,46 @@ html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
   font-variant-numeric: tabular-nums;
 }
 
-#changelist-filter details li:not(:first-child) a {
-  margin-left: -1px;
-}
-
-#changelist-filter details .admin-filter-options--stacked li:not(:first-child) a {
-  margin-top: -1px;
-  margin-left: 0;
-}
-
-#changelist-filter details li:first-child a,
-#changelist-filter details li.selected:first-child a {
-  border-radius: 0.28rem 0 0 0.28rem;
-}
-
-#changelist-filter details .admin-filter-options--stacked li:first-child a,
-#changelist-filter details .admin-filter-options--stacked li.selected:first-child a {
-  border-radius: 0.28rem 0.28rem 0 0;
-}
-
-#changelist-filter details li:last-child a,
-#changelist-filter details li.selected:last-child a {
-  border-radius: 0 0.28rem 0.28rem 0;
-}
-
-#changelist-filter details .admin-filter-options--stacked li:last-child a,
-#changelist-filter details .admin-filter-options--stacked li.selected:last-child a {
-  border-radius: 0 0 0.28rem 0.28rem;
-}
-
 #changelist-filter details .admin-filter-options--stacked li a,
 #changelist-filter details .admin-filter-options--stacked li.selected a {
-  display: block;
-  min-width: 7.5rem;
-  width: 100%;
-  padding-inline: 0.52rem;
+  display: flex;
+  min-width: 0;
+  width: fit-content;
+  padding-inline: 0.24rem;
   text-align: left;
 }
 
 #changelist-filter details li a:hover {
   z-index: 1;
-  color: var(--admin-text);
-  background: var(--admin-accent-softer);
+  color: var(--admin-accent-strong);
+  transform: translateY(-2px);
 }
 
 #changelist-filter details li a:active {
   z-index: 2;
   outline: none;
-  color: var(--admin-text);
-  background: var(--admin-accent-softer);
+  color: var(--admin-accent-strong);
 }
 
 #changelist-filter details li a:focus-visible {
   z-index: 1;
-  color: var(--admin-text);
-  background: var(--admin-accent-softer);
-  outline: 2px solid var(--admin-accent-soft);
+  color: var(--admin-accent-strong);
+  outline: 2px solid var(--admin-accent);
   outline-offset: 2px;
-  border-color: var(--admin-accent-border);
 }
 
 #changelist-filter details li.selected a {
   z-index: 1;
-  background: var(--admin-nav-item-active-bg);
-  color: var(--admin-link-strong);
-  border-color: var(--admin-accent-border);
+  color: var(--admin-accent-strong);
 }
 
 #changelist-filter details li.selected a:active {
   z-index: 2;
-  color: var(--admin-link-strong);
-  background: var(--admin-nav-item-active-bg);
-  border-color: var(--admin-accent-border);
+  color: var(--admin-accent-strong);
 }
 
 #changelist-filter details li.selected a:focus-visible {
-  color: var(--admin-link-strong);
-  background: var(--admin-nav-item-active-bg);
-  border-color: var(--admin-accent-border);
+  color: var(--admin-accent-strong);
 }
 
 #changelist-filter details summary:focus-visible {

{vanta_admin-0.6.0 → vanta_admin-0.7.0}/vanta_admin/static/admin/css/theme.responsive.css

@@ -194,21 +194,16 @@
     justify-content: flex-start;
   }
 
-  #changelist.filtered .changelist-form-container {
-    grid-template-columns: 1fr;
-  }
-
-  #changelist .changelist-form-container > div,
-  #changelist-filter {
-    grid-column: 1;
-  }
-
   #changelist .changelist-form-container > div {
     min-width: 0;
   }
 
   #changelist-filter {
-    position: static;
+    top: 3.15rem;
+    right: 0.6rem;
+    left: 0.6rem;
+    width: auto;
+    max-height: min(38rem, calc(100vh - 5.25rem));
   }
 }
 
@@ -259,13 +254,16 @@
   .admin-sidebar__model a,
   .admin-sidebar__account-links a,
   .admin-sidebar__account-links button,
-  .admin-action-link {
+  .admin-action-link,
+  .admin-filter-panel-toggle,
+  #changelist-filter {
     transition: none;
   }
 
   .admin-sidebar__donation-link .donation-button__steam,
   .admin-sidebar__donation-link .donation-button__steam::before,
-  .admin-sidebar__donation-link .donation-button__steam::after {
+  .admin-sidebar__donation-link .donation-button__steam::after,
+  #changelist .admin-filter-panel-toggle.has-active-filters::after {
     animation: none;
   }
 }

{vanta_admin-0.6.0 → vanta_admin-0.7.0}/vanta_admin/static/admin/js/changelist.js

@@ -1,8 +1,13 @@
 'use strict';
 
 {
+    const changelist = document.getElementById('changelist');
+    const filterPanel = document.getElementById('changelist-filter');
+    const filterPanelToggle = document.getElementById('admin-filter-panel-toggle');
     const filterSectionsToggle = document.getElementById('admin-filter-sections-toggle');
     const filterSections = Array.from(document.querySelectorAll('#changelist-filter details'));
+    const filterPanelReopenKey = `django.admin.theme.changelistFilter.reopen:${window.location.pathname}`;
+    let filterPanelCloseTimer = null;
 
     function isDetailsOpen(section) {
         return section.open;
@@ -25,6 +30,61 @@
         section.open = isOpen;
     }
 
+    function setFilterPanelOpen(isOpen) {
+        if (!changelist || !filterPanel || !filterPanelToggle) {
+            return;
+        }
+
+        window.clearTimeout(filterPanelCloseTimer);
+        const hasActiveFilters = filterPanelToggle.classList.contains('has-active-filters');
+        const openLabel = hasActiveFilters
+            ? filterPanelToggle.dataset.openActiveLabel || 'Open filters, active filters applied'
+            : filterPanelToggle.dataset.openLabel || 'Open filters';
+        const label = isOpen
+            ? filterPanelToggle.dataset.closeLabel || 'Close filters'
+            : openLabel;
+
+        changelist.classList.toggle('has-open-filters', isOpen);
+        filterPanelToggle.setAttribute('aria-expanded', String(isOpen));
+        filterPanelToggle.setAttribute('aria-label', label);
+        filterPanelToggle.setAttribute('title', label);
+
+        if (isOpen) {
+            filterPanel.hidden = false;
+            window.requestAnimationFrame(() => {
+                filterPanel.classList.add('is-open');
+            });
+            return;
+        }
+
+        filterPanel.classList.remove('is-open');
+        filterPanelCloseTimer = window.setTimeout(() => {
+            if (!filterPanel.classList.contains('is-open')) {
+                filterPanel.hidden = true;
+            }
+        }, 180);
+    }
+
+    function shouldReopenFilterPanel() {
+        try {
+            return window.sessionStorage.getItem(filterPanelReopenKey) === 'true';
+        } catch (error) {
+            return false;
+        }
+    }
+
+    function clearFilterPanelReopen() {
+        try {
+            window.sessionStorage.removeItem(filterPanelReopenKey);
+        } catch (error) {}
+    }
+
+    function rememberFilterPanelReopen() {
+        try {
+            window.sessionStorage.setItem(filterPanelReopenKey, 'true');
+        } catch (error) {}
+    }
+
     function syncChangelistActions() {
         const form = document.getElementById('changelist-form');
         const actions = Array.from(document.querySelectorAll('#changelist .actions'));
@@ -104,6 +164,53 @@
 
     syncChangelistActions();
 
+    if (filterPanelToggle && filterPanel) {
+        setFilterPanelOpen(shouldReopenFilterPanel());
+        clearFilterPanelReopen();
+
+        filterPanelToggle.addEventListener('click', () => {
+            setFilterPanelOpen(filterPanelToggle.getAttribute('aria-expanded') !== 'true');
+        });
+
+        document.addEventListener('click', (event) => {
+            if (
+                filterPanelToggle.getAttribute('aria-expanded') !== 'true'
+                || filterPanel.contains(event.target)
+                || filterPanelToggle.contains(event.target)
+            ) {
+                return;
+            }
+
+            setFilterPanelOpen(false);
+        });
+
+        filterPanel.addEventListener('click', (event) => {
+            const link = event.target.closest('a[href]');
+            if (!link) {
+                return;
+            }
+
+            const url = new URL(link.href, window.location.href);
+            if (url.pathname === window.location.pathname) {
+                rememberFilterPanelReopen();
+            }
+        });
+
+        document.addEventListener('keydown', (event) => {
+            if (
+                event.key === 'Escape'
+                && filterPanelToggle.getAttribute('aria-expanded') === 'true'
+                && (
+                    filterPanel.contains(document.activeElement)
+                    || filterPanelToggle === document.activeElement
+                )
+            ) {
+                setFilterPanelOpen(false);
+                filterPanelToggle.focus();
+            }
+        });
+    }
+
     if (filterSectionsToggle) {
         filterSectionsToggle.addEventListener('click', () => {
             const allOpen = filterSections.length > 0 && filterSections.every(isDetailsOpen);

{vanta_admin-0.6.0 → vanta_admin-0.7.0}/vanta_admin/templates/admin/change_list.html

@@ -1,5 +1,5 @@
 {% extends "admin/base_site.html" %}
-{% load i18n admin_urls static admin_list %}
+{% load i18n admin_urls static admin_list admin_theme %}
 
 {% block title %}{% if cl.formset and cl.formset.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}
 {% block extrastyle %}
@@ -48,7 +48,7 @@
       <div class="changelist-form-container">
         {% block filters %}
           {% if cl.has_filters %}
-          <search id="changelist-filter" aria-labelledby="changelist-filter-header">
+          <search id="changelist-filter" aria-labelledby="changelist-filter-header" hidden>
             <div class="admin-filter-header">
               <button class="admin-filter-sections-toggle" id="admin-filter-sections-toggle" type="button" aria-label="{% translate 'Collapse all filter sections' %}" title="{% translate 'Collapse all filter sections' %}">
                 <svg aria-hidden="true" viewBox="0 0 24 24">
@@ -58,31 +58,28 @@
               <h2 id="changelist-filter-header">
                 <span>{% translate 'Filter' %}</span>
               </h2>
-            </div>
-            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
-            <div class="admin-filter-footer">
               <div class="vanta-filter-actions{% if cl.add_facets or cl.has_active_filters %} has-active-action{% endif %}">
                 {% if cl.is_facets_optional %}
                   {% if cl.add_facets %}
                     <a class="vanta-filter-action is-active" href="{{ cl.remove_facet_link }}" aria-label="{% translate 'Hide counts' %}" title="{% translate 'Hide counts' %}">
                       <svg aria-hidden="true" viewBox="0 0 24 24">
-                        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
-                        <circle cx="12" cy="12" r="2.8" fill="none" stroke="currentColor" stroke-width="1.8"></circle>
+                        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <circle cx="12" cy="12" r="2.8" fill="none" stroke="currentColor" stroke-width="2.2"></circle>
                       </svg>
                     </a>
                   {% else %}
                     <a class="vanta-filter-action" href="{{ cl.add_facet_link }}" aria-label="{% translate 'Show counts' %}" title="{% translate 'Show counts' %}">
                       <svg aria-hidden="true" viewBox="0 0 24 24">
-                        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
-                        <path d="M4 4l16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
+                        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <path d="M4 4l16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"></path>
                       </svg>
                     </a>
                   {% endif %}
                 {% else %}
                   <span class="vanta-filter-action is-disabled" aria-hidden="true">
                     <svg aria-hidden="true" viewBox="0 0 24 24">
-                      <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
-                      <path d="M4 4l16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
+                      <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      <path d="M4 4l16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"></path>
                     </svg>
                   </span>
                 {% endif %}
@@ -93,11 +90,12 @@
                 {% endif %}
               </div>
             </div>
+            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
           </search>
           {% endif %}
         {% endblock %}
         <div>
-          {% if cl.search_fields or has_add_permission %}
+          {% if cl.search_fields or has_add_permission or cl.has_filters %}
             <div id="toolbar" class="admin-changelist-card-header">
               {% block search %}
                 {% if cl.search_fields %}
@@ -130,6 +128,31 @@
                   {% endblock %}
                 </ul>
               {% endblock %}
+              {% if cl.has_filters %}
+                {% active_admin_filter_count cl as active_filter_count %}
+                <button
+                  class="admin-filter-panel-toggle{% if cl.has_active_filters %} has-active-filters{% endif %}"
+                  id="admin-filter-panel-toggle"
+                  type="button"
+                  aria-controls="changelist-filter"
+                  aria-expanded="false"
+                  aria-label="{% if cl.has_active_filters %}{% translate 'Open filters, active filters applied' %}{% else %}{% translate 'Open filters' %}{% endif %}"
+                  title="{% if cl.has_active_filters %}{% translate 'Open filters, active filters applied' %}{% else %}{% translate 'Open filters' %}{% endif %}"
+                  data-open-label="{% translate 'Open filters' %}"
+                  data-open-active-label="{% translate 'Open filters, active filters applied' %}"
+                  data-close-label="{% translate 'Close filters' %}"
+                >
+                  <svg aria-hidden="true" viewBox="0 0 24 24">
+                    <path d="M3 5h18l-7 8v5l-4 2v-7Z" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  {% if active_filter_count %}
+                    <span class="admin-filter-panel-toggle__count" aria-hidden="true">{{ active_filter_count }}</span>
+                  {% endif %}
+                  {% if cl.has_active_filters %}
+                    <span class="visually-hidden">{% translate 'Active filters applied' %}</span>
+                  {% endif %}
+                </button>
+              {% endif %}
             </div>
           {% endif %}
           {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}

{vanta_admin-0.6.0 → vanta_admin-0.7.0}/vanta_admin/templatetags/admin_theme.py

@@ -11,6 +11,16 @@ FACET_COUNT_PATTERN = re.compile(r"^(?P<label>.*) \((?P<count>\d+)\)$")
 COMPACT_SUFFIXES = ("", "k", "m", "b", "t")
 MAX_INLINE_FILTER_LABEL_LENGTH = 3
 DEFAULT_ADMIN_ICON = "admin-icon-file"
+NON_FILTER_CHANGE_LIST_PARAMS = {
+    "all",
+    "e",
+    "o",
+    "p",
+    "q",
+    "_facets",
+    "_popup",
+    "is_facets",
+}
 
 APP_ICON_MAP = {
     "auth": "admin-icon-shield",
@@ -221,6 +231,16 @@ def _facet_label_text(value):
     return match.group("label") if match else text
 
 
+@register.simple_tag
+def active_admin_filter_count(cl):
+    params = getattr(cl, "params", {}) or {}
+    return sum(
+        1
+        for key, value in params.items()
+        if key not in NON_FILTER_CHANGE_LIST_PARAMS and value not in (None, "")
+    )
+
+
 
 
 def _clone_admin_item(item):
@@ -304,7 +324,7 @@ def format_admin_facet_label(value, autoescape=True):
     label = escaper(match.group("label"))
     compact_count = _format_compact_count(match.group("count"))
     return format_html(
-        '{}&nbsp;<span class="admin-facet-count">{}</span>',
+        '{}&nbsp;-&nbsp;<span class="admin-facet-count">{}</span>',
         label,
         compact_count,
     )

{vanta_admin-0.6.0 → vanta_admin-0.7.0/vanta_admin.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.6.0
+Version: 0.7.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
@@ -50,6 +50,10 @@ feels more deliberate in everyday use.
   themselves after a short time.
 - Changelist actions that appear only when rows are selected, stay available
   while scrolling, and include a clear-selected control.
+- Changelist filters that open from a compact toolbar button instead of taking a
+  permanent right-side column.
+- Active-filter indicators in the toolbar, including a count when filters are
+  applied.
 - Styled select controls for common admin dropdowns, while Django's native
   multi-select fields stay unchanged.
 - Built-in icons for common admin areas, models, and recent actions.