django-unfold 0.30.0__py3-none-any.whl → 0.32.0__py3-none-any.whl

unfold/templates/admin/includes/fieldset.html

@@ -1,6 +1,6 @@
 {% load unfold %}
 
-<fieldset class="module{% if fieldset.classes %} {{ fieldset.classes }}{% endif %}">
+<fieldset class="module{% if fieldset.classes %} {{ fieldset.classes }}{% endif %}" {% if stacked != 1 %}x-show="activeTab == 'general'"{% endif %}>
     {% if fieldset.name and "tab" not in fieldset.classes %}
         <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-700 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200">
             {{ fieldset.name }}

unfold/templates/admin/includes/object_delete_summary.html

@@ -5,7 +5,7 @@
         {% translate "Summary" %}
     </h2>
 
-    <ul class="leading-relaxed text-gray-500 text-sm dark:text-gray-400">
+    <ul class="leading-relaxed text-gray-500 text-sm dark:text-gray-300">
         {% for model_name, object_count in model_count %}
             <li>
                 {{ model_name|capfirst }}: {{ object_count }}

unfold/templates/admin/login.html

@@ -56,14 +56,6 @@
 
                     {% url 'admin_password_reset' as password_reset_url %}
 
-                    {% if password_reset_url %}
-                        <div class="password-reset-link">
-                            <a href="{{ password_reset_url }}">
-                                {% translate 'Forgotten your password or username?' %}
-                            </a>
-                        </div>
-                    {% endif %}
-
                     <div class="submit-row">
                         <button type="submit" class="bg-primary-600 border border-transparent flex flex-row font-semibold group items-center justify-center py-2 rounded-md text-sm text-white w-full">
                             {% translate 'Log in' %}
@@ -71,6 +63,14 @@
                             <i class="material-symbols-outlined ml-2 relative right-0 text-lg transition-all group-hover:-right-1">arrow_forward</i>
                         </button>
                     </div>
+
+                    {% if password_reset_url %}
+                        <div class="password-reset-link">
+                            <a href="{{ password_reset_url }}" class="border font-medium hidden mt-4 px-3 py-2 rounded-md text-center text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                                {% translate 'Forgotten your password or username?' %}
+                            </a>
+                        </div>
+                    {% endif %}
                 </form>
 
                 {% block login_after %}{% endblock %}

unfold/templates/admin/object_history.html

@@ -27,7 +27,7 @@
 
 {% block content %}
     {% if action_list %}
-        <table class="border-gray-200 border-spacing-none border-separate mb-6 text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+        <table class="border-gray-200 border-spacing-none border-separate mb-6 text-gray-700 w-full dark:text-gray-300 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
             <thead class="hidden lg:table-header-group">
                 <tr>
                     <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
@@ -47,15 +47,15 @@
             <tbody>
                 {% for action in action_list %}
                     <tr class="block border mb-3 rounded-md shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
-                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% translate 'Date/time' %}">
+                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% translate 'Date/time' %}">
                             {{ action.action_time|date:"DATETIME_FORMAT" }}
                         </th>
 
-                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% translate 'User' %}">
+                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% translate 'User' %}">
                             {{ action.user.get_username }}{% if action.user.get_full_name %} ({{ action.user.get_full_name }}){% endif %}
                         </td>
 
-                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% translate 'Action' %}">
+                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% translate 'Action' %}">
                             {{ action.get_change_message }}
                         </td>
                     </tr>

unfold/templates/admin/search_form.html

@@ -3,7 +3,7 @@
 {% if cl.search_fields %}
     <div id="toolbar">
         <div class="bg-white border flex rounded-md overflow-hidden shadow-sm lg:w-64 focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
-            <input class="font-medium grow min-w-0 h-9 px-3 text-gray-500 text-sm focus:outline-none dark:bg-gray-900 dark:text-gray-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Type to search' %}" />
+            <input class="font-medium grow min-w-0 h-9 px-3 text-gray-500 text-sm focus:outline-none dark:bg-gray-900 dark:text-gray-300" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
 
             <button type="submit" class="flex items-center px-2 focus:outline-none" id="searchbar-submit">
                 <span class="material-symbols-outlined md-18 text-gray-400 dark:text-gray-500">search</span>

unfold/templates/admin/submit_line.html

@@ -12,13 +12,13 @@
                     {% endif %}
 
                     {% for action in actions_submit_line %}
-                        <button type="submit" {% if not action.attrs.name %}name="{{ action.action_name }}"{% endif %} class="border font-medium px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900" {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
+                        <button type="submit" {% if not action.attrs.name %}name="{{ action.action_name }}"{% endif %} class="border font-medium px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900" {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
                             {{ action.description }}
                         </button>
                     {% endfor %}
 
                     {% if show_save_and_continue %}
-                        <button type="submit" name="_continue" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        <button type="submit" name="_continue" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                             {% if can_change %}
                                 {% translate 'Save and continue editing' %}
                             {% else %}
@@ -28,19 +28,21 @@
                     {% endif %}
 
                     {% if show_close %}
-                        <a href="{% url opts|admin_urlname:'changelist' %}" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        {% url opts|admin_urlname:'changelist' as changelist_url %}
+
+                        <a href="{% add_preserved_filters changelist_url %}" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                             {% translate 'Close' %}
                         </a>
                     {% endif %}
 
                     {% if show_save_and_add_another %}
-                        <button type="submit" name="_addanother" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        <button type="submit" name="_addanother" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                             {% translate 'Save and add another' %}
                         </button>
                     {% endif %}
 
                     {% if show_save_as_new %}
-                        <button type="submit" name="_saveasnew" class="border font-medium px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        <button type="submit" name="_saveasnew" class="border font-medium px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                             {% translate 'Save as new' %}
                         </button>
                     {% endif %}

unfold/templates/auth/widgets/read_only_password_hash.html

@@ -1,5 +1,5 @@
 <div class="table table-fixed w-full">
-    <div class="readonly bg-gray-50 border font-medium max-w-2xl px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm dark:bg-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400{% if summary|length > 1 %} text-ellipsis overflow-hidden whitespace-nowrap w-full{% endif %}" {% include 'django/forms/widgets/attrs.html' %}>
+    <div class="readonly bg-gray-50 border font-medium max-w-2xl px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm dark:bg-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300{% if summary|length > 1 %} text-ellipsis overflow-hidden whitespace-nowrap w-full{% endif %}" {% include 'django/forms/widgets/attrs.html' %}>
         {% if summary|length > 1 %}
             {% for entry in summary %}
                 <strong class="font-semibold text-gray-900 dark:text-gray-200">{{ entry.label }}</strong>{% if entry.value %}: {{ entry.value }}{% endif %}

unfold/templates/registration/logged_out.html

@@ -12,7 +12,7 @@
                     </span>
                 </h1>
 
-                <p class="mb-10 text-gray-500 dark:text-gray-400">
+                <p class="mb-10 text-gray-500 dark:text-gray-300">
                     {% translate "Thanks for spending some quality time with the web site today." %}
                 </p>
 

unfold/templates/unfold/change_list_filter.html

@@ -14,7 +14,7 @@
                     </a>
                 {% endif %}
 
-                <a class="cursor-pointer material-symbols-outlined md-18 ml-auto pl-4 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" x-on:click="filterOpen = false">
+                <a class="cursor-pointer material-symbols-outlined md-18 ml-auto pl-4 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200" x-on:click="filterOpen = false">
                     close
                 </a>
             </h3>
@@ -22,6 +22,14 @@
             <div class="px-6{% if cl.model_admin.list_filter_submit %} pb-16{% endif %}">
                 {% if cl.model_admin.list_filter_submit %}
                     <form id="filter-form" method="get">
+
+                    {% if request.GET.q %}
+                        <input type="hidden" name="q" value="{{ request.GET.q }}">
+                    {% endif %}
+
+                    {% if request.GET.o %}
+                        <input type="hidden" name="o" value="{{ request.GET.o }}">
+                    {% endif %}
                 {% endif %}
 
 

unfold/templates/unfold/components/card.html

@@ -1,11 +1,11 @@
-<div class="border flex flex-col flex-grow p-6 rounded-md shadow-sm dark:border-gray-800{% if class %} {{ class }}{% endif %}">
+<div class="border flex flex-col flex-grow overflow-hidden p-6 relative rounded-md shadow-sm dark:border-gray-800{% if class %} {{ class }}{% endif %}">
     {% if title %}
-        <h2 class="border-b font-medium mb-6 -mt-2 -mx-6 pb-4 px-6 text-sm text-gray-700 dark:text-gray-200 dark:border-gray-800">
+        <h2 class="border-b font-semibold mb-6 -mt-2 -mx-6 pb-4 px-6 text-sm text-gray-700 dark:text-gray-200 dark:border-gray-800">
             {{ title }}
         </h2>
     {% endif %}
 
-    <div class="flex-grow relative">
+    <div class="flex-grow relative {% if icon %} pl-6{% endif %}">
         {{ children }}
 
         {% if label %}
@@ -13,6 +13,10 @@
                 {% include "unfold/helpers/label.html" with text=label type="primary" %}
             </div>
         {% endif %}
+
+        {% if icon %}
+            <span class="material-symbols-outlined absolute -left-6 text-gray-300 top-1/2 -translate-x-1/3 -translate-y-1/2 !text-6xl dark:text-gray-500">{{ icon }}</span>
+        {% endif %}
     </div>
 
     {% if footer %}

unfold/templates/unfold/components/icon.html

@@ -0,0 +1 @@
+<span class="material-symbols-outlined{% if class %} {{ class }}{% endif %}">{{ children }}</span>

unfold/templates/unfold/components/separator.html

@@ -1 +1 @@
-<hr class="bg-gray-200 dark:border-gray-800 my-8{% if class %} {{ class }}{% endif %}" />
+<div class="bg-gray-200 dark:bg-gray-800 dark:border-gray-800 {% if vertical == 1 %}mx-8 w-px{% else%}h-px my-8{% endif %}{% if class %} {{ class }}{% endif %}"></div>

unfold/templates/unfold/components/table.html

@@ -0,0 +1,31 @@
+{% load unfold %}
+
+<div class="{% if card_included == 1 %}-m-6{% else %}lg:border lg:rounded-md lg:shadow-sm{% endif %} overflow-x-auto lg:dark:border-gray-800">
+    <table class="block border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-300 lg:table">
+        {% if table.headers %}
+            <thead>
+                <tr class="bg-gray-50 dark:bg-white/[.02]">
+                    {% for  header in table.headers %}
+                        <th class="align-middle font-medium py-2 text-left text-gray-400 text-sm whitespace-nowrap sortable column-description hidden px-3 lg:table-cell {% if card_included == 1 %}first:pl-6 last:pr-6{% endif %}">
+                            {{ header }}
+                        </th>
+                    {% endfor %}
+                </tr>
+            </thead>
+        {% endif %}
+
+        {% if table.rows %}
+            <tbody class="block lg:table-row-group">
+                {% for row in table.rows %}
+                    <tr class="{% if striped == 1 %}{% cycle '' 'bg-gray-50 dark:bg-white/[.02]' %}{% endif %} block {% if not card_included == 1 %}border mb-3 rounded-md shadow-sm{% else %}border-t{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
+                        {% for cell in row %}
+                            <td class="px-3 py-2 align-middle flex border-t border-gray-200 font-normal gap-4 min-w-0 overflow-hidden text-left text-gray-500 text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 dark:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
+                                {{ cell }}
+                            </td>
+                        {% endfor %}
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% endif %}
+    </table>
+</div>

unfold/templates/unfold/helpers/account_links.html

@@ -1,11 +1,11 @@
 {% load i18n %}
 
 <div class="relative" x-data="{ openUserLinks: false }">
-    <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" @click="openUserLinks = !openUserLinks">
+    <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200" @click="openUserLinks = !openUserLinks">
         <span class="material-symbols-outlined">person</span>
     </a>
 
-    <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
+    <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
         <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
             <span class="block mx-1 px-3 py-2 truncate">
                 {% firstof user.get_short_name user.get_username %}

unfold/templates/unfold/helpers/actions_row.html

@@ -1,13 +1,13 @@
 {% load i18n %}
 
 {% if actions %}
-    <td data-label="{% trans "More actions" %}" class="field-actions_holder align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:block before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 dark:before:text-gray-400 lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800 lg:w-px">
-        <div class="group leading-none relative" x-data="{ openActionsId{{ instance.pk }}: false }">
-            <span class="cursor-pointer flex h-7 material-symbols-outlined md-18 -my-1 !leading-7 rounded text-center text-gray-400 w-7 group-hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-400 group-hover:dark:bg-gray-800 group-hover:dark:text-white" @click="openActionsId{{ instance.pk }} = !openActionsId{{ instance.pk }}">
+    <td data-label="{% trans "More actions" %}" class="field-actions_holder align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:block before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 dark:before:text-gray-300 lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800 lg:w-px">
+        <div class="group leading-none relative" x-data="{ openActionsId: false }">
+            <span x-ref="rowDropdown{{ instance_pk }}" class="cursor-pointer flex h-7 material-symbols-outlined md-18 -my-1 !leading-7 rounded text-center text-gray-400 w-7 group-hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 group-hover:dark:bg-gray-800 group-hover:dark:text-white" @click="openActionsId{{ instance.pk }} = !openActionsId{{ instance.pk }}">
                 more_horiz
             </span>
 
-            <nav class="absolute bg-white border flex flex-col leading-none py-1 right-0 rounded-md shadow-lg text-gray-500 text-sm top-7 z-50 w-48 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openActionsId{{ instance.pk }}" @click.outside="openActionsId{{ instance.pk }} = false">
+            <nav x-anchor.offset.4="$refs.rowDropdown{{ instance_pk }}" class="bg-white border flex flex-col leading-none py-1 rounded-md shadow-lg text-gray-500 text-sm top-7 z-50 w-48 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300" x-cloak x-show="openActionsId" @click.outside="openActionsId{{ instance.pk }} = false">
                 {% for action in actions %}
                     <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded-md truncate whitespace-nowrap hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
                         {{ action.title }}

unfold/templates/unfold/helpers/app_list.html

@@ -1,55 +1,65 @@
-{% load i18n %}
+{% load i18n unfold %}
 
 {% if sidebar_navigation %}
     <div class="h-0 flex-grow overflow-auto" data-simplebar>
         {% for group in sidebar_navigation %}
             {% if group.items %}
-                {% if group.separator %}
-                    <hr class="border-t border-gray-200 mx-6 my-2 dark:border-gray-800" />
-                {% endif %}
+                {% has_nav_item_active group.items as has_active %}
 
-                {% if group.title %}
-                    <h3 class="font-medium my-3 px-6 text-gray-900 text-sm first:mt-0 dark:text-gray-200">
-                        {{ group.title }}
-                    </h3>
-                {% endif %}
+                <div class="mb-3" {% if group.collapsible %}x-data="{navigationOpen: {% if has_active %}true{% else %}false{% endif %}}"{% endif %}>
+                    {% if group.separator %}
+                        <hr class="border-t border-gray-200 mx-6 my-2 dark:border-gray-800" />
+                    {% endif %}
 
-                <ol class="px-6">
-                    {% for item in group.items %}
-                        {% if item.has_permission %}
-                            <li>
-                                <a href="{{ item.link }}" class="border border-transparent flex h-11 items-center -mx-3 px-3 py-2 rounded-md {% if item.active %}bg-gray-100 font-semibold text-primary-600 dark:border dark:border-gray-800 dark:bg-white/[.02] dark:text-primary-500{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200{% endif %}">
-                                    {% if item.icon %}
-                                        <span class="material-symbols-outlined md-18 mr-3 w-4.5">
-                                            {{ item.icon }}
-                                        </span>
-                                    {% endif %}
+                    {% if group.title %}
+                        <h3 class="font-medium flex flex-row items-center mb-1 mx-3 py-1.5 px-3 select-none text-gray-900 text-sm dark:text-gray-200 {% if group.collapsible %}cursor-pointer{% endif %}" {% if group.collapsible %}x-on:click="navigationOpen = !navigationOpen"{% endif %}>
+                            {{ group.title }}
+
+                            {% if group.collapsible %}
+                                <span class="material-symbols-outlined ml-auto text-gray-400 transition-all" x-bind:class="{'rotate-90': navigationOpen}">
+                                    chevron_right
+                                </span>
+                            {% endif %}
+                        </h3>
+                    {% endif %}
 
-                                    <span class="text-sm">
-                                        {{ item.title|safe }}
-                                    </span>
+                    <ol class="px-6" {% if group.collapsible %}x-show="navigationOpen"{% endif %}>
+                        {% for item in group.items %}
+                            {% if item.has_permission %}
+                                <li>
+                                    <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}" class="border border-transparent flex h-11 items-center -mx-3 px-3 py-2 rounded-md {% if item.active %}bg-gray-100 font-semibold text-primary-600 dark:border dark:border-gray-800 dark:bg-white/[.02] dark:text-primary-500{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-300 hover:dark:text-gray-200{% endif %}">
+                                        {% if item.icon %}
+                                            <span class="material-symbols-outlined md-18 mr-3 w-4.5">
+                                                {{ item.icon }}
+                                            </span>
+                                        {% endif %}
 
-                                    {% if item.badge %}
-                                        <span class="bg-red-600 font-semibold ml-2 px-1 rounded-sm text-xs text-white">
-                                            {% if item.badge_callback %}
-                                                {{ item.badge_callback }}
-                                            {% else %}
-                                                {{ item.badge }}
-                                            {% endif %}
+                                        <span class="text-sm">
+                                            {{ item.title|safe }}
                                         </span>
-                                    {% endif %}
-                                </a>
-                            </li>
-                        {% endif %}
-                    {% endfor %}
-                </ol>
-            {% endif %}
+
+                                        {% if item.badge %}
+                                            <span class="bg-red-600 font-semibold ml-2 px-1 rounded-sm text-xs text-white">
+                                                {% if item.badge_callback %}
+                                                    {{ item.badge_callback }}
+                                                {% else %}
+                                                    {{ item.badge }}
+                                                {% endif %}
+                                            </span>
+                                        {% endif %}
+                                    </a>
+                                </li>
+                            {% endif %}
+                        {% endfor %}
+                    </ol>
+                {% endif %}
+            </div>
         {% endfor %}
     </div>
 
     {% if sidebar_show_all_applications %}
         <div class="mt-auto" x-data="{ openAllApplications: false }">
-            <a class="cursor-pointer flex items-center px-6 py-3 text-gray-500 text-sm transition-all hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200" x-on:click="openAllApplications = !openAllApplications">
+            <a class="cursor-pointer flex items-center px-6 py-3 text-gray-500 text-sm transition-all hover:text-gray-700 dark:text-gray-300 hover:dark:text-gray-200" x-on:click="openAllApplications = !openAllApplications">
                 <span class="material-symbols-outlined md-18 mr-3">
                     apps
                 </span>
@@ -72,7 +82,7 @@
                             <ul>
                                 {% for model in app.models %}
                                     <li class="block mb-4 last:mb-0">
-                                        <a href="{{ model.admin_url }}" class="block overflow-hidden text-ellipsis text-gray-500 transition-all whitespace-nowrap hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                                        <a href="{{ model.admin_url }}" class="block overflow-hidden text-ellipsis text-gray-500 transition-all whitespace-nowrap hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200">
                                             {{ model.name }}
                                         </a>
                                     </li>

unfold/templates/unfold/helpers/app_list_default.html

@@ -20,7 +20,7 @@
                                     </a>
                                 </th>
                             {% else %}
-                                <th scope="row" class="font-normal p-3 text-left dark:text-gray-400 {% if not forloop.last %}border-b border-gray-100 dark:border-gray-800{% endif %}">
+                                <th scope="row" class="font-normal p-3 text-left dark:text-gray-300 {% if not forloop.last %}border-b border-gray-100 dark:border-gray-800{% endif %}">
                                     {{ model.name }}
                                 </th>
                             {% endif %}
@@ -28,18 +28,18 @@
                             <td class="{% if not forloop.last %}border-b border-gray-100 dark:border-gray-800{% endif %} p-3 text-right">
                                 <div class="flex flex-row items-center ml-auto gap-4 justify-end">
                                     {% if model.add_url %}
-                                        <a href="{{ model.add_url }}" class="addlink block leading-none text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" title="{% translate 'Add' %}">
+                                        <a href="{{ model.add_url }}" class="addlink block leading-none text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200" title="{% translate 'Add' %}">
                                             <span class="material-symbols-outlined">add</span>
                                         </a>
                                     {% endif %}
 
                                     {% if model.admin_url and show_changelinks %}
                                         {% if model.view_only %}
-                                            <a href="{{ model.admin_url }}" class="viewlink block leading-none text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" title="{% translate 'View' %} ">
+                                            <a href="{{ model.admin_url }}" class="viewlink block leading-none text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200" title="{% translate 'View' %} ">
                                                 <span class="material-symbols-outlined">visibility</span>
                                             </a>
                                         {% else %}
-                                            <a href="{{ model.admin_url }}" class="changelink block leading-none text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" title="{% translate 'Change' %}">
+                                            <a href="{{ model.admin_url }}" class="changelink block leading-none text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200" title="{% translate 'Change' %}">
                                                 <span class="material-symbols-outlined">edit_square</span>
                                             </a>
                                         {% endif %}

unfold/templates/unfold/helpers/breadcrumb_item.html

@@ -1,5 +1,5 @@
 
-<li class="text-gray-500 text-xs dark:text-gray-400">
+<li class="text-gray-500 text-xs dark:text-gray-300">
     {% if link %}
         <a href="{{ link }}">{{ name }}</a> <span class="mx-2 text-gray-200 dark:text-gray-600">/</span>
     {% else %}

unfold/templates/unfold/helpers/field_readonly_value.html

@@ -1 +1 @@
-<div class="readonly font-medium max-w-4xl py-2 text-gray-500 text-sm dark:text-gray-400 *:rounded-md {% if not adminform.model_admin.compressed_fields and not field.is_image %}bg-gray-50 border px-3 rounded-md shadow-sm dark:border-gray-700 dark:bg-gray-800{% endif %} {% if field.is_image %}inline-block [&_img]:rounded-md !py-0{% endif %}">{% if value %}{{ value }}{% elif field.contents %}{{ field.contents }}{% else %}-{% endif %}</div>
+<div class="readonly font-medium max-w-4xl py-2 text-gray-500 text-sm dark:text-gray-300 *:rounded-md {% if not adminform.model_admin.compressed_fields and not field.is_image %}bg-gray-50 border px-3 rounded-md shadow-sm dark:border-gray-700 dark:bg-gray-800{% endif %} {% if field.is_image %}inline-block [&_img]:rounded-md !py-0{% endif %}">{% if value %}{{ value }}{% elif field.contents %}{{ field.contents }}{% else %}-{% endif %}</div>

unfold/templates/unfold/helpers/fieldset_row.html

@@ -24,9 +24,9 @@
                                 </div>
 
                             {% if field.errors %}
-                                <span class="mt-1 text-red-600 text-sm dark:text-red-500">
+                                <div class="mt-1 text-red-600 text-sm dark:text-red-500">
                                     {{ field.errors }}
-                                </span>
+                                </div>
                             {% endif %}
                         </div>
                     </div>
@@ -44,9 +44,9 @@
                             {% endif %}
 
                             {% if field.errors %}
-                                <span class="mt-1 text-red-600 text-sm dark:text-red-500">
+                                <div class="mt-1 text-red-600 text-sm dark:text-red-500">
                                     {{ field.errors }}
-                                </span>
+                                </div>
                             {% endif %}
                         </div>
                     </div>
@@ -68,9 +68,9 @@
                     {% endif %}
 
                     {% if field.errors %}
-                        <span class="mt-1 text-red-600 text-sm dark:text-red-500">
+                        <div class="mt-1 text-red-600 text-sm dark:text-red-500">
                             {{ field.errors }}
-                        </span>
+                        </div>
                     {% endif %}
                 </div>
             {% endif %}

unfold/templates/unfold/helpers/fieldsets_tabs.html

@@ -2,8 +2,8 @@
 
 {% with tabs=adminform|tabs %}
     {% if tabs %}
-        <div x-data="{openTab: null}">
-            <ul class="bg-gray-100 border border-transparent flex gap-10 mb-6 px-4 py-3 rounded-md text-gray-400 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-400">
+        <div x-data="{openTab: null}" x-show="activeTab == 'general'">
+            <ul class="bg-gray-100 border border-transparent flex gap-10 mb-6 px-4 py-3 rounded-md text-gray-400 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-300">
                 {% for fieldset in tabs %}
                     <li>
                         <a class="cursor-pointer font-semibold hover:text-gray-700 dark:hover:text-white"

unfold/templates/unfold/helpers/header.html

@@ -1,7 +1,7 @@
 {% if not is_popup %}
     {% block header %}
         <div class="border-b border-gray-200 mb-6 px-4 lg:px-12 dark:border-gray-800">
-            <div class="container flex items-center h-16 mx-auto py-4">
+            <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} flex items-center h-16 mx-auto py-4">
                 <div id="header-inner" class="flex items-center w-full">
                     <div class="flex items-center w-full">
                         {% block usertools %}

unfold/templates/unfold/helpers/help_text.html

@@ -1,5 +1,5 @@
 {% if help_text %}
-    <div class="leading-relaxed mt-2 text-gray-500 text-xs dark:text-gray-400">
+    <div class="leading-relaxed mt-2 text-gray-500 text-xs dark:text-gray-300">
         {{ help_text }}
     </div>
 {% endif %}

unfold/templates/unfold/helpers/history.html

@@ -20,7 +20,7 @@
                             {% endif %}
                         </div>
 
-                        <div class="border-gray-100 border-t flex pt-3 text-gray-500 text-sm dark:border-gray-800 dark:text-gray-400">
+                        <div class="border-gray-100 border-t flex pt-3 text-gray-500 text-sm dark:border-gray-800 dark:text-gray-300">
                             <div>
                                 {% if entry.content_type %}
                                     {% filter capfirst %}{{ entry.content_type.name }}{% endfilter %}

unfold/templates/unfold/helpers/label.html

@@ -10,8 +10,7 @@
     {% elif type == 'primary' %}
         bg-primary-100 text-primary-500 dark:bg-primary-500/20
     {% else %}
-        bg-gray-100 text-gray-500 dark:bg-gray-500/20 dark:text-gray-400
-    {% endif %}
-">
+        bg-gray-100 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300
+    {% endif %}">
     {{ text }}
 </span>

unfold/templates/unfold/helpers/search.html

@@ -1,23 +1,26 @@
 {% load i18n %}
+
 {% if sidebar_show_search %}
-    <div class="mb-5 mx-3 relative">
+    <div class="mb-5 mx-3 relative" x-data="{openSearchResults: false}">
         <div class="bg-white border flex items-center overflow-hidden rounded-md shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
             <span class="material-symbols-outlined md-18 pl-3 text-gray-400">manage_search</span>
 
             <input type="search"
                    id="nav-filter"
                    name="s"
+                   x-on:blur="setTimeout(function() {openSearchResults = false}, 200)"
+                   x-on:focus="openSearchResults=true"
                    hx-get="{% url "admin:search" %}"
                    hx-trigger="keyup changed delay:500ms, search"
                    hx-target="#search-results"
                    hx-indicator=".htmx-indicator"
-                   class="flex-grow font-medium overflow-hidden pl-2 pr-3 py-2 text-gray-500 text-sm focus:outline-none dark:bg-gray-900 dark:text-gray-400"
+                   class="flex-grow font-medium overflow-hidden pl-2 pr-3 py-2 text-gray-500 text-sm focus:outline-none dark:bg-gray-900 dark:text-gray-300"
                    placeholder="{% translate 'Search apps and models...' %}" aria-label="{% translate 'Filter navigation items' %}" />
-            <div class="absolute htmx-indicator mt-0.5 opacity-0 right-2 top-2">
+            <div class="absolute opacity-0 htmx-indicator mt-0.5 right-2 top-2">
                 <span class="animate-spin material-symbols-outlined md-18 text-gray-300">sync</span>
             </div>
         </div>
 
-        <div id="search-results"></div>
+        <div id="search-results" x-show="openSearchResults"></div>
     </div>
 {% endif %}

unfold/templates/unfold/helpers/search_results.html

@@ -3,8 +3,8 @@
         {% for app in results %}
             {% for model in app.models %}
                 <li>
-                    <a href="{{ model.admin_url }}" class="block group overflow-hidden px-3 py-2 text-gray-500 text-ellipsis whitespace-nowrap hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                        {{ app.name }} <span class="align-text-top material-symbols-outlined md-18 text-gray-300 group-hover:text-gray-400 dark:text-gray-600">arrow_right_alt</span> {{ model.name }}
+                    <a href="{{ model.admin_url }}" class="block group overflow-hidden px-3 py-2 text-gray-500 text-ellipsis whitespace-nowrap hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200">
+                        {{ app.name }} <span class="align-text-top material-symbols-outlined md-18 text-gray-300 group-hover:text-gray-300 dark:text-gray-600">arrow_right_alt</span> {{ model.name }}
                     </a>
                 </li>
             {% endfor %}

unfold/templates/unfold/helpers/tab_action.html

@@ -1,5 +1,5 @@
 <li class="border-b flex-grow text-center md:border-b-0 md:border-r last:border-0 dark:border-gray-800">
-    <a href="{{ link }}" class="block px-4 py-2 text-gray-500 text-left whitespace-nowrap hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
+    <a href="{{ link }}" class="block px-4 py-2 text-gray-500 text-left whitespace-nowrap hover:text-gray-700 dark:text-gray-300 hover:dark:text-gray-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
         {{ title }}
     </a>
 </li>