vanta-admin 0.3.0__tar.gz → 0.4.0__tar.gz

{vanta_admin-0.3.0/vanta_admin.egg-info → vanta_admin-0.4.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.3.0
+Version: 0.4.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
@@ -47,8 +47,12 @@ feels more deliberate in everyday use.
 - 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 cleaner account menu with display preferences, project links, password
+  access, logout, and a Vanta support link.
+- A 12-hour and 24-hour time-format preference for changelist date/time values,
+  stored in the browser for each admin user.
+- Shorter changelist date formatting that makes date-heavy tables easier to
+  scan.
 - A packaged favicon for the admin.
 - A mobile sidebar overlay that makes the admin easier to use on smaller
   screens.

{vanta_admin-0.3.0 → vanta_admin-0.4.0}/README.md

@@ -22,8 +22,12 @@ feels more deliberate in everyday use.
 - 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 cleaner account menu with display preferences, project links, password
+  access, logout, and a Vanta support link.
+- A 12-hour and 24-hour time-format preference for changelist date/time values,
+  stored in the browser for each admin user.
+- Shorter changelist date formatting that makes date-heavy tables easier to
+  scan.
 - A packaged favicon for the admin.
 - A mobile sidebar overlay that makes the admin easier to use on smaller
   screens.

{vanta_admin-0.3.0 → vanta_admin-0.4.0}/pyproject.toml

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

@@ -332,8 +332,8 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   position: absolute;
   bottom: -0.2rem;
   left: 10.45rem;
-  width: 12.7rem;
-  padding: 0.72rem;
+  width: 16.6rem;
+  padding: 0.42rem 0.72rem;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
   background: var(--surface-strong);
@@ -341,17 +341,65 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   color: var(--text);
 }
 
-.admin-sidebar__theme-controls {
+.admin-sidebar__account-section {
+  padding: 0.64rem 0;
+}
+
+.admin-sidebar__account-section + .admin-sidebar__account-section {
+  border-top: 1px solid var(--border);
+}
+
+.admin-sidebar__section-title {
+  margin: 0 0 0.48rem;
+  color: var(--subtle);
+  font-size: 0.72rem;
+  font-weight: 760;
+}
+
+.admin-sidebar__display-section {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.admin-sidebar__display-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.28rem;
+  min-height: 2.15rem;
+}
+
+.admin-sidebar__display-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.18rem;
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 680;
+}
+
+.admin-sidebar__display-label svg {
+  width: 0.95rem;
+  height: 0.95rem;
+  flex: 0 0 auto;
+  color: var(--muted);
+  transform: translateX(-0.08rem);
+}
+
+.admin-sidebar__theme-controls,
+.admin-sidebar__time-controls {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.32rem;
   padding: 0.25rem;
-  margin-bottom: 0.64rem;
+  width: 5.4rem;
   border-radius: 0.34rem;
   background: var(--surface-muted);
 }
 
-.admin-sidebar__theme-button {
+.admin-sidebar__theme-button,
+.admin-sidebar__time-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -365,15 +413,21 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   cursor: pointer;
   font-size: 0.82rem;
   font-weight: 720;
+  white-space: nowrap;
+}
+
+.admin-sidebar__time-button {
+  letter-spacing: 0;
 }
 
 .admin-sidebar__theme-button svg {
-  width: 0.95rem;
-  height: 0.95rem;
+  width: 0.92rem;
+  height: 0.92rem;
 }
 
 html[data-theme="dark"] .admin-sidebar__theme-button--dark,
-html[data-theme="light"] .admin-sidebar__theme-button--light {
+html[data-theme="light"] .admin-sidebar__theme-button--light,
+.admin-sidebar__time-button[aria-pressed="true"] {
   color: var(--accent-strong);
   background: var(--accent-soft);
 }
@@ -382,13 +436,18 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
   background: var(--accent-softer);
 }
 
+html[data-theme="light"] .admin-sidebar__time-button[aria-pressed="true"] {
+  background: var(--accent-softer);
+}
+
 .admin-sidebar__account-links {
   display: grid;
   gap: 0.1rem;
 }
 
 .admin-sidebar__account-links a,
-.admin-sidebar__account-links button {
+.admin-sidebar__account-links button,
+.admin-sidebar__logout-section button {
   display: flex;
   align-items: center;
   gap: 0.68rem;
@@ -409,7 +468,8 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
     transform 130ms var(--ease);
 }
 
-.admin-sidebar__account-links svg {
+.admin-sidebar__account-links svg,
+.admin-sidebar__logout-section svg {
   width: 1rem;
   height: 1rem;
   color: var(--muted);
@@ -486,13 +546,15 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
 .admin-sidebar__account-links .admin-sidebar__external-icon {
   width: 0.86rem;
   height: 0.86rem;
-  margin-left: auto;
+  margin-left: 0.58rem;
 }
 
 .admin-sidebar__account-links a:hover,
 .admin-sidebar__account-links a:focus,
 .admin-sidebar__account-links button:hover,
-.admin-sidebar__account-links button:focus {
+.admin-sidebar__account-links button:focus,
+.admin-sidebar__logout-section button:hover,
+.admin-sidebar__logout-section button:focus {
   color: var(--accent-strong);
   background: var(--accent-softer);
   transform: translateX(1px);
@@ -501,17 +563,12 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
 .admin-sidebar__account-links a:hover svg,
 .admin-sidebar__account-links a:focus svg,
 .admin-sidebar__account-links button:hover svg,
-.admin-sidebar__account-links button:focus svg {
+.admin-sidebar__account-links button:focus svg,
+.admin-sidebar__logout-section button:hover svg,
+.admin-sidebar__logout-section button:focus svg {
   color: var(--accent);
 }
 
-.admin-sidebar__account-divider {
-  display: block;
-  height: 1px;
-  margin: 0.42rem 0.24rem;
-  background: var(--border);
-}
-
 @keyframes donation-steam {
   0%,
   100% {

{vanta_admin-0.3.0 → vanta_admin-0.4.0}/vanta_admin/static/admin/css/theme.responsive.css

@@ -182,7 +182,7 @@
     right: 0;
     left: auto;
     bottom: calc(100% + 0.55rem);
-    width: min(12.7rem, calc(100vw - 2.4rem));
+    width: min(16.6rem, calc(100vw - 2.4rem));
   }
 
   .admin-model-row {

vanta_admin-0.4.0/vanta_admin/static/admin/js/vanta-theme.js

@@ -0,0 +1,128 @@
+'use strict';
+
+{
+    const validThemeValues = new Set(['light', 'dark']);
+    const validTimeFormatValues = new Set(['12', '24']);
+    const timeFormatStorageKey = 'django.admin.theme.timeFormat';
+    const root = document.documentElement;
+    const themeButtons = document.querySelectorAll('[data-admin-theme-value]');
+    const timeFormatButtons = document.querySelectorAll('[data-admin-time-format-value]');
+
+    function updateThemeButtons(theme) {
+        themeButtons.forEach((button) => {
+            button.setAttribute('aria-pressed', String(button.dataset.adminThemeValue === theme));
+        });
+    }
+
+    function applyTheme(theme) {
+        if (!validThemeValues.has(theme)) {
+            return;
+        }
+
+        root.dataset.theme = theme;
+        localStorage.setItem('theme', theme);
+        updateThemeButtons(theme);
+    }
+
+    function updateTimeFormatButtons(timeFormat) {
+        timeFormatButtons.forEach((button) => {
+            button.setAttribute('aria-pressed', String(button.dataset.adminTimeFormatValue === timeFormat));
+        });
+    }
+
+    function formatHour(hour, meridiem) {
+        let formattedHour = Number(hour);
+
+        if (meridiem === 'p.m.' && formattedHour !== 12) {
+            formattedHour += 12;
+        } else if (meridiem === 'a.m.' && formattedHour === 12) {
+            formattedHour = 0;
+        }
+
+        return String(formattedHour).padStart(2, '0');
+    }
+
+    function abbreviateMonth(text) {
+        return text.replace(
+            /\b(January|February|March|April|May|June|July|August|September|October|November|December)\b/g,
+            (month) => month.slice(0, 3),
+        );
+    }
+
+    function formatDateOrder(text) {
+        return text.replace(
+            /\b(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) (\d{1,2}), (\d{4}), ([^,]+)/g,
+            (match, month, day, year, time) => `${day} ${month} ${year} ${time}`,
+        );
+    }
+
+    function formatTableDateText(text) {
+        return formatDateOrder(abbreviateMonth(text));
+    }
+
+    function formatTableTimeText(text) {
+        const formattedMinuteTime = text.replace(
+            /(\b[A-Z][a-z]+ \d{1,2}, \d{4}, )(\d{1,2}):(\d{2}) (a\.m\.|p\.m\.)(?=$|[^\w])/g,
+            (match, datePrefix, hour, minute, meridiem) => `${datePrefix}${formatHour(hour, meridiem)}:${minute}`,
+        );
+
+        const formattedTime = formattedMinuteTime.replace(
+            /(\b[A-Z][a-z]+ \d{1,2}, \d{4}, )(\d{1,2}) (a\.m\.|p\.m\.)(?=$|[^\w])/g,
+            (match, datePrefix, hour, meridiem) => `${datePrefix}${Number(formatHour(hour, meridiem))}h`,
+        );
+
+        return formatTableDateText(formattedTime);
+    }
+
+    function updateTableTimeFormat(timeFormat) {
+        document.querySelectorAll('#changelist table tbody th, #changelist table tbody td').forEach((cell) => {
+            if (cell.childElementCount !== 0) {
+                return;
+            }
+
+            if (!cell.dataset.adminOriginalTimeText) {
+                cell.dataset.adminOriginalTimeText = cell.textContent;
+            }
+
+            const originalText = cell.dataset.adminOriginalTimeText;
+            const formattedText = timeFormat === '24' ? formatTableTimeText(originalText) : formatTableDateText(originalText);
+
+            cell.textContent = formattedText;
+        });
+    }
+
+    function applyTimeFormat(timeFormat) {
+        if (!validTimeFormatValues.has(timeFormat)) {
+            return;
+        }
+
+        localStorage.setItem(timeFormatStorageKey, timeFormat);
+        updateTimeFormatButtons(timeFormat);
+        updateTableTimeFormat(timeFormat);
+    }
+
+    const storedTheme = localStorage.getItem('theme');
+    if (validThemeValues.has(storedTheme)) {
+        root.dataset.theme = storedTheme;
+        updateThemeButtons(storedTheme);
+    } else {
+        updateThemeButtons(root.dataset.theme);
+    }
+
+    themeButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+            applyTheme(button.dataset.adminThemeValue);
+        });
+    });
+
+    const storedTimeFormat = localStorage.getItem(timeFormatStorageKey);
+    const initialTimeFormat = validTimeFormatValues.has(storedTimeFormat) ? storedTimeFormat : '12';
+    updateTimeFormatButtons(initialTimeFormat);
+    updateTableTimeFormat(initialTimeFormat);
+
+    timeFormatButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+            applyTimeFormat(button.dataset.adminTimeFormatValue);
+        });
+    });
+}

{vanta_admin-0.3.0 → vanta_admin-0.4.0}/vanta_admin/templates/admin/base_site.html

@@ -25,7 +25,7 @@ Thin local override entrypoint for admin branding and theme CSS.
         }
       } catch (error) {}
     </script>
-    <script src="{% static 'admin/js/theme.js' %}" defer></script>
+    <script src="{% static 'admin/js/vanta-theme.js' %}" defer></script>
     <script src="{% static 'admin/js/sidebar.js' %}" defer></script>
     <script src="{% static 'admin/js/messages.js' %}" defer></script>
     <script src="{% static 'admin/js/forms.js' %}" defer></script>

{vanta_admin-0.3.0 → vanta_admin-0.4.0}/vanta_admin/templates/admin/nav_sidebar.html

@@ -103,18 +103,41 @@
       </summary>
 
       <div class="admin-sidebar__account-menu">
-        <div class="admin-sidebar__theme-controls" aria-label="Theme controls">
-          <button class="admin-sidebar__theme-button admin-sidebar__theme-button--light" type="button" data-admin-theme-value="light">
-            <svg aria-hidden="true"><use href="#admin-icon-sun"></use></svg>
-            <span>Light</span>
-          </button>
-          <button class="admin-sidebar__theme-button admin-sidebar__theme-button--dark" type="button" data-admin-theme-value="dark">
-            <svg aria-hidden="true"><use href="#admin-icon-moon"></use></svg>
-            <span>Dark</span>
-          </button>
+        <div class="admin-sidebar__account-section admin-sidebar__display-section">
+          <div class="admin-sidebar__section-title">Display</div>
+          <div class="admin-sidebar__display-row">
+            <span class="admin-sidebar__display-label">
+              <svg aria-hidden="true"><use href="#admin-icon-sun"></use></svg>
+              <span>Theme</span>
+            </span>
+            <span class="admin-sidebar__theme-controls" aria-label="Theme controls">
+              <button class="admin-sidebar__theme-button admin-sidebar__theme-button--light" type="button" data-admin-theme-value="light">
+                <svg aria-hidden="true"><use href="#admin-icon-sun"></use></svg>
+                <span class="visually-hidden">Light</span>
+              </button>
+              <button class="admin-sidebar__theme-button admin-sidebar__theme-button--dark" type="button" data-admin-theme-value="dark">
+                <svg aria-hidden="true"><use href="#admin-icon-moon"></use></svg>
+                <span class="visually-hidden">Dark</span>
+              </button>
+            </span>
+          </div>
+          <div class="admin-sidebar__display-row">
+            <span class="admin-sidebar__display-label">
+              <svg aria-hidden="true"><use href="#admin-icon-clock"></use></svg>
+              <span>Time format</span>
+            </span>
+            <span class="admin-sidebar__time-controls" aria-label="Time format controls">
+              <button class="admin-sidebar__time-button admin-sidebar__time-button--12" type="button" data-admin-time-format-value="12">
+                <span>12h</span>
+              </button>
+              <button class="admin-sidebar__time-button admin-sidebar__time-button--24" type="button" data-admin-time-format-value="24">
+                <span>24h</span>
+              </button>
+            </span>
+          </div>
         </div>
 
-        <div class="admin-sidebar__account-links">
+        <div class="admin-sidebar__account-section admin-sidebar__account-links">
           {% if site_url %}
             <a href="{{ site_url }}">
               <svg aria-hidden="true"><use href="#admin-icon-external"></use></svg>
@@ -134,7 +157,9 @@
             <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>
+        </div>
+
+        <div class="admin-sidebar__account-section admin-sidebar__logout-section">
           <form method="post" action="{% url 'admin:logout' %}">
             {% csrf_token %}
             <button type="submit">

{vanta_admin-0.3.0 → vanta_admin-0.4.0/vanta_admin.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.3.0
+Version: 0.4.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
@@ -47,8 +47,12 @@ feels more deliberate in everyday use.
 - 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 cleaner account menu with display preferences, project links, password
+  access, logout, and a Vanta support link.
+- A 12-hour and 24-hour time-format preference for changelist date/time values,
+  stored in the browser for each admin user.
+- Shorter changelist date formatting that makes date-heavy tables easier to
+  scan.
 - A packaged favicon for the admin.
 - A mobile sidebar overlay that makes the admin easier to use on smaller
   screens.

{vanta_admin-0.3.0 → vanta_admin-0.4.0}/vanta_admin.egg-info/SOURCES.txt

@@ -21,7 +21,7 @@ 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/sidebar.js
-vanta_admin/static/admin/js/theme.js
+vanta_admin/static/admin/js/vanta-theme.js
 vanta_admin/templates/admin/app_index.html
 vanta_admin/templates/admin/base.html
 vanta_admin/templates/admin/base_site.html

vanta_admin-0.3.0/vanta_admin/static/admin/js/theme.js

@@ -1,37 +0,0 @@
-'use strict';
-
-{
-    const validThemeValues = new Set(['light', 'dark']);
-    const root = document.documentElement;
-    const themeButtons = document.querySelectorAll('[data-admin-theme-value]');
-
-    function updateThemeButtons(theme) {
-        themeButtons.forEach((button) => {
-            button.setAttribute('aria-pressed', String(button.dataset.adminThemeValue === theme));
-        });
-    }
-
-    function applyTheme(theme) {
-        if (!validThemeValues.has(theme)) {
-            return;
-        }
-
-        root.dataset.theme = theme;
-        localStorage.setItem('theme', theme);
-        updateThemeButtons(theme);
-    }
-
-    const storedTheme = localStorage.getItem('theme');
-    if (validThemeValues.has(storedTheme)) {
-        root.dataset.theme = storedTheme;
-        updateThemeButtons(storedTheme);
-    } else {
-        updateThemeButtons(root.dataset.theme);
-    }
-
-    themeButtons.forEach((button) => {
-        button.addEventListener('click', () => {
-            applyTheme(button.dataset.adminThemeValue);
-        });
-    });
-}