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

unfold/static/unfold/js/app.js

@@ -135,27 +135,33 @@ const dateTimeShortcutsOverlay = () => {
  * File upload path
  *************************************************************/
 const fileInputUpdatePath = () => {
-  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]);
-          });
-        }
+  const checkInputChanged = () => {
+    for (const input of document.querySelectorAll("input[type=file]")) {
+      if (input.hasChangeListener) {
+        continue;
       }
+
+      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]);
+      });
+
+      input.hasChangeListener = true;
     }
-  });
+  };
 
-  observer.observe(document.body, {
+  new MutationObserver(() => {
+    checkInputChanged();
+  }).observe(document.body, {
     childList: true,
     subtree: true,
   });
+
+  checkInputChanged();
 };
 
 /*************************************************************

unfold/styles.css

@@ -443,7 +443,7 @@ h3 span:nth-child(3) {
 }
 
 /*******************************************************
- Collapsed
+ Fieldset collapsible
  *******************************************************/
 fieldset.collapsed > div {
   display: none;
@@ -462,6 +462,19 @@ fieldset.collapsed .collapse-toggle {
   @apply inline;
 }
 
+fieldset details > summary {
+  @apply list-none
+}
+
+fieldset details > summary:after {
+  @apply material-symbols-outlined absolute right-3 top-3.5;
+  content: "expand_more";
+}
+
+fieldset details[open] > summary:after {
+  @apply rotate-180;
+}
+
 /*******************************************************
  Calendar
  *******************************************************/

unfold/templates/admin/base.html

@@ -16,7 +16,7 @@
             {% if not is_popup %}
                 {% spaceless %}
                     {% block breadcrumbs %}
-                        <div class="px-4 lg:px-12">
+                        <div class="px-4 lg:px-8">
                             <div class="container mb-12 mx-auto -my-3">
                                 <ul class="flex flex-wrap">
                                     {% url 'admin:index' as link %}
@@ -31,14 +31,14 @@
             {% endif %}
 
             {% block messages %}
-                <div class="px-4 lg:px-12">
+                <div class="px-4 lg:px-8">
                     <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mx-auto">
                         {% include "unfold/helpers/messages.html" %}
                     </div>
                 </div>
             {% endblock messages %}
 
-            <div class="px-4 pb-12 lg:px-12">
+            <div class="px-4 pb-8 lg:px-8">
                 <div id="content" class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mx-auto {% block coltype %}colM{% endblock %}">
                     {% if cl %}
                         {% tab_list "changelist" cl.opts %}

unfold/templates/admin/change_form.html

@@ -11,7 +11,7 @@
 
 {% if not is_popup %}
     {% block breadcrumbs %}
-        <div class="px-4 lg:px-12">
+        <div class="px-4 lg:px-8">
             <div class="container mb-6 mx-auto -my-3 lg:mb-12">
                 <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
@@ -61,6 +61,10 @@
     <div id="content-main">
         {% 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 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>
             {% csrf_token %}
 
@@ -116,6 +120,10 @@
             </div>
         </form>
 
+        {% if adminform.model_admin.change_form_outer_after_template %}
+            {% include adminform.model_admin.change_form_outer_after_template %}
+        {% endif %}
+
         {% block form_after %}{% endblock %}
     </div>
 {% endblock %}

unfold/templates/admin/change_list.html

@@ -24,7 +24,7 @@
 
 {% if not is_popup %}
     {% block breadcrumbs %}
-        <div class="px-4 lg:px-12">
+        <div class="px-4 lg:px-8">
             <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mb-6 mx-auto -my-3 lg:mb-12">
                 <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}

unfold/templates/admin/date_hierarchy.html

@@ -1,12 +1,12 @@
 {% if show %}
-    <div class="xfull mb-4">
-        <ul class="toplinks flex -mx-2 text-gray-500 text-sm">
+    <div class="mb-4">
+        <ul class="toplinks flex -mx-2 text-sm">
             {% block date-hierarchy-toplinks %}
                 {% block date-hierarchy-back %}
                     {% if back %}
                         <li class="date-back px-2">
-                            <a href="{{ back.link }}" class="flex items-center hover:text-primary-600">
-                                <span class="material-symbols-outlined md-16 mr-2 text-gray-400">arrow_back</span> {{ back.title }}
+                            <a href="{{ back.link }}" class="flex group items-center hover:text-primary-600 dark:hover:text-primary-500">
+                                <span class="material-symbols-outlined md-16 mr-2 text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500">arrow_back</span> {{ back.title }}
                             </a>
                         </li>
                     {% endif %}
@@ -16,7 +16,7 @@
                     {% for choice in choices %}
                         <li class="px-2">
                             {% if choice.link %}
-                                <a href="{{ choice.link }}" class="hover:text-primary-600">
+                                <a href="{{ choice.link }}" class="hover:text-primary-600 dark:hover:text-primary-500">
                             {% endif %}
 
                             {{ choice.title }}

unfold/templates/admin/delete_confirmation.html

@@ -10,7 +10,7 @@
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation{% endblock %}
 
 {% block breadcrumbs %}
-    <div class="px-4 lg:px-12">
+    <div class="px-4 lg:px-8">
         <div class="container mb-6 mx-auto -my-3 lg:mb-12">
             <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}

unfold/templates/admin/delete_selected_confirmation.html

@@ -10,7 +10,7 @@
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation delete-selected-confirmation{% endblock %}
 
 {% block breadcrumbs %}
-    <div class="px-4 lg:px-12">
+    <div class="px-4 lg:px-8">
         <div class="container mb-6 mx-auto -my-3 lg:mb-12">
             <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}

unfold/templates/admin/edit_inline/stacked.html

@@ -1,8 +1,10 @@
 {% load admin_urls i18n unfold %}
 
 <div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group" data-inline-type="stacked" data-inline-formset="{{ inline_admin_formset.inline_formset_data }}" {% if inline_admin_formset.opts.tab %}x-show="activeTab == '{{ inline_admin_formset.opts.verbose_name|slugify }}'"{% else %}x-show="activeTab == 'general'"{% endif %}>
-    <fieldset class="module {{ inline_admin_formset.classes }}">
-        <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %}">
+    <fieldset class="module relative {{ inline_admin_formset.classes }}" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
+        {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
+
+        <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
             {% if inline_admin_formset.formset.max_num == 1 %}
                 {{ inline_admin_formset.opts.verbose_name|capfirst }}
             {% else %}
@@ -10,6 +12,8 @@
             {% endif %}
         </h2>
 
+        {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
+
         {{ inline_admin_formset.formset.management_form }}
         {% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}
 
@@ -92,5 +96,7 @@
                 </div>
             {% endfor %}
         </div>
+
+        {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
     </fieldset>
 </div>

unfold/templates/admin/edit_inline/tabular.html

@@ -4,8 +4,10 @@
     <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
         {{ inline_admin_formset.formset.management_form }}
 
-        <fieldset class="module {{ inline_admin_formset.classes }} min-w-0">
-            <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %}">
+        <fieldset class="module relative {{ inline_admin_formset.classes }} min-w-0" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
+            {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
+
+            <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
                 {% if inline_admin_formset.formset.max_num == 1 %}
                     {{ inline_admin_formset.opts.verbose_name|capfirst }}
                 {% else %}
@@ -13,6 +15,8 @@
                 {% endif %}
             </h2>
 
+            {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
+
             {{ 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">
@@ -173,6 +177,8 @@
                     {% endfor %}
                 </table>
             </div>
+
+            {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
         </fieldset>
     </div>
 </div>

unfold/templates/admin/nav_sidebar.html

@@ -1,22 +1,13 @@
 {% load i18n %}
 
 <div class="relative z-50">
-    <div @click="sidebarDesktopOpen = !sidebarDesktopOpen"
-         hx-get="{% url "admin:toggle_sidebar" %}"
-         hx-swap="none"
-         class="bg-white border cursor-pointer fixed h-6 hidden items-center justify-center rounded-full text-gray-500 top-5 -translate-x-1/2 w-6 z-50 xl:flex dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
-         :class="{'ml-6 rotate-180': !sidebarDesktopOpen, 'ml-72': sidebarDesktopOpen}">
-        <span class="material-symbols-outlined md-16">
-            first_page
-        </span>
-    </div>
-
     <div @click="sidebarMobileOpen = !sidebarMobileOpen"
          class="fixed bottom-0 bg-gray-700 cursor-pointer flex items-center left-0 mb-2 ml-2 justify-center px-2 py-1 rounded-full shadow-sm text-xs text-white uppercase z-50 xl:hidden"
          :class="{'ml-72 -translate-x-1/2': sidebarMobileOpen}">
         {% trans "Menu" %}
     </div>
 
+
     <div :class="{'xl:block': sidebarDesktopOpen, 'xl:hidden': !sidebarDesktopOpen, 'max-xl:fixed': sidebarMobileOpen, 'hidden': !sidebarMobileOpen }">
         {% include "unfold/helpers/navigation.html" %}
     </div>

unfold/templates/admin/object_history.html

@@ -2,7 +2,7 @@
 {% load i18n admin_urls %}
 
 {% block breadcrumbs %}
-    <div class="px-4 lg:px-12">
+    <div class="px-4 lg:px-8">
         <div class="container mb-12 mx-auto -my-3">
             <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}

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-8{% endif %}">
+<div {% if not is_popup %}id="submit-row"{% endif %} class="relative mt-16 z-20">
     <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="bg-white dark:bg-gray-900 {% if not is_popup %}lg:border-t lg:py-4 relative scrollable-top lg:px-8 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 %}

unfold/templates/unfold/change_list_filter.html

@@ -1,4 +1,4 @@
-{% load i18n admin_list %}
+{% load i18n admin_list unfold %}
 
 <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>
@@ -38,13 +38,7 @@
             <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 %}
-
-                        {% if request.GET.o %}
-                            <input type="hidden" name="o" value="{{ request.GET.o }}">
-                        {% endif %}
+                        {% preserve_filters %}
                 {% endif %}
 
                 {% for spec in cl.filter_specs %}
@@ -52,11 +46,9 @@
                 {% endfor %}
 
                 {% if cl.model_admin.list_filter_submit %}
-                    <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>
-                    </div>
+                    <button type="submit" class="bg-primary-600 block border border-transparent font-medium mb-4 mt-8 px-3 py-2 rounded-md self-end text-sm text-white w-full">
+                        {% trans "Apply Filters" %}
+                    </button>
                     </form>
                 {% endif %}
             </div>

unfold/templates/unfold/components/card.html

@@ -1,6 +1,6 @@
 <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-semibold mb-6 -mt-2 -mx-6 pb-4 px-6 text-font-important-light dark:text-font-important-dark dark:border-gray-800">
+        <h2 class="bg-gray-50 border-b font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-font-important-light dark:text-font-important-dark dark:border-gray-800 dark:bg-white/[.02]">
             {{ title }}
         </h2>
     {% endif %}

unfold/templates/unfold/components/chart/cohort.html

@@ -0,0 +1,59 @@
+<div class="overflow-auto w-full" data-simplebar>
+    <table class="w-full">
+        <thead>
+            <tr>
+                <th></th>
+
+                {% for header in data.headers %}
+                    <th class="font-normal px-3 pb-2.5 text-left ">
+                        <div class="font-semibold text-font-important-light truncate dark:text-font-important-dark">
+                            {{ header.title }}
+                        </div>
+
+                        {% if header.subtitle %}
+                            <div class="mt-0.5 text-xs truncate">
+                                {{ header.subtitle }}
+                            </div>
+                        {% endif %}
+                    </th>
+                {% endfor %}
+            </tr>
+        </thead>
+
+        <tbody>
+            {% for row in data.rows %}
+                <tr class="h-full">
+                    <td>
+                        <div class="pr-3 py-2.5">
+                            <div class="font-semibold text-font-important-light dark:text-font-important-dark">
+                                {{ row.header.title }}
+                            </div>
+
+                            {% if row.header.subtitle %}
+                                <div class="mt-0.5 text-xs">
+                                    {{ row.header.subtitle }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </td>
+
+                    {% for col in row.cols %}
+                        <td class="h-full">
+                            <div class="flex flex-col h-full justify-center px-3 py-2.5 rounded-md {% if col.color %}{{ col.color }}{% else %}bg-gray-50 border border-dashed dark:bg-gray-800 dark:border-gray-700{% endif %}">
+                                <span>
+                                    {{ col.value }}
+                                </span>
+
+                                {% if col.subtitle %}
+                                    <span class="mt-0.5">
+                                        {{ col.subtitle }}
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </td>
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>

unfold/templates/unfold/components/navigation.html

@@ -1,5 +1,5 @@
 {% if items %}
-    <nav class="bg-gray-100 flex gap-2 mb-8 p-1 rounded text-sm dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
+    <nav class="bg-gray-100 flex gap-2 p-1 rounded text-sm dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
         {% for item in items %}
             <a href="{{ item.link }}" class="flex flex-row font-medium items-center px-2.5 py-1 rounded {% if item.active %} bg-white shadow-sm text-font-important-light hover:bg-white dark:bg-gray-900 dark:hover:bg-gray-900 dark:text-font-important-dark{% else %}text-font-subtle-light dark:text-font-subtle-dark hover:bg-gray-700/[.04]  dark:hover:bg-white/[.04]{% endif %}">
                 {% if item.icon %}

unfold/templates/unfold/components/tracker.html

@@ -0,0 +1,5 @@
+<ul class="flex flex-row gap-0.5 overflow-hidden rounded">
+    {% for item in data %}
+        <li class="h-8 px-px size-full {% if item.color %}{{ item.color }}{% else %}bg-gray-300 dark:bg-gray-400{% endif %} hover:opacity-50" title="{{ item.tooltip }}"></li>
+    {% endfor %}
+</ul>

unfold/templates/unfold/helpers/account_links.html

@@ -5,7 +5,7 @@
         <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 top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
+    <nav class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700" 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

@@ -8,13 +8,15 @@
                     more_horiz
                 </span>
 
-                <nav x-anchor.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col leading-none py-1 rounded-md shadow-lg text-sm top-7 z-50 w-48 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openActionsId{{ action_id }}" @click.outside="openActionsId{{ action_id }} = false">
-                    {% for action in actions %}
-                        <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded-md truncate 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 }}
-                        </a>
-                    {% endfor %}
-                </nav>
+                <template x-teleport="body">
+                    <nav x-anchor.bottom-end.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col leading-none py-1 rounded-md shadow-lg text-sm top-7 z-50 w-48 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openActionsId{{ action_id }}" @click.outside="openActionsId{{ action_id }} = false">
+                        {% for action in actions %}
+                            <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded-md truncate 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 }}
+                            </a>
+                        {% endfor %}
+                    </nav>
+                </template>
             </div>
         {% endwith %}
     </td>

unfold/templates/unfold/helpers/field_readonly.html

@@ -1,5 +1,5 @@
 <div class="flex group mb-6 flex-col last:mb-4">
-    <label class="block font-medium mb-2 text-gray-900 text-sm dark:text-gray-200">
+    <label class="block font-semibold mb-2 text-gray-900 text-sm dark:text-gray-200">
         {{ title }}
     </label>
 

unfold/templates/unfold/helpers/form_label.html

@@ -1,4 +1,4 @@
-<label for="{{ field.id_for_label }}" class="block text-font-important-light dark:text-font-important-dark{% if field.field.widget.input_type == "checkbox" %}{% else %} font-medium mb-2{% endif %}">
+<label for="{{ field.id_for_label }}" class="block text-font-important-light dark:text-font-important-dark{% if field.field.widget.input_type == "checkbox" %}{% else %} font-semibold mb-2{% endif %}">
     {{ field.label }}
 
     {% if field.field.required %}

unfold/templates/unfold/helpers/header.html

@@ -1,6 +1,6 @@
 {% 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="border-b border-gray-200 mb-6 px-4 lg:px-8 dark:border-gray-800">
             <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">

unfold/templates/unfold/helpers/label.html

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

unfold/templates/unfold/helpers/language_switch.html

@@ -0,0 +1,27 @@
+{% load i18n %}
+
+{% get_current_language as LANGUAGE_CODE %}
+{% get_available_languages as LANGUAGES %}
+{% get_language_info_list for LANGUAGES as languages %}
+
+
+<div class="relative" x-data="{ openLanguageLinks: false }">
+    <a class="block cursor-pointer hover:text-gray-700 dark:hover:text-gray-200" x-on:click="openLanguageLinks = !openLanguageLinks">
+        <span class="material-symbols-outlined">translate</span>
+    </a>
+
+    <div class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openLanguageLinks" @click.outside="openLanguageLinks = false">
+        {% for language in languages %}
+            <form action="{% url 'set_language' %}" method="post" class="flex w-full">
+                {% csrf_token %}
+
+                <input name="next" type="hidden" value="{{ redirect_to }}">
+                <input name="language" type="hidden" value="{{ language.code }}">
+
+                <button type="submit" class="block flex-grow mx-1 px-3 py-2 rounded text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 {% if language.code == LANGUAGE_CODE %}text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600{% endif %}">
+                    {{ language.name_local }} ({{ language.code }})
+                </button>
+            </form>
+        {% endfor %}
+    </div>
+</div>

unfold/templates/unfold/helpers/messages/debug.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400">
+    {{ message }}
+</p>

unfold/templates/unfold/helpers/messages/error.html

@@ -1,13 +1,15 @@
 {% load i18n %}
 
-{% if errors or error %}
-    <p class="errornote bg-red-100 mb-8 text-red-600 px-3 py-3 rounded-md text-sm dark:bg-red-500/20 dark:border-red-500/20 dark:text-red-500 group-[.inline-tabular]:mb-0 group-[.inline-tabular]:mt-3 group-[.inline-tabular]:mx-3 group-[.inline-stacked]:mb-3 group-[.inline-stacked]:mt-3 group-[.inline-stacked]:mx-3">
+{% if errors or error or message %}
+    <div class="errornote mb-3 px-3 py-3 rounded-md group-[.inline-tabular]:mb-0 group-[.inline-tabular]:mt-3 group-[.inline-tabular]:mx-3 group-[.inline-stacked]:mb-3 group-[.inline-stacked]:mt-3 group-[.inline-stacked]:mx-3 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
         {% if error %}
             {{ error }}
+        {% elif message %}
+            {{ message }}
         {% else %}
             {% for error in errors %}
                 {{ error }}
             {% endfor %}
         {% endif %}
-    </p>
+    </div>
 {% endif %}

unfold/templates/unfold/helpers/messages/info.html

@@ -1,3 +1,3 @@
-<p class="bg-blue-50 mb-8 text-blue-500 px-3 py-3 rounded-md text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
-    {{ message|safe }}
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+    {{ message }}
 </p>

unfold/templates/unfold/helpers/messages/success.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
+    {{ message }}
+</p>

unfold/templates/unfold/helpers/messages/warning.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
+    {{ message }}
+</p>

unfold/templates/unfold/helpers/messages.html

@@ -1,19 +1,18 @@
 {% if messages %}
-    <ul>
+    <ul class="flex flex-col gap-4 mb-8">
         {% for message in messages %}
-            <li class="{{ message.tags }} mb-3 px-3 py-3 rounded-md text-sm last:mb-8
-                       {% if message.tags == 'success' %}
-                           bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
-                       {% elif message.tags == 'warning' %}
-                           bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
-                       {% elif message.tags == 'error' %}
-                           bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400
-                       {% elif message.tags == 'info' %}
-                           bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
-                       {% else %}
-                           bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400
-                       {% endif %}">
-                {{ message|capfirst }}
+            <li class="*:!mb-0">
+                {% if message.tags == 'info' %}
+                    {% include "unfold/helpers/messages/info.html" with message=message %}
+                {% elif message.tags == 'success' %}
+                    {% include "unfold/helpers/messages/success.html" with message=message %}
+                {% elif message.tags == 'warning' %}
+                    {% include "unfold/helpers/messages/warning.html" with message=message %}
+                {% elif message.tags == 'error' %}
+                    {% include "unfold/helpers/messages/error.html" with message=message %}
+                {% else %}
+                    {% include "unfold/helpers/messages/debug.html" with message=message %}
+                {% endif %}
             </li>
         {% endfor %}
     </ul>