vanta-admin 0.1.7__tar.gz → 0.2.0__tar.gz

{vanta_admin-0.1.7/vanta_admin.egg-info → vanta_admin-0.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.1.7
+Version: 0.2.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
@@ -32,20 +32,26 @@ standard Django admin behavior.
 
 ## What It Adds
 
-- A fixed sidebar with persistent collapsed state and remembered open sections.
-- Light and dark theme support through CSS tokens.
-- A flatter visual pass that removes heavy shadows and blur effects from the
-  admin shell, login screens, cards, filters, and two-factor auth views.
-- A denser dashboard, changelist, filter, message, and form presentation.
-- Auto-dismissing admin messages with success, warning, and error treatment.
-- Custom single-select controls for changelist actions and normal admin form
-  selects, while native multi-selects stay unchanged.
-- Default icons for common admin apps, models, and recent actions, including
-  incident and uptime-monitor style models.
-- A packaged admin favicon loaded through the theme.
-- A responsive mobile sidebar overlay.
-- Optional themed templates for `django-two-factor-auth` login, setup completion,
-  account security, and backup-token flows.
+- A cleaner admin layout with a fixed sidebar that remembers how you left it.
+- Light and dark mode, using the same calm Vanta look across the admin.
+- Less visual noise on the main admin screens, login pages, cards, filters, and
+  two-factor auth pages.
+- Denser dashboards, tables, filters, messages, and forms so admin work feels
+  easier to scan.
+- Admin messages that appear clearly, pause while hovered, and dismiss
+  themselves after a short time.
+- Changelist actions that appear only when rows are selected, stay available
+  while scrolling, and include a clear-selected control.
+- 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.
+- A cleaner account menu with theme controls, project links, password access,
+  logout, and a Vanta support link.
+- A packaged favicon for the admin.
+- A mobile sidebar overlay that makes the admin easier to use on smaller
+  screens.
+- Optional matching templates for `django-two-factor-auth` login, setup
+  completion, account security, and backup-token screens.
 
 Vanta Admin does not replace Django admin, change your permissions, or configure
 two-factor authentication for you. If your project uses `django-two-factor-auth`,

{vanta_admin-0.1.7 → vanta_admin-0.2.0}/README.md

@@ -7,20 +7,26 @@ standard Django admin behavior.
 
 ## What It Adds
 
-- A fixed sidebar with persistent collapsed state and remembered open sections.
-- Light and dark theme support through CSS tokens.
-- A flatter visual pass that removes heavy shadows and blur effects from the
-  admin shell, login screens, cards, filters, and two-factor auth views.
-- A denser dashboard, changelist, filter, message, and form presentation.
-- Auto-dismissing admin messages with success, warning, and error treatment.
-- Custom single-select controls for changelist actions and normal admin form
-  selects, while native multi-selects stay unchanged.
-- Default icons for common admin apps, models, and recent actions, including
-  incident and uptime-monitor style models.
-- A packaged admin favicon loaded through the theme.
-- A responsive mobile sidebar overlay.
-- Optional themed templates for `django-two-factor-auth` login, setup completion,
-  account security, and backup-token flows.
+- A cleaner admin layout with a fixed sidebar that remembers how you left it.
+- Light and dark mode, using the same calm Vanta look across the admin.
+- Less visual noise on the main admin screens, login pages, cards, filters, and
+  two-factor auth pages.
+- Denser dashboards, tables, filters, messages, and forms so admin work feels
+  easier to scan.
+- Admin messages that appear clearly, pause while hovered, and dismiss
+  themselves after a short time.
+- Changelist actions that appear only when rows are selected, stay available
+  while scrolling, and include a clear-selected control.
+- 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.
+- A cleaner account menu with theme controls, project links, password access,
+  logout, and a Vanta support link.
+- A packaged favicon for the admin.
+- A mobile sidebar overlay that makes the admin easier to use on smaller
+  screens.
+- Optional matching templates for `django-two-factor-auth` login, setup
+  completion, account security, and backup-token screens.
 
 Vanta Admin does not replace Django admin, change your permissions, or configure
 two-factor authentication for you. If your project uses `django-two-factor-auth`,

{vanta_admin-0.1.7 → vanta_admin-0.2.0}/pyproject.toml

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

@@ -283,23 +283,15 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   list-style: none;
 }
 
-.admin-sidebar__avatar {
-  display: inline-grid;
-  place-items: center;
-  width: 2.6rem;
-  min-width: 2.6rem;
-  height: 2.6rem;
-  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
-  border-radius: 0.36rem;
-  background: var(--admin-accent-soft);
-  color: var(--admin-accent-strong);
-  font-weight: 900;
-  letter-spacing: 0;
-}
-
-html[data-theme="light"] .admin-sidebar__avatar {
-  background: var(--admin-accent-soft);
-  color: var(--admin-accent);
+.admin-sidebar__account-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+  color: color-mix(in srgb, var(--muted) 82%, var(--accent));
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 32px;
 }
 
 .admin-sidebar__account-copy {
@@ -321,6 +313,13 @@ html[data-theme="light"] .admin-sidebar__avatar {
   color: var(--heading);
   font-size: 0.92rem;
   font-weight: 760;
+  transition: color var(--admin-transition), transform var(--admin-transition);
+}
+
+.admin-sidebar__account-summary:hover .admin-sidebar__username,
+.admin-sidebar__account-summary:focus-visible .admin-sidebar__username {
+  color: var(--accent-strong);
+  transform: translateY(-2px);
 }
 
 .admin-sidebar__group-name {
@@ -416,6 +415,80 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
   color: var(--muted);
 }
 
+.admin-sidebar__account-links .admin-sidebar__donation-link {
+  color: var(--accent-strong);
+}
+
+.admin-sidebar__donation-link .donation-button__label {
+  min-width: 0;
+}
+
+.admin-sidebar__donation-link .donation-button__cup {
+  position: relative;
+  width: 0.92rem;
+  height: 0.72rem;
+  border: 2px solid currentColor;
+  border-radius: 0 0 0.28rem 0.28rem;
+}
+
+.admin-sidebar__donation-link .donation-button__cup::before {
+  content: "";
+  position: absolute;
+  top: 0.1rem;
+  right: -0.38rem;
+  width: 0.3rem;
+  height: 0.3rem;
+  border: 2px solid currentColor;
+  border-left: 0;
+  border-radius: 0 0.35rem 0.35rem 0;
+}
+
+.admin-sidebar__donation-link .donation-button__cup::after {
+  content: "";
+  position: absolute;
+  right: -0.08rem;
+  bottom: -0.25rem;
+  left: -0.08rem;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.75;
+}
+
+.admin-sidebar__donation-link .donation-button__steam,
+.admin-sidebar__donation-link .donation-button__steam::before,
+.admin-sidebar__donation-link .donation-button__steam::after {
+  content: "";
+  position: absolute;
+  bottom: 0.78rem;
+  width: 2px;
+  height: 0.38rem;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.65;
+  animation: donation-steam 1.8s ease-in-out infinite;
+}
+
+.admin-sidebar__donation-link .donation-button__steam {
+  left: 0.4rem;
+}
+
+.admin-sidebar__donation-link .donation-button__steam::before {
+  left: -0.25rem;
+  animation-delay: 0.25s;
+}
+
+.admin-sidebar__donation-link .donation-button__steam::after {
+  left: 0.25rem;
+  animation-delay: 0.5s;
+}
+
+.admin-sidebar__account-links .admin-sidebar__external-icon {
+  width: 0.86rem;
+  height: 0.86rem;
+  margin-left: auto;
+}
+
 .admin-sidebar__account-links a:hover,
 .admin-sidebar__account-links a:focus,
 .admin-sidebar__account-links button:hover,
@@ -439,6 +512,19 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
   background: var(--border);
 }
 
+@keyframes donation-steam {
+  0%,
+  100% {
+    transform: translateY(0) scaleY(0.72);
+    opacity: 0.35;
+  }
+
+  50% {
+    transform: translateY(-0.16rem) scaleY(1);
+    opacity: 0.9;
+  }
+}
+
 body.admin-sidebar-collapsed .main {
   grid-template-columns: var(--admin-sidebar-collapsed-width) minmax(0, 1fr);
 }
@@ -729,6 +815,10 @@ body.change-list #content-main {
   max-width: 100%;
 }
 
+#changelist-form {
+  position: relative;
+}
+
 .admin-changelist-card-header {
   display: flex;
   gap: 0.85rem;
@@ -762,7 +852,7 @@ fieldset.module,
 }
 
 .submit-row {
-  background: var(--admin-surface-raised);
+  background: var(--accent-soft);
 }
 
 #changelist #toolbar,
@@ -778,6 +868,91 @@ fieldset.module,
   box-shadow: none;
 }
 
+#changelist .actions {
+  position: absolute;
+  top: 0.18rem;
+  right: 0.72rem;
+  left: 0.72rem;
+  z-index: 8;
+  max-width: none;
+  padding-left: 0.87rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: #151719;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transform: translateY(-0.18rem);
+  transition:
+    opacity var(--admin-transition),
+    transform var(--admin-transition),
+    visibility var(--admin-transition);
+}
+
+html[data-theme="light"] #changelist .actions {
+  background: #e7f0ff;
+}
+
+#changelist-form.has-selected-actions .actions,
+#changelist-form:has(input.action-select[type="checkbox"]:checked) .actions {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+#changelist-form.has-sticky-actions .actions {
+  position: fixed;
+  top: 0.75rem;
+  right: auto;
+  left: var(--admin-actions-fixed-left, 0.72rem);
+  width: var(--admin-actions-fixed-width, auto);
+  z-index: 30;
+}
+
+#changelist .actions.admin-actions--duplicate {
+  display: none;
+}
+
+#changelist .actions .admin-actions__clear {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--admin-error) 72%, var(--border-strong));
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--admin-error) 76%, var(--surface-muted));
+  color: var(--admin-error-text);
+}
+
+#changelist .actions .admin-actions__clear::before,
+#changelist .actions .admin-actions__clear::after {
+  content: "";
+  position: absolute;
+  width: 0.62rem;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+#changelist .actions .admin-actions__clear::before {
+  transform: rotate(45deg);
+}
+
+#changelist .actions .admin-actions__clear::after {
+  transform: rotate(-45deg);
+}
+
+#changelist .actions .admin-actions__clear:hover,
+#changelist .actions .admin-actions__clear:focus-visible {
+  color: var(--admin-error-text);
+  background: var(--admin-error);
+}
+
 #changelist .admin-changelist-card-header #changelist-search > div {
   display: flex;
   align-items: center;
@@ -1254,6 +1429,7 @@ input[type="checkbox"]:focus-visible {
   gap: 0.2rem;
   height: 1.8rem;
   min-height: 1.8rem;
+  margin-top: 2px;
   padding: 0 0.42rem;
   border: 0;
   border-radius: 0.27rem;
@@ -1270,6 +1446,11 @@ input[type="checkbox"]:focus-visible {
   text-transform: none;
   white-space: nowrap;
   overflow: hidden;
+  transition:
+    background-color var(--admin-transition),
+    border-color var(--admin-transition),
+    color var(--admin-transition),
+    transform var(--admin-transition);
 }
 
 #changelist .object-tools a.addlink::before {
@@ -1296,6 +1477,13 @@ input[type="checkbox"]:focus-visible {
   box-shadow: none;
 }
 
+#changelist .object-tools a:hover,
+#changelist .object-tools a:focus-visible,
+#changelist .object-tools a.addlink:hover,
+#changelist .object-tools a.addlink:focus-visible {
+  transform: translateY(-2px);
+}
+
 #changelist input[type="submit"]:active,
 #changelist button:active,
 .object-tools a:active,
@@ -1319,10 +1507,10 @@ input[type="checkbox"]:focus-visible {
 
 #changelist table thead th {
   border: 0;
-  background: transparent;
+  background: color-mix(in srgb, var(--admin-bg) 72%, var(--admin-surface-muted));
   color: var(--text);
   font-size: 0.74rem;
-  font-weight: 560;
+  font-weight: 760;
   letter-spacing: 0;
   height: auto;
   padding: 0.05rem 0.56rem;
@@ -1331,20 +1519,180 @@ input[type="checkbox"]:focus-visible {
   vertical-align: middle;
 }
 
+#changelist table thead th:first-child {
+  border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
+}
+
+#changelist table thead th:last-child {
+  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
+}
+
 #changelist table thead th.sorted {
-  border: 1px solid var(--admin-accent-border);
-  border-radius: var(--admin-radius-sm);
-  background: var(--admin-nav-item-active-bg);
-  color: var(--admin-accent-strong);
+  direction: rtl;
+  font-size: 0;
   font-weight: 720;
+  text-align: left;
+  white-space: nowrap;
+}
+
+#changelist table thead th .text {
+  display: inline-flex;
+  align-items: center;
 }
 
 #changelist table thead th a {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--admin-radius-sm);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
   color: inherit;
+  padding: 0.16rem 0.42rem;
+  transition:
+    background-color var(--admin-transition),
+    color var(--admin-transition),
+    transform var(--admin-transition);
+}
+
+#changelist table thead th a:hover,
+#changelist table thead th a:focus {
+  background: var(--admin-nav-item-active-bg);
+  box-shadow: none;
+  color: var(--admin-accent-strong);
+  transform: translateY(-2px);
+}
+
+#changelist table thead th a:focus-visible {
+  outline: 2px solid var(--admin-accent);
+  outline-offset: 2px;
+}
+
+#changelist table thead th.sorted .text,
+#changelist table thead th.sorted .sortoptions {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.32rem;
+  direction: ltr;
+  font-size: 0.74rem;
+  margin: 0 !important;
+  background: var(--admin-nav-item-active-bg) !important;
+  color: var(--admin-accent-strong);
+  vertical-align: middle;
+}
+
+#changelist table thead th.sorted .text {
+  float: none !important;
+  padding: 0 !important;
+  border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
+}
+
+#changelist table thead th.sorted .text a {
+  background: transparent !important;
+  min-height: 1.32rem;
+  padding-right: 0.18rem;
+  color: var(--admin-accent-strong);
+}
+
+#changelist table thead th.sorted .text a:hover,
+#changelist table thead th.sorted .text a:focus {
+  background: transparent !important;
+  transform: none;
+}
+
+#changelist table thead th.sorted .sortoptions {
+  float: none !important;
+  gap: 0.03rem;
+  margin-left: 0 !important;
+  padding: 0.16rem 0.28rem 0.16rem 0.16rem;
+  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
+}
+
+#changelist table thead th.sorted .sortoptions a {
+  background: transparent !important;
+}
+
+#changelist table thead th.sorted .sortremove,
+#changelist table thead th.sorted .toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 0.72rem;
+  height: 0.92rem;
+  padding: 0;
+  background: transparent !important;
+  background-image: none !important;
+  color: var(--admin-accent-strong);
+  font-size: 0;
+  line-height: 1;
+  overflow: hidden;
+  text-indent: 0;
+  transform: none;
+  visibility: visible !important;
+}
+
+#changelist table thead th.sorted .toggle {
+  order: 1;
+}
+
+#changelist table thead th.sorted .sortpriority {
+  order: 2;
+}
+
+#changelist table thead th.sorted .sortremove {
+  order: 3;
+}
+
+#changelist table thead th.sorted .sortremove::before,
+#changelist table thead th.sorted .toggle::before {
+  font-size: 0.72rem;
+  font-weight: 860;
+  line-height: 1;
+}
+
+#changelist table thead th.sorted .sortremove::before {
+  content: "X";
+  color: var(--admin-accent-strong);
+  font-size: 0.76rem;
+  font-weight: 920;
+  opacity: 1;
+}
+
+#changelist table thead th.sorted .sortremove::after {
+  content: none !important;
+  display: none !important;
 }
 
-#changelist table thead th.sorted a {
+#changelist table thead th.sorted .toggle.ascending::before {
+  content: "🡱";
+  font-size: 0.76rem;
+}
+
+#changelist table thead th.sorted .toggle.descending::before {
+  content: "🡳";
+  font-size: 0.76rem;
+}
+
+#changelist table thead th.sorted .sortpriority {
+  display: inline-grid;
+  place-items: center;
+  min-width: 0.72rem;
+  height: 0.92rem;
+  margin: 0 !important;
+  padding: 0 0.08rem;
+  background: transparent !important;
+  color: var(--admin-accent-strong);
+  font-size: 0.64rem;
+  font-weight: 860;
+  line-height: 1;
+}
+
+#changelist table thead th.sorted .sortremove:hover,
+#changelist table thead th.sorted .sortremove:focus,
+#changelist table thead th.sorted .toggle:hover,
+#changelist table thead th.sorted .toggle:focus {
+  background: transparent !important;
   color: var(--admin-accent-strong);
+  transform: none;
 }
 
 #changelist table tbody th,

{vanta_admin-0.1.7 → vanta_admin-0.2.0}/vanta_admin/static/admin/css/theme.base.css

@@ -146,7 +146,7 @@ ul.messagelist li {
   line-height: 1.3;
   overflow-wrap: anywhere;
   transition:
-    background-size 5000ms linear,
+    background-size 4000ms linear,
     opacity 160ms ease,
     transform 160ms ease;
 }

{vanta_admin-0.1.7 → vanta_admin-0.2.0}/vanta_admin/static/admin/css/theme.responsive.css

@@ -262,6 +262,12 @@
   .admin-action-link {
     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 {
+    animation: none;
+  }
 }
 
 /* Links are clean by default; only text-content links opt into hover underlines. */

{vanta_admin-0.1.7 → vanta_admin-0.2.0}/vanta_admin/static/admin/js/sidebar.js

@@ -17,6 +17,7 @@
     const navSections = Array.from(document.querySelectorAll('[data-admin-nav-section]'));
     const filterSections = Array.from(document.querySelectorAll('#changelist-filter details'));
     const adminMessages = Array.from(document.querySelectorAll('ul.messagelist li'));
+    const adminMessageDuration = 4000;
     const customSelects = Array.from(document.querySelectorAll('select')).filter((select) => (
         !select.multiple
         && (!select.size || select.size <= 1)
@@ -136,6 +137,8 @@
     }
 
     function dismissAdminMessage(message) {
+        window.clearTimeout(message.adminDismissTimer);
+        message.adminDismissTimer = null;
         message.classList.add('is-removing');
         window.setTimeout(() => {
             const messageList = message.closest('ul.messagelist');
@@ -146,24 +149,139 @@
         }, 180);
     }
 
+    function setAdminMessageTimer(message, duration) {
+        window.clearTimeout(message.adminDismissTimer);
+        message.adminTimerStartedAt = Date.now();
+        message.adminTimerRemaining = duration;
+        message.style.transition = `background-size ${duration}ms linear, opacity 160ms ease, transform 160ms ease`;
+        message.style.backgroundSize = '100% 100%';
+        message.adminDismissTimer = window.setTimeout(() => dismissAdminMessage(message), duration);
+    }
+
+    function pauseAdminMessageTimer(message) {
+        if (!message.adminDismissTimer || message.classList.contains('is-removing')) {
+            return;
+        }
+
+        const elapsed = Date.now() - message.adminTimerStartedAt;
+        message.adminTimerRemaining = Math.max(0, message.adminTimerRemaining - elapsed);
+        window.clearTimeout(message.adminDismissTimer);
+        message.adminDismissTimer = null;
+        message.style.backgroundSize = window.getComputedStyle(message).backgroundSize;
+        message.style.transition = 'opacity 160ms ease, transform 160ms ease';
+    }
+
+    function resumeAdminMessageTimer(message) {
+        if (message.adminDismissTimer || message.classList.contains('is-removing')) {
+            return;
+        }
+
+        if (message.adminTimerRemaining <= 0) {
+            dismissAdminMessage(message);
+            return;
+        }
+
+        window.requestAnimationFrame(() => {
+            setAdminMessageTimer(message, message.adminTimerRemaining);
+        });
+    }
+
     function startAdminMessageTimers() {
         adminMessages.forEach((message) => {
             message.classList.remove('is-counting', 'is-removing');
             message.style.transition = 'none';
             message.style.backgroundSize = '0 100%';
             message.offsetWidth;
+            message.addEventListener('mouseenter', () => pauseAdminMessageTimer(message));
+            message.addEventListener('mouseleave', () => resumeAdminMessageTimer(message));
 
             window.requestAnimationFrame(() => {
-                message.style.transition = '';
-                message.style.backgroundSize = '';
+                message.style.transition = `background-size ${adminMessageDuration}ms linear, opacity 160ms ease, transform 160ms ease`;
                 window.requestAnimationFrame(() => {
                     message.classList.add('is-counting');
+                    setAdminMessageTimer(message, adminMessageDuration);
                 });
             });
-            window.setTimeout(() => dismissAdminMessage(message), 5000);
         });
     }
 
+    function syncChangelistActions() {
+        const form = document.getElementById('changelist-form');
+        const actions = Array.from(document.querySelectorAll('#changelist .actions'));
+
+        if (!form || actions.length === 0) {
+            return;
+        }
+
+        const checkboxes = Array.from(form.querySelectorAll('input.action-select[type="checkbox"]'));
+        const primaryActionBar = actions[0];
+
+        function syncStickyActionBar() {
+            if (!primaryActionBar || !form.classList.contains('has-selected-actions')) {
+                form.classList.remove('has-sticky-actions');
+                return;
+            }
+
+            const formRect = form.getBoundingClientRect();
+            const contentBox = form.closest('.changelist-form-container > div') || form.parentElement || form;
+            const contentRect = contentBox.getBoundingClientRect();
+            const shouldStick = formRect.top < 12 && formRect.bottom > 84;
+            form.classList.toggle('has-sticky-actions', shouldStick);
+
+            if (!shouldStick) {
+                return;
+            }
+
+            const left = Math.max(contentRect.left + 12, 12);
+            const rightEdge = Math.min(contentRect.right - 12, window.innerWidth - 12);
+            const width = Math.max(rightEdge - left, 0);
+            primaryActionBar.style.setProperty('--admin-actions-fixed-left', `${left}px`);
+            primaryActionBar.style.setProperty('--admin-actions-fixed-width', `${width}px`);
+        }
+
+        actions.forEach((actionBar, index) => {
+            actionBar.classList.toggle('admin-actions--duplicate', index > 0);
+
+            if (index === 0 && !actionBar.querySelector('.admin-actions__clear')) {
+                const clearButton = document.createElement('button');
+                clearButton.type = 'button';
+                clearButton.className = 'admin-actions__clear';
+                clearButton.setAttribute('aria-label', 'Clear selected rows');
+                clearButton.addEventListener('click', () => {
+                    checkboxes.forEach((checkbox) => {
+                        checkbox.checked = false;
+                        checkbox.closest('tr')?.classList.remove('selected');
+                        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+                    });
+                    const actionToggle = form.querySelector('#action-toggle');
+                    if (actionToggle) {
+                        actionToggle.checked = false;
+                    }
+                    updateActionsVisibility();
+                });
+                actionBar.prepend(clearButton);
+            }
+        });
+
+        function updateActionsVisibility() {
+            const hasSelectedRows = checkboxes.some((checkbox) => checkbox.checked);
+            form.classList.toggle('has-selected-actions', hasSelectedRows);
+            actions.forEach((actionBar) => {
+                actionBar.setAttribute('aria-hidden', String(!hasSelectedRows));
+            });
+            syncStickyActionBar();
+        }
+
+        form.addEventListener('change', (event) => {
+            if (event.target.matches('input[type="checkbox"]')) {
+                updateActionsVisibility();
+            }
+        });
+        window.addEventListener('scroll', syncStickyActionBar, { passive: true });
+        window.addEventListener('resize', syncStickyActionBar);
+        updateActionsVisibility();
+    }
+
     function applyTheme(theme) {
         if (!validThemeValues.has(theme)) {
             return;
@@ -346,6 +464,7 @@
     setCollapsed(storedCollapsed === 'true', false);
     setMobileOpen(false);
     startAdminMessageTimers();
+    syncChangelistActions();
     applyStoredOpenSections();
 
     const storedTheme = localStorage.getItem('theme');

{vanta_admin-0.1.7 → vanta_admin-0.2.0}/vanta_admin/templates/admin/nav_sidebar.html

@@ -18,6 +18,17 @@
   <symbol id="admin-icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 7v6l4 2" /></symbol>
   <symbol id="admin-icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></symbol>
   <symbol id="admin-icon-moon" viewBox="0 0 24 24"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3 6.7 6.7 0 0 0 21 12.8Z" /></symbol>
+  <symbol id="admin-icon-options" viewBox="0 0 512 512">
+    <line x1="368" y1="128" x2="448" y2="128" />
+    <line x1="64" y1="128" x2="304" y2="128" />
+    <line x1="368" y1="384" x2="448" y2="384" />
+    <line x1="64" y1="384" x2="304" y2="384" />
+    <line x1="208" y1="256" x2="448" y2="256" />
+    <line x1="64" y1="256" x2="144" y2="256" />
+    <circle cx="336" cy="128" r="32" />
+    <circle cx="176" cy="256" r="32" />
+    <circle cx="336" cy="384" r="32" />
+  </symbol>
   <symbol id="admin-icon-external" viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><path d="M15 3h6v6M10 14 21 3" /></symbol>
   <symbol id="admin-icon-lock" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></symbol>
   <symbol id="admin-icon-log-out" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 17l5-5-5-5M21 12H9" /></symbol>
@@ -81,7 +92,7 @@
     {% first_group_name user as group_name %}
     <details class="admin-sidebar__account">
       <summary class="admin-sidebar__account-summary">
-        <span class="admin-sidebar__avatar" aria-hidden="true">{{ user.get_username|first|upper }}</span>
+        <svg class="admin-sidebar__account-icon" aria-hidden="true"><use href="#admin-icon-options"></use></svg>
         <span class="admin-sidebar__account-copy">
           <span class="admin-sidebar__username">{{ user.get_username }}</span>
           {% if group_name %}
@@ -116,6 +127,13 @@
               <span>Change password</span>
             </a>
           {% endif %}
+          <a class="admin-sidebar__donation-link donation-button" href="https://www.vanta-admin.org/en/donate/" target="_blank" rel="noopener noreferrer" aria-label="Buy me a coffee">
+            <span class="donation-button__cup" aria-hidden="true">
+              <span class="donation-button__steam"></span>
+            </span>
+            <span class="donation-button__label">Buy me a coffee</span>
+            <svg class="admin-sidebar__external-icon" aria-hidden="true"><use href="#admin-icon-external"></use></svg>
+          </a>
           <span class="admin-sidebar__account-divider" aria-hidden="true"></span>
           <form method="post" action="{% url 'admin:logout' %}">
             {% csrf_token %}

{vanta_admin-0.1.7 → vanta_admin-0.2.0/vanta_admin.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.1.7
+Version: 0.2.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
@@ -32,20 +32,26 @@ standard Django admin behavior.
 
 ## What It Adds
 
-- A fixed sidebar with persistent collapsed state and remembered open sections.
-- Light and dark theme support through CSS tokens.
-- A flatter visual pass that removes heavy shadows and blur effects from the
-  admin shell, login screens, cards, filters, and two-factor auth views.
-- A denser dashboard, changelist, filter, message, and form presentation.
-- Auto-dismissing admin messages with success, warning, and error treatment.
-- Custom single-select controls for changelist actions and normal admin form
-  selects, while native multi-selects stay unchanged.
-- Default icons for common admin apps, models, and recent actions, including
-  incident and uptime-monitor style models.
-- A packaged admin favicon loaded through the theme.
-- A responsive mobile sidebar overlay.
-- Optional themed templates for `django-two-factor-auth` login, setup completion,
-  account security, and backup-token flows.
+- A cleaner admin layout with a fixed sidebar that remembers how you left it.
+- Light and dark mode, using the same calm Vanta look across the admin.
+- Less visual noise on the main admin screens, login pages, cards, filters, and
+  two-factor auth pages.
+- Denser dashboards, tables, filters, messages, and forms so admin work feels
+  easier to scan.
+- Admin messages that appear clearly, pause while hovered, and dismiss
+  themselves after a short time.
+- Changelist actions that appear only when rows are selected, stay available
+  while scrolling, and include a clear-selected control.
+- 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.
+- A cleaner account menu with theme controls, project links, password access,
+  logout, and a Vanta support link.
+- A packaged favicon for the admin.
+- A mobile sidebar overlay that makes the admin easier to use on smaller
+  screens.
+- Optional matching templates for `django-two-factor-auth` login, setup
+  completion, account security, and backup-token screens.
 
 Vanta Admin does not replace Django admin, change your permissions, or configure
 two-factor authentication for you. If your project uses `django-two-factor-auth`,