django-unfold 0.60.0__py3-none-any.whl → 0.61.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -25,6 +25,67 @@ const sortRecords = (e) => {
   });
 };
 
+/*************************************************************
+ * Search form
+ *************************************************************/
+function searchForm() {
+  return {
+    applyShortcut(event) {
+      if (
+        event.key === "/" &&
+        document.activeElement.tagName.toLowerCase() !== "input" &&
+        document.activeElement.tagName.toLowerCase() !== "textarea" &&
+        !document.activeElement.isContentEditable
+      ) {
+        event.preventDefault();
+        this.$refs.searchInput.focus();
+      }
+    },
+  };
+}
+
+/*************************************************************
+ * Search dropdown
+ *************************************************************/
+function searchDropdown() {
+  return {
+    openSearchResults: true,
+    currentIndex: 0,
+    applyShortcut(event) {
+      if (
+        event.key === "t" &&
+        document.activeElement.tagName.toLowerCase() !== "input" &&
+        document.activeElement.tagName.toLowerCase() !== "textarea" &&
+        !document.activeElement.isContentEditable
+      ) {
+        event.preventDefault();
+        this.$refs.searchInput.focus();
+      }
+    },
+    nextItem() {
+      if (this.currentIndex < this.maxItem()) {
+        this.currentIndex++;
+      }
+    },
+    prevItem() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+      }
+    },
+    maxItem() {
+      return document.getElementById("search-results").querySelectorAll("li")
+        .length;
+    },
+    selectItem() {
+      const items = document
+        .getElementById("search-results")
+        .querySelectorAll("li");
+
+      window.location = items[this.currentIndex - 1].querySelector("a").href;
+    },
+  };
+}
+
 /*************************************************************
  * Warn without saving
  *************************************************************/

unfold/styles.css

@@ -35,6 +35,8 @@
 
 @theme {
   --font-sans: 'Inter', sans-serif;
+  --shadow-raised: 0 2px 12px rgba(0, 0, 0, 0.12);
+  --shadow-raised-dark: 0 2px 12px rgba(255, 255, 255, 0.12);
 }
 
 @theme inline{
@@ -338,10 +340,6 @@ td .inline-deletelink {
   @apply block lg:mt-2.5;
 }
 
-h3 span:nth-child(3) {
-  @apply ml-auto;
-}
-
 /*******************************************************
  Autocomplete
  *******************************************************/
@@ -483,7 +481,7 @@ fieldset details > summary {
 }
 
 fieldset details > summary:after {
-  @apply material-symbols-outlined absolute right-3 top-3.5;
+  @apply material-symbols-outlined absolute cursor-pointer right-3 top-3.5;
   content: "expand_more";
 }
 

unfold/templates/admin/auth/user/add_form.html

@@ -3,10 +3,6 @@
 
 {% block form_top %}
     <p class="bg-blue-50 border-blue-200 mb-8 p-3 rounded-default text-blue-500 text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
-        {% if not is_popup %}
-            {% translate 'First, enter a username and password. Then, you’ll be able to edit more user options.' %}
-        {% else %}
-            {% translate "Enter a username and password." %}
-        {% endif %}
+        {% translate "After you've created a user, you’ll be able to edit more user options." %}
         <p>
 {% endblock %}

unfold/templates/admin/change_form.html

@@ -59,13 +59,15 @@
 
 {% block content %}
     <div id="content-main">
+        {% include "unfold/helpers/popup_header.html" %}
+
         {% block form_before %}{% endblock %}
 
         {% if adminform.model_admin.change_form_outer_before_template %}
             {% include adminform.model_admin.change_form_outer_before_template %}
         {% endif %}
 
-        <form {% if adminform.model_admin.conditional_fields %}x-data='{{ adminform|changeform_data }}'{% endif %} {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
+        <form {% if adminform.model_admin.conditional_fields %}x-data='{{ adminform|changeform_data }}'{% endif %} {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}"{% else %}x-bind:value="activeTab && activeTab !== 'general' ? '#' + activeTab : ''" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
             {% csrf_token %}
 
             {% if adminform.model_admin.change_form_before_template %}

unfold/templates/admin/change_list.html

@@ -55,6 +55,8 @@
 
 {% block content %}
     <div id="content-main" x-data="{ filterOpen: false }">
+        {% include "unfold/helpers/popup_header.html" %}
+
         {% if cl.formset and cl.formset.errors %}
             {% include "unfold/helpers/messages/errornote.html" with errors=cl.formset.errors %}
 
@@ -70,7 +72,7 @@
                         {% endif %}
                     {% endblock %}
 
-                    {% if cl.model_admin.list_before_template %}
+                    {% if cl.model_admin.list_before_template and not is_popup %}
                         {% include cl.model_admin.list_before_template %}
                     {% endif %}
 
@@ -106,7 +108,7 @@
                         {% endblock %}
                     </form>
 
-                    {% if cl.model_admin.list_after_template %}
+                    {% if cl.model_admin.list_after_template and not is_popup %}
                         {% include cl.model_admin.list_after_template %}
                     {% endif %}
                 </div>

unfold/templates/admin/change_list_results.html

@@ -70,7 +70,7 @@
             </thead>
 
             {% for result in results %}
-                <tbody class="block lg:table-row-group" x-data="{rowOpen: false}">
+                <tbody class="{% cycle '' 'after:bg-base-50 dark:after:bg-white/[.02]' %} block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 after:content-[''] after:absolute after:inset-0" x-data="{rowOpen: false}">
                     {% if result.form and result.form.non_field_errors %}
                         <tr>
                             <td class="text-left" colspan="{{ result|length }}">
@@ -79,7 +79,7 @@
                         </tr>
                     {% endif %}
 
-                    <tr class="{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %} block border border-base-200 mb-3 rounded-default shadow-xs lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
+                    <tr class="block border border-base-200 mb-3 relative rounded-default shadow-xs z-20 lg:table-row lg:border-none lg:mb-0 lg:rounded-none lg:shadow-none dark:border-base-800">
                         {% if cl.model_admin.list_sections|length > 0 %}
                             <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
                                 data-label="{% trans "Expand row" %}"
@@ -99,7 +99,7 @@
                     </tr>
 
                     {% if cl.model_admin.list_sections|length > 0 %}
-                        <tr class="block mb-3 lg:table-row" x-show="rowOpen">
+                        <tr class="block mb-3 relative z-30 lg:table-row" x-show="rowOpen">
                             <td colspan="{{ result|length|add:2 }}" class="border bg-base-200/10 block border-base-200 relative rounded-default p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
                                 <div class="absolute bg-primary-600 h-full hidden left-0 top-0 w-0.5 lg:block"></div>
 

unfold/templates/admin/edit_inline/stacked.html

@@ -26,6 +26,12 @@
                 <div x-sort:item class="inline-related group inline-stacked {% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}" {% if inline_admin_formset.opts.collapsible and inline_admin_form.original %}x-data="{ open: {% if inline_admin_form.errors %}true{% else %}false{% endif %} }"{% endif %}>
                     {% if not inline_admin_formset.opts.hide_title or inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
                         <h3 class="border-b border-base-200 flex font-medium items-center gap-2 px-3 py-2 text-sm dark:border-base-800 {% if inline_admin_formset.opts.collapsible and inline_admin_form.original %}cursor-pointer{% endif %}" {% if inline_admin_formset.opts.collapsible and inline_admin_form.original %}x-on:click="open = !open"{% endif %}>
+                            {% if inline_admin_formset.opts.collapsible and inline_admin_form.original %}
+                                <span class="material-symbols-outlined select-none block! -rotate-90 transition-all" x-bind:class="open && 'rotate-0'">
+                                    expand_more
+                                </span>
+                            {% endif %}
+
                             {% if inline_admin_formset.opts.ordering_field %}
                                 {% if inline_admin_form.original %}
                                     <span class="material-symbols-outlined cursor-pointer" x-sort:handle>drag_indicator</span>
@@ -99,8 +105,8 @@
             {% endfor %}
         </div>
 
+        {% include "unfold/helpers/pagination_inline.html" %}
+
         {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
     </fieldset>
-
-    {% include "unfold/helpers/pagination_inline.html" %}
 </div>

unfold/templates/admin/edit_inline/tabular.html

@@ -34,9 +34,9 @@
                 </table>
             </div>
 
+            {% include "unfold/helpers/pagination_inline.html" %}
+
             {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
         </fieldset>
-
-        {% include "unfold/helpers/pagination_inline.html" %}
     </div>
 </div>

unfold/templates/admin/includes/fieldset.html

@@ -1,18 +1,22 @@
 {% load unfold %}
 
-<fieldset class="module{% if fieldset.classes %} {{ fieldset.classes }}{% endif %}" {% if stacked != 1 %}x-show="activeTab == 'general'"{% endif %}>
+<fieldset class="module relative {% if fieldset.classes %} {{ fieldset.classes }}{% endif %}" {% if stacked != 1 %}x-show="activeTab == 'general'"{% endif %}>
+    {% if fieldset.is_collapsible %}<details><summary>{% endif %}
+
     {% if fieldset.name and "tab" not in fieldset.classes %}
         {% if stacked == 1 %}
-            <h2 class="border-b border-base-200 border-t border-dashed font-semibold text-font-important-light px-3 py-4.5 dark:text-font-important-dark dark:border-base-800">
+            <h2 class="border-b border-base-200 border-t border-dashed font-semibold text-font-important-light px-3 py-4.5 dark:text-font-important-dark dark:border-base-800 {% if fieldset.is_collapsible %}cursor-pointer{% endif %}">
                 {{ fieldset.name }}
             </h2>
         {% else %}
-            <h2 class="bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark">
+            <h2 class="bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if fieldset.is_collapsible %}cursor-pointer{% endif %}">
                 {{ fieldset.name }}
             </h2>
         {% endif %}
     {% endif %}
 
+    {% if fieldset.is_collapsible %}</summary>{% endif %}
+
     {% if fieldset.description %}
         <div class="leading-relaxed mb-4 max-w-4xl text-sm">
             {{ fieldset.description|safe }}
@@ -24,4 +28,6 @@
             {% include "unfold/helpers/fieldset_row.html" %}
         {% endfor %}
     </div>
+
+    {% if fieldset.name and fieldset.is_collapsible %}</details>{% endif %}
 </fieldset>

unfold/templates/admin/search_form.html

@@ -2,13 +2,22 @@
 
 {% if cl.search_fields %}
     <div id="toolbar">
-        <form id="changelist-search" method="get" role="search">
-            <div class="bg-white border border-base-200 flex rounded-default overflow-hidden shadow-xs lg:w-96 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
-                <input class="font-medium grow min-w-0 h-9 px-3 text-font-default-light text-sm focus:outline-hidden dark:bg-base-900 dark:text-font-default-dark placeholder-shown:truncate placeholder-base-400" 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-hidden" id="searchbar-submit">
+        <form id="changelist-search" method="get" role="search" x-data="searchForm()">
+            <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-full focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 lg:w-96 dark:bg-base-900 dark:border-base-700">
+                <button type="submit" class="flex items-center focus:outline-hidden" id="searchbar-submit">
                     <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
                 </button>
+
+                <input type="text"
+                       x-ref="searchInput"
+                       x-on:keydown.window="applyShortcut($event)"
+                       class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
+                       name="{{ search_var }}"
+                       value="{{ cl.query }}"
+                       id="searchbar"
+                       placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
+
+                {% include "unfold/helpers/shortcut.html" with shortcut="/" %}
             </div>
 
             {% for pair in cl.filter_params.items %}

unfold/templates/admin/submit_line.html

@@ -1,7 +1,7 @@
 {% load i18n admin_urls %}
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative lg:sticky lg:bottom-0 z-40">
-    <div class="backdrop-blur-xs bg-white/80 rounded-b-default pb-4 px-4 dark:bg-base-900/80 {% if not is_popup %}lg:border-t lg:border-base-200 relative lg:scrollable-top lg:py-0 dark:border-base-800{% endif %}">
+    <div class="backdrop-blur-xs bg-white/80 rounded-b-default pb-4 px-4 dark:bg-base-900/80 lg:border-t lg:border-base-200 relative lg:scrollable-top lg:py-0 dark:border-base-800">
         <div class="flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse container lg:h-[64px]">
             {% block submit-row %}
                 {% if show_save %}

unfold/templates/unfold/components/card.html

@@ -5,7 +5,7 @@
     </h2>
 {% endif %}
 
-<span class="grow relative {% if icon %} pl-6{% endif %}">
+<div class="grow relative {% if icon %} pl-6{% endif %}">
     {{ children }}
 
     {% if label %}
@@ -17,11 +17,11 @@
     {% if icon %}
         <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500">{{ icon }}</span>
     {% endif %}
-</span>
+</div>
 
 {% if footer %}
-    <span class="border-t border-base-200 flex items-center -mb-6 -mx-6 mt-6 pb-2 pt-2 px-6 text-sm dark:border-base-800">
+    <div class="border-t border-base-200 flex items-center -mb-6 -mx-6 mt-6 pb-2 pt-2 px-6 text-sm dark:border-base-800">
         {{ footer }}
-    </span>
+    </div>
 {% endif %}
 </{% if href %}a{% else %}div{% endif %}>

unfold/templates/unfold/helpers/add_link.html

@@ -10,7 +10,9 @@
 
 {% if add_url %}
     <div class="flex flex-row items-center">
-        <span class="block bg-base-200 h-5 mx-4 w-px dark:bg-base-700"></span>
+        {% if not hide_separator %}
+            <span class="block bg-base-200 h-5 mx-4 w-px dark:bg-base-700"></span>
+        {% endif %}
 
         <a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink bg-primary-600 flex items-center h-9 justify-center -my-1 rounded-full w-9" title="{{ title }}">
             <span class="material-symbols-outlined text-white">add</span>

unfold/templates/unfold/helpers/fieldsets_tabs.html

@@ -3,12 +3,12 @@
 {% with tabs=adminform|tabs %}
     {% if tabs %}
         <div x-data="{openTab: null}" x-show="activeTab == 'general'">
-            <ul class="bg-base-100 flex gap-10 mb-6 px-4 py-3 rounded-default text-font-default-light 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-default-dark">
+            <ul class="bg-base-100 flex gap-1 mb-6 px-1.5 py-1.5 rounded-default text-font-default-light 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-default-dark">
                 {% for fieldset in tabs %}
                     <li>
-                        <a class="cursor-pointer font-semibold hover:text-base-700 dark:hover:text-white"
+                        <a class="block cursor-pointer font-semibold px-2.5 py-2 rounded-default hover:text-base-700 dark:hover:text-white"
                            x-on:click="openTab = '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'"
-                           x-bind:class="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %} ? 'text-font-important-light dark:text-font-important-dark' : ''">
+                           x-bind:class="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %} ? 'bg-white text-font-important-light shadow-xs dark:bg-base-900 dark:text-font-important-dark' : ''">
                             {{ fieldset.name }}
                         </a>
                     </li>

unfold/templates/unfold/helpers/help_text.html

@@ -1,5 +1,5 @@
 {% if help_text %}
     <div class="leading-relaxed mt-2 text-xs">
-        {{ help_text }}
+        {{ help_text|safe }}
     </div>
 {% endif %}

unfold/templates/unfold/helpers/messages.html

@@ -2,13 +2,13 @@
     <ul class="flex flex-col gap-4 mb-8">
         {% for message in messages %}
             <li class="*:mb-0!">
-                {% if message.tags == 'info' %}
+                {% if message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
                     {% include "unfold/helpers/messages/info.html" with message=message %}
-                {% elif message.tags == 'success' %}
+                {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
                     {% include "unfold/helpers/messages/success.html" with message=message %}
-                {% elif message.tags == 'warning' %}
+                {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
                     {% include "unfold/helpers/messages/warning.html" with message=message %}
-                {% elif message.tags == 'error' %}
+                {% elif message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                     {% include "unfold/helpers/messages/error.html" with message=message %}
                 {% else %}
                     {% include "unfold/helpers/messages/debug.html" with message=message %}

unfold/templates/unfold/helpers/pagination.html

@@ -1,7 +1,7 @@
 {% load admin_list unfold %}
 
 {% if cl %}
-    <div {% if not is_popup %}class="px-4 lg:backdrop-blur-xs lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-base-900/80 lg:left-0 lg:right-0 lg:bottom-0 lg:sticky relative z-40 {% if not is_popup %}lg:border-t lg:border-base-200 lg:relative lg:scrollable-top lg:dark:border-base-800{% endif %} {% element_classes 'pagination' %}"{% endif %}>
+    <div class="px-4 lg:backdrop-blur-xs lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-base-900/80 lg:left-0 lg:right-0 lg:bottom-0 lg:sticky relative z-40 lg:border-t lg:border-base-200 lg:relative lg:scrollable-top lg:dark:border-base-800 {% element_classes 'pagination' %}">
         {% pagination cl %}
     </div>
 {% endif %}

unfold/templates/unfold/helpers/popup_header.html

@@ -0,0 +1,27 @@
+{% load i18n admin_urls unfold %}
+
+{% if is_popup %}
+    <div class="flex flex-row items-center">
+        <h1 class="font-semibold overflow-hidden my-6 text-ellipsis whitespace-nowrap text-base text-font-important-light dark:text-font-important-dark">
+            <span class="tracking-tight">
+                {{ pretitle }}
+
+                {{ content_title }}
+            </span>
+
+            {% if cl and cl.full_result_count != cl.result_count and cl.paginator|class_name != "InfinitePaginator" %}
+                <span class="font-medium ml-2 text-font-subtle-light text-sm dark:text-font-subtle-dark">
+                    {% blocktranslate count counter=cl.result_count %}{{ counter }} result{% plural %}{{ counter }} results{% endblocktranslate %} (<a href="?{% if cl.is_popup %}_popup=1{% endif %}">{% if cl.show_full_result_count %}{% blocktranslate with full_result_count=cl.full_result_count %}{{ full_result_count }} total{% endblocktranslate %}{% else %}{% translate "Show all" %}{% endif %}</a>)
+                </span>
+            {% endif %}
+
+            {% if content_subtitle %}
+                {{ content_subtitle }}
+            {% endif %}
+        </h1>
+
+        <div class="ml-auto">
+            {% include "unfold/helpers/add_link.html" with hide_separator=True %}
+        </div>
+    </div>
+{% endif %}

unfold/templates/unfold/helpers/search.html

@@ -1,24 +1,28 @@
 {% load i18n %}
 
 {% if sidebar_show_search %}
-    <div class="mb-2.5 mx-3 relative" x-data="{openSearchResults: false}">
-        <div class="bg-white border border-base-200 flex items-center overflow-hidden rounded-default shadow-xs focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
-            <span class="material-symbols-outlined md-18 pl-3 text-base-400">manage_search</span>
+    <div class="mb-2.5 mx-3 relative" x-data="searchDropdown()" x-on:keydown.window="applyShortcut($event)" x-on:click.outside="openSearchResults = false">
+        <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-full focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
+            <span class="material-symbols-outlined md-18 text-base-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"
+                   x-ref="searchInput"
+                   x-on:focus="openSearchResults = true; currentIndex = 0"
+                   x-on:keydown.arrow-down.prevent="nextItem()"
+                   x-on:keydown.arrow-up.prevent="prevItem()"
+                   x-on:keydown.escape.prevent="openSearchResults=false"
+                   x-on:keydown.enter.prevent="selectItem()"
+                   x-on:search="currentIndex = 0"
                    hx-get="{% url "admin:search" %}"
-                   hx-trigger="keyup changed delay:500ms, search"
+                   hx-trigger="keyup changed delay:500ms"
                    hx-target="#search-results"
-                   hx-indicator=".htmx-indicator"
-                   class="grow font-medium overflow-hidden pl-2 pr-3 py-2 text-font-default-light text-sm placeholder-base-400 focus:outline-hidden dark:bg-base-900 dark:text-font-default-dark"
-                   placeholder="{% translate 'Search apps and models...' %}" aria-label="{% translate 'Filter navigation items' %}" />
-            <div class="absolute opacity-0 htmx-indicator mt-0.5 right-2 top-2">
-                <span class="animate-spin material-symbols-outlined md-18 text-base-300">sync</span>
-            </div>
+                   class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
+                   placeholder="{% translate 'Search apps and models...' %}"
+                   aria-label="{% translate 'Filter navigation items' %}">
+
+            {% include "unfold/helpers/shortcut.html" with shortcut="t" %}
         </div>
 
         <div id="search-results" x-show="openSearchResults"></div>

unfold/templates/unfold/helpers/search_results.html

@@ -1,13 +1,14 @@
 {% if results %}
-    <ul class="absolute bg-white border border-base-200 left-0 mt-12 right-0 rounded-default top-0 shadow-xs text-sm z-10 dark:bg-base-800 dark:border-base-700">
-        {% for app in results %}
-            {% for model in app.models %}
-                <li>
-                    <a href="{{ model.admin_url }}" class="block px-3 py-2 truncate hover:text-base-700 dark:hover:text-base-200">
-                        {{ app.name }} <span class="align-text-top material-symbols-outlined md-18">arrow_right_alt</span> {{ model.name }}
-                    </a>
-                </li>
-            {% endfor %}
+    <ul class="absolute bg-white border border-base-200 flex flex-col leading-none left-0 mt-12 py-1 right-0 rounded-default top-0 shadow-xs text-sm z-10 dark:bg-base-800 dark:border-base-700">
+        {% for item in results %}
+            <li class="mx-1">
+                <a href="{{ item.model.admin_url }}"
+                   class="block items-center px-3 py-2 rounded-default truncate"
+                   x-on:mouseenter="currentIndex = {{ forloop.counter }}"
+                   x-bind:class="{'bg-base-100 text-base-700 dark:bg-base-700 dark:text-base-200': currentIndex === {{ forloop.counter }}}">
+                    {{ item.app.name }} <span class="text-font-subtle-light mx-1 dark:text-font-subtle-dark">/</span> {{ item.model.name }}
+                </a>
+            </li>
         {% endfor %}
     </ul>
 {% endif %}

unfold/templates/unfold/helpers/shortcut.html

@@ -0,0 +1,3 @@
+<kbd class="bg-base-50 border border-base-200 font-mono text-xs text-font-subtle-light rounded-xs px-1 dark:bg-white/[.04] dark:border-base-700 dark:text-font-subtle-dark">
+    {{ shortcut }}
+</kbd>

unfold/templates/unfold/helpers/site_branding.html

@@ -1,4 +1,4 @@
-<h1 id="site-name">
+<div id="site-name">
     {% if site_dropdown %}
         {{ site_header|default:_('Django administration') }}
     {% else %}
@@ -6,4 +6,4 @@
             {{ site_header|default:_('Django administration') }}
         </a>
     {% endif %}
-</h1>
+</div>

unfold/templates/unfold/helpers/tab_action.html

@@ -1,11 +1,12 @@
 {% load unfold %}
 
-<li class="{% action_item_classes action %}" {% if not link %}x-data="{actionDropdownOpen: false}" x-ref="actionDropdown{{ action.method_name }}"{% endif %}>
+<li class="{% action_item_classes action %}" {% if not link and action.items|length > 0 %}x-data="{actionDropdownOpen: false}" x-ref="actionDropdown{{ action.method_name }}"{% endif %}>
     <a {% if link %}href="{{ link }}"{% endif %}class="cursor-pointer flex grow items-center gap-2 px-3 py-2 text-left whitespace-nowrap" {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}
        {% if not link %}
            x-on:click="actionDropdownOpen = !actionDropdownOpen"
            x-bind:class="{'{% if action.variant.value == "default" %}text-primary-600 dark:text-primary-500{% endif %}': actionDropdownOpen }"
        {% endif %}>
+
         {% if action.icon %}
             <span class="material-symbols-outlined">
                 {{ action.icon }}
@@ -14,7 +15,7 @@
 
         {{ title }}
 
-        {% if not link %}
+        {% if not link and action.items|length > 0 %}
             <span class="border-l border-base-200 flex items-center select-none self-stretch ml-auto -mr-1 -my-2 pl-2
                          {% if action.variant.value == "primary" %}
                              border-primary-700 dark:border-primary-500
@@ -36,7 +37,7 @@
         {% endif %}
     </a>
 
-    {% if not link %}
+    {% if not link and action.items|length > 0 %}
         <template x-teleport="body">
             <nav x-anchor.bottom-end.offset.4="$refs.actionDropdown{{ action.method_name }}" class="absolute bg-white border border-base-200 flex flex-col -mr-px py-1 right-0 rounded-default shadow-lg top-10 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-transition x-show="actionDropdownOpen" x-on:click.outside="actionDropdownOpen = false">
                 {% for item in action.items %}

unfold/templates/unfold_crispy/field.html

@@ -3,21 +3,23 @@
 {% if field.is_hidden %}
     {{ field }}
 {% else %}
-    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="group {% if tag == "td" %}align-top border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden px-3 py-3 text-left dark:border-base-800 dark:before:text-font-important-dark {% if form_show_labels and forloop.parentloop.first %}border-t-0{% endif %}{% endif %} {% if field.errors %}errors{% endif %} {% if field_class %} {{ field_class }}{% endif %} {% if field|is_checkbox and tag == "td" %}flex flex-row gap-2 items-center{% else %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
+    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="group {% if tag == "td" %}align-top border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden px-3 py-3 text-left dark:border-base-800 dark:before:text-font-important-dark {% if form_show_labels and forloop.parentloop.first %}border-t-0{% endif %}{% endif %} {% if field.errors %}errors{% endif %} {% if field_class %} {{ field_class }}{% endif %} {% if field|is_checkbox and tag == "td" %}flex flex-row gap-2 items-center{% else %} {% if 'form-horizontal' in form_class %} border-b border-base-200 border-dashed flex flex-col -mx-3 px-3 py-2.5 lg:flex-row last:-mb-3 dark:border-base-800 last:border-b-0 {% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
     {% if field.label and not field|is_checkbox and form_show_labels %}
-        <label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="block font-semibold mb-2 text-font-important-light text-sm dark:text-font-important-dark {% if label_class %} {{ label_class }}{% endif %}">
+        <label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="block font-semibold text-font-important-light dark:text-font-important-dark {% if 'form-horizontal' in form_class %}mb-2 lg:mb-0 lg:min-w-56 {% if not field|is_checkbox and not field|is_radioselect and not field|is_checkboxselectmultiple %}lg:mt-2{% endif %} lg:w-56{% else %}mb-2{% endif %} {% if label_class %} {{ label_class }}{% endif %}">
             {{ field.label }}{% if field.field.required %} <span class="asteriskField">*</span>{% endif %}
         </label>
     {% endif %}
 
-    {% if field|is_checkboxselectmultiple or field|is_radioselect %}
-        {% include 'unfold_crispy/layout/radio_checkbox_select.html' %}
-    {% elif field|is_checkbox  %}
-        {% include 'unfold_crispy/layout/checkbox.html' %}
-    {% else %}
-        {% crispy_field field %}
+    <div class="grow">
+        {% if field|is_checkboxselectmultiple or field|is_radioselect %}
+            {% include 'unfold_crispy/layout/radio_checkbox_select.html' %}
+        {% elif field|is_checkbox  %}
+            {% include 'unfold_crispy/layout/checkbox.html' %}
+        {% else %}
+            {% crispy_field field %}
 
-        {% include 'unfold_crispy/layout/help_text_and_errors.html' %}
-    {% endif %}
+            {% include 'unfold_crispy/layout/help_text_and_errors.html' %}
+        {% endif %}
+    </div>
     </{% if tag %}{{ tag }}{% else %}div{% endif %}>
 {% endif %}

unfold/templates/unfold_crispy/layout/checkbox.html

@@ -1,11 +1,27 @@
 {% load crispy_forms_field unfold %}
 
 {% if form_show_labels %}
-    <label for="{{ field.id_for_label }}" class="flex flex-row gap-3 items-center {% if tag == "td" %}mt-9{% endif %}">
-        {% crispy_field field 'class' form_classes.switch %} <span>{{ field.label }}{% if field.field.required %} <span class="asteriskField">*</span>{% endif %}</span>
-    </label>
+    {% if 'form-horizontal' in form_class %}
+        <div class="flex flex-col min-h-[38px] lg:flex-row lg:gap-3 lg:items-center">
+            <div class="flex flex-row max-lg:flex-row-reverse max-lg:justify-end gap-3 lg:items-center lg:gap-0 lg:justify-start">
+                <label for="{{ field.id_for_label }}" class="flex flex-row font-semibold gap-3 items-center text-base-900 lg:min-w-56 lg:w-56 dark:text-base-100 {% if tag == "td" %}mt-9{% endif %}">
+                    <span>{{ field.label }}{% if field.field.required %} <span class="asteriskField">*</span>{% endif %}</span>
+                </label>
 
-    {% include 'unfold_crispy/layout/help_text_and_errors.html' %}
+                {% crispy_field field 'class' form_classes.switch %}
+            </div>
+
+            <div class="">
+                {% include 'unfold_crispy/layout/help_text_and_errors.html' %}
+            </div>
+        </div>
+    {% else %}
+        <label for="{{ field.id_for_label }}" class="flex flex-row font-semibold gap-3 items-center text-base-900 dark:text-base-100 {% if tag == "td" %}mt-9{% endif %}">
+            {% crispy_field field 'class' form_classes.switch %} <span>{{ field.label }}{% if field.field.required %} <span class="asteriskField">*</span>{% endif %}</span>
+        </label>
+
+        {% include 'unfold_crispy/layout/help_text_and_errors.html' %}
+    {% endif %}
 {% else %}
     {% with field=field|add_css_class:form_classes.switch %}
         {% if tag == "td" %}

unfold/templates/unfold_crispy/layout/fieldset.html

@@ -1,11 +1,11 @@
-<fieldset {% if fieldset.css_id %}id="{{ fieldset.css_id }}"{% endif %} class="fieldset group flex flex-col gap-5 grow rounded-default border-base-200 shadow-xs aligned border p-3 relative dark:border-base-800 {% if fieldset.css_class %} {{ fieldset.css_class }}{% endif %}" {{ fieldset.flat_attrs }}>
+<fieldset {% if fieldset.css_id %}id="{{ fieldset.css_id }}"{% endif %} class="fieldset group flex flex-col grow rounded-default border-base-200 shadow-xs aligned border p-3 relative dark:border-base-800 {% if fieldset.css_class %} {{ fieldset.css_class }}{% endif %}" {{ fieldset.flat_attrs }}>
     {% if legend %}
-        <legend class="border-b border-base-200 font-semibold float-left pb-3 -mx-3 px-3 text-[15px] text-font-important-light dark:text-font-important-dark dark:border-base-800">
+        <legend class="border-b border-base-200 font-semibold float-left {% if 'form-horizontal' not in form_class %}mb-5{% endif %} -mx-3 pb-3 px-3 text-[15px] text-font-important-light dark:text-font-important-dark dark:border-base-800">
             {{ legend|safe }}
         </legend>
     {% endif %}
 
-    <div class="flex flex-col gap-5">
+    <div class="flex flex-col {% if 'form-horizontal' not in form_class %} gap-5{% endif %}">
         {{ fields|safe }}
     </div>
 </fieldset>