django-unfold 0.40.0__py3-none-any.whl → 0.41.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -12,6 +12,21 @@ window.addEventListener("load", (e) => {
   warnWithoutSaving();
 });
 
+/*************************************************************
+ * Alpine.sort.js callback after sorting
+ *************************************************************/
+const sortRecords = (e) => {
+  const orderingField = e.from.dataset.orderingField;
+
+  const weightInputs = Array.from(
+    e.from.querySelectorAll(`.has_original input[name$=-${orderingField}]`)
+  );
+
+  weightInputs.forEach((input, index) => {
+    input.value = index;
+  });
+};
+
 /*************************************************************
  * Warn without saving
  *************************************************************/
@@ -120,15 +135,26 @@ const dateTimeShortcutsOverlay = () => {
  * File upload path
  *************************************************************/
 const fileInputUpdatePath = () => {
-  Array.from(document.querySelectorAll("input[type=file]")).forEach((input) => {
-    input.addEventListener("change", (e) => {
-      const parts = e.target.value.split("\\");
-      const placeholder =
-        input.parentNode.parentNode.parentNode.querySelector(
-          "input[type=text]"
-        );
-      placeholder.setAttribute("value", parts[parts.length - 1]);
-    });
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (const input of document.querySelectorAll("input[type=file]")) {
+          input.addEventListener("change", (e) => {
+            const parts = e.target.value.split("\\");
+            const placeholder =
+              input.parentNode.parentNode.parentNode.querySelector(
+                "input[type=text]"
+              );
+            placeholder.setAttribute("value", parts[parts.length - 1]);
+          });
+        }
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
   });
 };
 
@@ -153,7 +179,7 @@ const submitSearch = () => {
       }, {});
 
     if (searchString) {
-      queryParams["q"] = searchString;
+      queryParams["q"] = encodeURIComponent(searchString);
     }
 
     const result = Object.entries(queryParams)

unfold/static/unfold/js/select2.init.js

@@ -10,6 +10,6 @@
   };
 
   $(function () {
-    $(".admin-autocomplete").djangoCustomSelect2();
+    $(".unfold-admin-autocomplete.admin-autocomplete").djangoCustomSelect2();
   });
 }

unfold/styles.css

@@ -60,6 +60,10 @@ html {
   @apply text-red-600;
 }
 
+.sortable-ghost {
+  @apply opacity-50;
+}
+
 /*******************************************************
  Icons
  *******************************************************/
@@ -287,7 +291,7 @@ h3 span:nth-child(3) {
  Autocomplete
  *******************************************************/
 .select2.select2-container {
-  @apply bg-white border max-w-2xl relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
+  @apply bg-white border max-w-2xl !min-h-9.5 relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
 }
 
 .errors .select2.select2-container {

unfold/templates/admin/app_index.html

@@ -10,7 +10,7 @@
     {% block breadcrumbs %}
         <div class="px-12">
             <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

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

@@ -8,7 +8,7 @@
     {% block breadcrumbs %}
         <div class="px-12">
             <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/base.html

@@ -18,7 +18,7 @@
                     {% block breadcrumbs %}
                         <div class="px-4 lg:px-12">
                             <div class="container mb-12 mx-auto -my-3">
-                                <ul class="flex">
+                                <ul class="flex flex-wrap">
                                     {% url 'admin:index' as link %}
                                     {% trans 'Home' as name %}
                                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/change_form.html

@@ -13,7 +13,7 @@
     {% block breadcrumbs %}
         <div class="px-4 lg:px-12">
             <div class="container mb-6 mx-auto -my-3 lg:mb-12">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/change_list.html

@@ -26,7 +26,7 @@
     {% block breadcrumbs %}
         <div class="px-4 lg:px-12">
             <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mb-6 mx-auto -my-3 lg:mb-12">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
@@ -62,60 +62,62 @@
         {% endif %}
 
         <div class="flex -mx-4 module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
-            <div class="changelist-form-container flex-grow min-w-0 px-4" x-data="{ filterOpen: false }">
-                {% block date_hierarchy %}
-                    {% if cl.date_hierarchy %}
-                        {% date_hierarchy cl %}
+            <div class="changelist-form-container flex flex-row flex-grow gap-4 min-w-0 px-4" x-data="{ filterOpen: false }">
+                <div class="flex-grow min-w-0">
+                    {% block date_hierarchy %}
+                        {% if cl.date_hierarchy %}
+                            {% date_hierarchy cl %}
+                        {% endif %}
+                    {% endblock %}
+
+                    {% if cl.model_admin.list_before_template %}
+                        {% include cl.model_admin.list_before_template %}
                     {% endif %}
-                {% endblock %}
 
-                {% if cl.model_admin.list_before_template %}
-                    {% include cl.model_admin.list_before_template %}
-                {% endif %}
+                    <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
+                        {% csrf_token %}
 
-                <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
-                    {% csrf_token %}
+                        {% if cl.formset %}
+                            <div>{{ cl.formset.management_form }}</div>
+                        {% endif %}
 
-                    {% if cl.formset %}
-                        <div>{{ cl.formset.management_form }}</div>
-                    {% endif %}
+                        {% block result_list %}
+                            {% if actions_on_top %}
+                                {% if cl.search_fields or action_form or cl.has_filters %}
+                                    <div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
+                                        {% block search %}
+                                            {% search_form cl %}
+                                        {% endblock %}
 
-                    {% block result_list %}
-                        {% if actions_on_top %}
-                            {% if cl.search_fields or action_form or cl.has_filters %}
-                                <div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
-                                    {% block search %}
-                                        {% search_form cl %}
-                                    {% endblock %}
-
-                                    {% if action_form %}
-                                        {% admin_actions %}
-                                    {% endif %}
-
-                                    {% block filters %}
-                                        {% if cl.has_filters %}
-                                            <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
-                                                {% trans "Filters" %}
-
-                                                <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
-                                            </a>
+                                        {% if action_form %}
+                                            {% admin_actions %}
                                         {% endif %}
-                                    {% endblock %}
-                                </div>
+
+                                        {% block filters %}
+                                            {% if cl.has_filters %}
+                                                <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
+                                                    {% trans "Filters" %}
+
+                                                    <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
+                                                </a>
+                                            {% endif %}
+                                        {% endblock %}
+                                    </div>
+                                {% endif %}
                             {% endif %}
-                        {% endif %}
 
-                        {% unfold_result_list cl %}
+                            {% unfold_result_list cl %}
 
-                        {% block pagination %}
-                            {% pagination cl %}
+                            {% block pagination %}
+                                {% pagination cl %}
+                            {% endblock %}
                         {% endblock %}
-                    {% endblock %}
-                </form>
+                    </form>
 
-                {% if cl.model_admin.list_after_template %}
-                    {% include cl.model_admin.list_after_template %}
-                {% endif %}
+                    {% if cl.model_admin.list_after_template %}
+                        {% include cl.model_admin.list_after_template %}
+                    {% endif %}
+                </div>
 
                 {% if cl.has_filters %}
                     {% include "unfold/change_list_filter.html" %}

unfold/templates/admin/delete_confirmation.html

@@ -10,9 +10,9 @@
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation{% endblock %}
 
 {% block breadcrumbs %}
-    <div class="px-12">
-        <div class="container mb-12 mx-auto -my-3">
-            <ul class="flex">
+    <div class="px-4 lg:px-12">
+        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
+            <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}
                 {% trans 'Home' as name %}
                 {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
@@ -95,12 +95,7 @@
                         <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
                     {% endif %}
 
-
-                    <a href="#" class="border cancel-link font-medium hidden mb-3 px-3 py-2 rounded-md w-full hover:bg-gray-50 lg:block lg:mb-0 lg:mr-3 lg:w-auto dark:border-gray-700 dark:text-font-default-dark dark:hover:text-gray-200 dark:hover:bg-gray-900">
-                        {% translate "No, take me back" %}
-                    </a>
-
-                    <input type="submit" value="{% translate 'Yes, I’m sure' %}" class="bg-red-600 cursor-pointer font-medium ml-auto px-3 py-2 rounded-md text-white dark:bg-red-500/20 dark:text-red-500">
+                    {% include "unfold/helpers/delete_submit_line.html" %}
                 </div>
             </form>
         </div>

unfold/templates/admin/delete_selected_confirmation.html

@@ -10,9 +10,9 @@
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation delete-selected-confirmation{% endblock %}
 
 {% block breadcrumbs %}
-    <div class="px-12">
-        <div class="container mb-12 mx-auto -my-3">
-            <ul class="flex">
+    <div class="px-4 lg:px-12">
+        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
+            <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}
                 {% trans 'Home' as name %}
                 {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
@@ -89,11 +89,7 @@
                     <input type="hidden" name="action" value="delete_selected">
                     <input type="hidden" name="post" value="yes">
 
-                    <a href="#" class="border cancel-link font-medium hidden mb-3 px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:mb-0 lg:mr-3 lg:w-auto dark:border-gray-700 dark:text-font-default-dark dark:hover:text-gray-200 dark:hover:bg-gray-900">
-                        {% translate "No, take me back" %}
-                    </a>
-
-                    <input type="submit" value="{% translate 'Yes, I’m sure' %}" class="bg-red-600 cursor-pointer font-medium ml-auto px-3 py-2 rounded-md text-white dark:bg-red-500/20 dark:text-red-500">
+                    {% include "unfold/helpers/delete_submit_line.html" %}
                 </div>
             </form>
         </div>

unfold/templates/admin/edit_inline/stacked.html

@@ -13,15 +13,24 @@
         {{ inline_admin_formset.formset.management_form }}
         {% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}
 
+        <div class="border border-gray-200 mb-6 overflow-hidden rounded-md shadow-sm w-full dark:border-gray-800 *:border-t first:*:border-t-0 *:border-gray-200 dark:*:border-gray-800"
+             {% if inline_admin_formset.opts.ordering_field %}
+                 data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}" x-on:end="sortRecords" x-sort.ghost
+             {% endif %}>
 
-        <div class="border border-gray-200 mb-6 overflow-hidden rounded-md shadow-sm w-full dark:border-gray-800">
             {% for inline_admin_form in inline_admin_formset %}
-                <div 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 %}">
+                <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 not inline_admin_formset.opts.hide_title or inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
-                        <h3 class="bg-gray-50 border-b {% if not forloop.first %}border-t{% endif %} border-gray-200 flex font-medium items-center mb-3 px-3 py-2 text-sm dark:bg-white/[.02] dark:border-gray-800">
-                            <span class="mr-2">
-                                {{ inline_admin_formset.opts.verbose_name|capfirst }}:
-                            </span>
+                        <h3 class="bg-gray-50 border-b border-gray-200 flex font-medium items-center gap-2 mb-3 px-3 py-2 text-sm dark:bg-white/[.02] dark:border-gray-800">
+                            {% 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>
+                                {% else %}
+                                    <span class="-mr-2" x-sort:handle></span>
+                                {% endif %}
+                            {% endif %}
+
+                            {{ inline_admin_formset.opts.verbose_name|capfirst }}:
 
                             <span class="inline_label font-semibold text-font-important-light dark:text-font-important-dark">
                                 {% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}

unfold/templates/admin/edit_inline/tabular.html

@@ -16,12 +16,17 @@
             {{ inline_admin_formset.formset.non_form_errors }}
 
             <div class="border border-gray-200 mb-6 overflow-x-auto rounded-md shadow-sm dark:border-gray-800" data-simplebar data-simplebar-auto-hide="false">
-                <table class="border-spacing-none border-separate w-full">
+                <table class="border-spacing-none border-separate w-full"
+                       {% if inline_admin_formset.opts.ordering_field %}
+                           data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}"
+                           x-on:end="sortRecords"
+                           x-sort.ghost
+                       {% endif %}>
                     <thead class="hidden lg:table-header-group">
                         <tr>
                             {% for field in inline_admin_formset.fields %}
                                 {% if not field.widget.is_hidden %}
-                                    <th class="column-{{ field.name }}{% if field.required %} required{% endif %} align-middle border-b border-gray-200 font-semibold px-3 py-2 text-left text-font-important-light text-sm whitespace-nowrap dark:text-font-important-dark dark:border-gray-800">
+                                    <th class="column-{{ field.name }}{% if field.required %} required{% endif %} align-middle border-b border-gray-200 font-semibold px-3 py-2 text-left text-font-important-light text-sm whitespace-nowrap dark:text-font-important-dark dark:border-gray-800 {% if inline_admin_formset.opts.ordering_field and field.name == inline_admin_formset.opts.ordering_field and inline_admin_formset.opts.hide_ordering_field %}hidden{% endif %}">
                                         <span class="flex flex-row items-center">
                                             {{ field.label|capfirst }}
 
@@ -41,8 +46,8 @@
                         </tr>
                     </thead>
 
-                    <tbody>
-                        {% for inline_admin_form in inline_admin_formset %}
+                    {% for inline_admin_form in inline_admin_formset %}
+                        <tbody x-sort:item>
                             {% if inline_admin_form.form.non_field_errors %}
                                 <tr class="row-form-errors group inline-tabular">
                                     <td colspan="{{ inline_admin_form|cell_count }}">
@@ -118,20 +123,32 @@
                                             {% with is_last_col=forloop.last %}
                                                 {% for field in line %}
                                                     {% if field.is_readonly or not field.field.is_hidden %}
-                                                        <td{% if field.field.name %} class="field-{{ field.field.name }} group field-tabular {% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:pr-4 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800 {% if field.field.is_hidden %} !hidden{% endif %}"{% endif %} data-label="{{ field.field.label }}">
-                                                            {% if field.is_readonly %}
-                                                                {% include "unfold/helpers/field_readonly_value.html" with tabular=1 %}
-                                                            {% else %}
-                                                                {{ field.field }}
-
-                                                                {% if field.field.errors|length > 0 %}
-                                                                    <div class="mt-1 text-red-600 text-sm dark:text-red-500">
-                                                                        {% for error in field.field.errors %}
-                                                                            {{ error }}
-                                                                        {% endfor %}
-                                                                    </div>
+                                                        <td{% if field.field.name %} class="field-{{ field.field.name }} group field-tabular {% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:pr-4 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800 {% if field.field.is_hidden %} !hidden{% endif %} {% if inline_admin_formset.opts.ordering_field and field.field.name == inline_admin_formset.opts.ordering_field and inline_admin_formset.opts.hide_ordering_field %}!hidden{% endif %}"{% endif %} data-label="{{ field.field.label }}">
+                                                            <div class="flex flex-row gap-3 items-center">
+                                                                {% if forloop.parentloop.counter == 1 and forloop.counter == 1 %}
+                                                                    {% 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>
+                                                                        {% else %}
+                                                                            <span class="-mr-3" x-sort:handle></span>
+                                                                        {% endif %}
+                                                                    {% endif %}
                                                                 {% endif %}
-                                                            {% endif %}
+
+                                                                {% if field.is_readonly %}
+                                                                    {% include "unfold/helpers/field_readonly_value.html" with tabular=1 %}
+                                                                {% else %}
+                                                                    {{ field.field }}
+
+                                                                    {% if field.field.errors|length > 0 %}
+                                                                        <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+                                                                            {% for error in field.field.errors %}
+                                                                                {{ error }}
+                                                                            {% endfor %}
+                                                                        </div>
+                                                                    {% endif %}
+                                                                {% endif %}
+                                                            </div>
                                                         </td>
                                                     {% endif %}
                                                 {% endfor %}
@@ -152,8 +169,8 @@
                                     {% endif %}
                                 {% endwith %}
                             </tr>
-                        {% endfor %}
-                    </tbody>
+                        </tbody>
+                    {% endfor %}
                 </table>
             </div>
         </fieldset>

unfold/templates/admin/object_history.html

@@ -4,7 +4,7 @@
 {% block breadcrumbs %}
     <div class="px-4 lg:px-12">
         <div class="container mb-12 mx-auto -my-3">
-            <ul class="flex">
+            <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}
                 {% trans 'Home' as name %}
                 {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/submit_line.html

@@ -1,8 +1,8 @@
 {% load i18n admin_urls %}
 
-<div {% if not is_popup %}id="submit-row"{% endif %} class="relative z-20 {% if not is_popup %} mt-20 lg:mt-8{% endif %}">
-    <div class="{% if not is_popup %}bottom-0 fixed left-0 right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}"{% endif %}>
-        <div class="bg-white dark:bg-gray-900 {% if not is_popup %}border-t px-4 py-4 relative scrollable-top lg:px-12 dark:border-gray-800{% endif %}">
+<div {% if not is_popup %}id="submit-row"{% endif %} class="relative z-20 {% if not is_popup %} mt-8{% endif %}">
+    <div class="{% if not is_popup %}lg:bottom-0 lg:fixed lg:left-0 lg:right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}"{% endif %}>
+        <div class="bg-white dark:bg-gray-900 {% if not is_popup %}lg:border-t lg:py-4 relative scrollable-top lg:px-12 dark:border-gray-800{% endif %}">
             <div class="container flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse">
                 {% block submit-row %}
                     {% if show_save %}
@@ -18,7 +18,7 @@
                     {% endfor %}
 
                     {% if show_save_and_continue %}
-                        <button type="submit" name="_continue" class="border font-medium hidden px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        <button type="submit" name="_continue" class="border font-medium px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  dark:hover:text-gray-200 dark:hover:bg-gray-900">
                             {% if can_change %}
                                 {% translate 'Save and continue editing' %}
                             {% else %}
@@ -30,19 +30,19 @@
                     {% if show_close %}
                         {% 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 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        <a href="{% add_preserved_filters changelist_url %}" class="border font-medium px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  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 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  dark:hover:text-gray-200 dark:hover:bg-gray-900">
+                        <button type="submit" name="_addanother" class="border font-medium px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  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 hidden px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  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 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700  dark:hover:text-gray-200 dark:hover:bg-gray-900">
                             {% translate 'Save as new' %}
                         </button>
                     {% endif %}
@@ -51,7 +51,7 @@
                         {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}
 
                         <p class="deletelink-box mr-auto w-full lg:w-auto">
-                            <a href="{% add_preserved_filters delete_url %}" class="block border border-red-500 font-medium px-3 py-2 rounded-md text-center text-red-500 whitespace-nowrap dark:border-transparent dark:bg-red-500/20 dark:text-red-500">
+                            <a href="{% add_preserved_filters delete_url %}" class="bg-red-600 flex items-center justify-center font-medium h-9.5 ml-auto px-3 py-2 rounded-md text-white dark:bg-red-500/20 dark:text-red-500">
                                 {% translate "Delete" %} {{ opts.verbose_name }}
                             </a>
                         </p>

unfold/templates/registration/password_change_done.html

@@ -7,7 +7,7 @@
     {% block breadcrumbs %}
         <div class="px-12">
             <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/registration/password_change_form.html

@@ -7,7 +7,7 @@
     {% block breadcrumbs %}
         <div class="px-12">
             <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/unfold/change_list_filter.html

@@ -1,11 +1,11 @@
 {% load i18n admin_list %}
 
-<div id="changelist-filter" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 flex fixed inset-0 z-50" x-show="filterOpen">
-    <label for="show-filters" id="changelist-filter-close" class="flex-grow"></label>
+<div id="changelist-filter" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 flex inset-0 z-50 fixed {% if not cl.model_admin.list_filter_sheet %}2xl:bg-transparent 2xl:relative 2xl:!block 2xl:z-10{% endif %}" x-show="filterOpen">
+    <label for="show-filters" id="changelist-filter-close" class="flex-grow {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = false"></label>
 
-    <div class="bg-white flex mx-4 my-4 overflow-hidden rounded shadow-sm w-96 dark:bg-gray-800" x-on:click.outside="filterOpen = false">
+    <div class="bg-white flex m-4 overflow-hidden rounded shadow-sm w-80 dark:bg-gray-800 {% if not cl.model_admin.list_filter_sheet %} 2xl:border 2xl:sticky 2xl:top-4 2xl:dark:border-gray-800 2xl:bg-transparent 2xl:dark:!bg-transparent 2xl:m-0{% endif %}">
         <div class="flex-grow h-full overflow-auto relative">
-            <h3 class="border-b flex font-semibold mb-6 px-6 py-4 text-font-important-light text-sm dark:text-font-important-dark dark:border-gray-700">
+            <h3 class="border-b flex font-semibold mb-4 px-4 py-4 text-font-important-light text-sm dark:text-font-important-dark dark:border-gray-800">
                 {% trans "Filter" %}
 
                 {% if cl.is_facets_optional %}
@@ -30,15 +30,14 @@
                     </a>
                 {% endif %}
 
-                <a class="cursor-pointer material-symbols-outlined md-18 ml-auto pl-4 text-gray-400 transition-colors hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400" 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-500 dark:text-gray-500 dark:hover:text-gray-400 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = false">
                     close
                 </a>
             </h3>
 
-            <div class="px-6{% if cl.model_admin.list_filter_submit %} pb-16{% endif %}">
+            <div class="px-4{% if cl.model_admin.list_filter_submit %} {% 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 %}
@@ -48,13 +47,12 @@
                         {% endif %}
                 {% endif %}
 
-
                 {% for spec in cl.filter_specs %}
                     {% admin_list_filter cl spec %}
                 {% endfor %}
 
                 {% if cl.model_admin.list_filter_submit %}
-                    <div class="bg-gray-50 border-gray-200 border-t bottom-4 fixed px-6 py-3 right-4 rounded-b w-96 dark:bg-gray-700 dark:border-gray-600">
+                    <div class="bottom-4 absolute left-4 right-4 {% if not cl.model_admin.list_filter_sheet %}2xl:left-0 2xl:right-0 2xl:relative 2xl:mt-8{% endif %}">
                         <button type="submit" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md self-end text-sm text-white w-full">
                             {% trans "Apply Filters" %}
                         </button>

unfold/templates/unfold/helpers/delete_submit_line.html

@@ -0,0 +1,11 @@
+{% load i18n %}
+
+<div class="flex flex-col gap-3 items-center w-full lg:flex-row">
+    <a href="#" class="border cancel-link flex items-center justify-center font-medium px-3 py-2 rounded-md w-full hover:bg-gray-50 lg:block lg:mb-0 lg:w-auto dark:border-gray-700 dark:text-font-default-dark dark:hover:text-gray-200 dark:hover:bg-gray-900">
+        {% translate "No, take me back" %}
+    </a>
+
+    <button type="submit" class="bg-red-600 cursor-pointer flex items-center justify-center font-medium h-9.5 ml-0 px-3 py-2 rounded-md text-white w-full lg:ml-auto lg:w-auto dark:bg-red-500/20 dark:text-red-500">
+        {% translate "Yes, I’m sure" %}
+    </button>
+</div>

unfold/templates/unfold/helpers/display_header.html

@@ -2,9 +2,14 @@
 
 <span class="flex gap-4 items-center">
     {% if value.3 and value.3.path %}
-        <span class="bg-center bg-cover bg-white flex font-medium justify-center overflow-hidden dark:bg-gray-900 dark:border-gray-700 {% if value.3.squared %}rounded-sm{% else %}rounded-full{% endif %}{% if not value.3.borderless %} border{% endif %}{% if not value.3.width or not value.3.height %} h-8 max-w-8 min-w-8{% endif %}">
-            <img loading="lazy" src="{{ value.3.path }}" class="max-w-none object-cover" {% if value.3.width %}width="{{ value.3.width }}"{% endif %} {% if value.3.height %}height="{{ value.3.height }}"{% endif %} alt="{% trans "Record picture" %}" />
-        </span>
+        {% if value.3.as_background %}
+            <span class="block bg-center bg-contain bg-no-repeat {% if not value.3.width %}w-16{% endif %} {% if not value.3.height %}h-12{% endif %}" style="background-image: url({{ value.3.path }}); {% if value.3.height %}height: {{ value.3.height }}px;{% endif %} {% if value.3.width %}width: {{ value.3.width }}px;{% endif %}">
+            </span>
+        {% else %}
+            <span class="bg-center bg-cover bg-white flex font-medium justify-center overflow-hidden dark:bg-gray-900 dark:border-gray-700 {% if value.3.squared %}rounded-sm{% else %}rounded-full{% endif %}{% if not value.3.borderless %} border{% endif %}{% if not value.3.width or not value.3.height %} h-8 max-w-8 min-w-8{% endif %}">
+                <img loading="lazy" src="{{ value.3.path }}" class="max-w-none object-cover" {% if value.3.width %}width="{{ value.3.width }}"{% endif %} {% if value.3.height %}height="{{ value.3.height }}"{% endif %} alt="{% trans "Record picture" %}" />
+            </span>
+        {% endif %}
     {% elif value.2 %}
         <span class="bg-white border flex font-medium h-8 justify-center items-center rounded-full text-xs uppercase w-8 dark:bg-gray-900 dark:border-gray-700">
             {{ value.2 }}

unfold/templates/unfold/helpers/field_readonly_value.html

@@ -1 +1 @@
-<div class="readonly max-w-4xl py-2 text-sm *:rounded-md {% if not adminform.model_admin.compressed_fields and not field.is_image %}bg-gray-50 border font-medium 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 {% if field.is_json %}max-w-4xl{% else %}max-w-2xl{% endif %} py-2 text-sm *:rounded-md {% if not adminform.model_admin.compressed_fields and not field.is_image %}bg-gray-50 border font-medium 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

@@ -1,4 +1,6 @@
+
 <div class="form-row
+            {% for field in line %}{% if inline_admin_formset.opts.ordering_field and field.field.name == inline_admin_formset.opts.ordering_field and inline_admin_formset.opts.hide_ordering_field %} hidden{% endif %}{% endfor %}
             {% if adminform.model_admin.compressed_fields %} border-b border-gray-200 -mx-3 px-3 pt-3 first:pt-0 dark:border-gray-800 last:border-b-0{% endif %}
             {% if not line.fields|length == 1 %} flex flex-row flex-wrap gap-x-8{% endif %}
             {% if not line.has_visible_field %} hidden{% endif %}