django-unfold 0.35.0__py3-none-any.whl → 0.37.0__py3-none-any.whl

unfold/templates/admin/edit_inline/stacked.html

@@ -14,9 +14,11 @@
         {% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}
 
         {% if inline_admin_formset.forms|length == 0 %}
-            <p class="mb-6 text-sm">
-                {% trans "No records found." %}
-            </p>
+            <div>
+                <p class="mb-6 text-sm">
+                    {% trans "No records found." %}
+                </p>
+            </div>
         {% else %}
             <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 %}

unfold/templates/admin/nav_sidebar.html

@@ -13,7 +13,7 @@
 
     <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}">
+         :class="{'ml-72 -translate-x-1/2': sidebarMobileOpen}">
         {% trans "Menu" %}
     </div>
 

unfold/templates/admin/search_form.html

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

unfold/templates/registration/password_change_done.html

@@ -22,8 +22,8 @@
 
 {% block content %}
     <div id="content-main">
-      <p class="bg-primary-100 mb-8 text-primary-600 px-3 py-3 rounded-md text-sm">
-        {% translate 'Your password was changed.' %}
-      </p>
+        <p class="bg-primary-100 mb-8 text-primary-600 px-3 py-3 rounded-md text-sm">
+            {% translate 'Your password was changed.' %}
+        </p>
     </div>
 {% endblock %}

unfold/templates/unfold/change_list_filter.html

@@ -3,7 +3,7 @@
 <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 class="bg-white flex mr-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 mx-4 my-4 overflow-hidden rounded shadow-sm w-96 dark:bg-gray-800" x-on:click.outside="filterOpen = false">
         <div class="flex-grow h-full overflow-auto relative">
             <h3 class="border-b flex font-semibold mb-6 px-6 py-4 text-gray-900 text-sm dark:text-gray-100 dark:border-gray-700">
                 {% trans "Filter results" %}
@@ -23,13 +23,13 @@
                 {% 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.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 %}
+                        {% if request.GET.o %}
+                            <input type="hidden" name="o" value="{{ request.GET.o }}">
+                        {% endif %}
                 {% endif %}
 
 
@@ -38,11 +38,11 @@
                 {% 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">
-                            <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>
+                    <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">
+                        <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>
                     </form>
                 {% endif %}
             </div>

unfold/templates/unfold/helpers/actions_row.html

@@ -2,20 +2,20 @@
 
 {% if actions %}
     <td data-label="{% trans "More actions" %}" class="field-actions_holder align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:block before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 dark:before:text-gray-300 lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800 lg:w-px">
-      {% with action_id=instance_pk|cut:"-" %}
-          <div class="group leading-none relative" x-data="{ openActionsId{{ action_id }}: false }">
-              <span x-ref="rowDropdown{{ action_id }}" class="cursor-pointer flex h-7 material-symbols-outlined md-18 -my-1 !leading-7 rounded text-center text-gray-400 w-7 group-hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 group-hover:dark:bg-gray-800 group-hover:dark:text-white" @click="openActionsId{{ action_id }} = !openActionsId{{ action_id }}">
-                  more_horiz
-              </span>
+        {% with action_id=instance_pk|cut:"-" %}
+            <div class="group leading-none relative" x-data="{ openActionsId{{ action_id }}: false }">
+                <span x-ref="rowDropdown{{ action_id }}" class="cursor-pointer flex h-7 material-symbols-outlined md-18 -my-1 !leading-7 rounded text-center text-gray-400 w-7 group-hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 group-hover:dark:bg-gray-800 group-hover:dark:text-white" @click="openActionsId{{ action_id }} = !openActionsId{{ action_id }}">
+                    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>
-          </div>
-      {% endwith %}
+                <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>
+            </div>
+        {% endwith %}
     </td>
 {% endif %}

unfold/templates/unfold/helpers/app_list.html

@@ -52,7 +52,7 @@
                             {% endif %}
                         {% endfor %}
                     </ol>
-                {% endif %}
+            {% endif %}
             </div>
         {% endfor %}
     </div>

unfold/templates/unfold/helpers/display_header.html

@@ -3,7 +3,7 @@
 <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="object-cover" {% if value.3.width %}width="{{ value.3.width }}"{% endif %} {% if value.3.height %}height="{{ value.3.height }}"{% endif %} alt="{% trans "Record picture" %}" />
+            <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>
     {% 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">

unfold/templates/unfold/helpers/fieldset_row.html

@@ -21,7 +21,7 @@
                                         {% include "unfold/helpers/help_text.html" with help_text=field.field.help_text %}
                                     </div>
                                 {% endif %}
-                                </div>
+                            </div>
 
                             {% if field.errors %}
                                 <div class="mt-1 text-red-600 text-sm dark:text-red-500">
@@ -52,7 +52,7 @@
                     </div>
                 {% endif %}
             {% else %}
-                <div class="{% if adminform.model_admin.compressed_fields %} min-w-48 lg:mt-2 w-48{% endif %}">
+                <div class="{% if adminform.model_admin.compressed_fields %}lg:min-w-48 lg:mt-2 lg:w-48{% endif %}">
                     {{ field.label_tag }}
                 </div>
 

unfold/templates/unfold/helpers/fieldsets_tabs.html

@@ -7,8 +7,8 @@
                 {% for fieldset in tabs %}
                     <li>
                         <a class="cursor-pointer font-semibold hover:text-gray-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-gray-700 dark: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-gray-700 dark:text-white' : ''">
                             {{ fieldset.name }}
                         </a>
                     </li>
@@ -17,7 +17,7 @@
 
             {% for fieldset in tabs %}
                 <div class="tab-wrapper{% if fieldset.name %} fieldset-{{ fieldset.name|slugify }} fieldset-{{ forloop.counter0 }}-{{ fieldset.name|slugify }}{% endif %}"
-                    x-show="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %}">
+                     x-show="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %}">
                     {% include 'admin/includes/fieldset.html' %}
                 </div>
             {% endfor %}

unfold/templates/unfold/helpers/label.html

@@ -1,16 +1,16 @@
 <span class="inline-block font-semibold leading-normal px-2 py-1 rounded text-xxs uppercase whitespace-nowrap
-    {% if type == 'info' %}
-        bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
-    {% elif type == 'danger' %}
-        bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400
-    {% elif type == 'warning' %}
-        bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
-    {% elif type == 'success' %}
-        bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
-    {% 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
-    {% endif %}">
+             {% if type == 'info' %}
+                 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
+             {% elif type == 'danger' %}
+                 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400
+             {% elif type == 'warning' %}
+                 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
+             {% elif type == 'success' %}
+                 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
+             {% 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
+             {% endif %}">
     {{ text }}
 </span>

unfold/templates/unfold/helpers/messages.html

@@ -2,17 +2,17 @@
     <ul>
         {% for message in messages %}
             <li class="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 %}">
+                       {% 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>
         {% endfor %}

unfold/templates/unfold/helpers/navigation.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="relative min-w-sidebar transition-width w-sidebar z-30">
-    <nav id="nav-sidebar" class="bg-gray-50 border-r border-gray-200 fixed max-h-screen  transition-width w-sidebar dark:bg-gray-900 dark:border-gray-800">
+    <nav id="nav-sidebar" class="bg-gray-50 border-r border-gray-200 bottom-0 fixed max-h-screen top-0 transition-width w-sidebar dark:bg-gray-900 dark:border-gray-800">
         <div class="flex flex-col min-h-screen min-w-sidebar dark:bg-gray-950/20">
             <div class="border-b border-gray-200 mb-5 py-3 dark:border-gray-800">
                 <div class="flex font-medium h-10 items-center px-6 text-gray-900 tracking-tight dark:text-gray-100 xl:text-base">

unfold/templates/unfold/helpers/tab_list.html

@@ -18,6 +18,7 @@
                     {% if inlines_list %}
                         <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                             <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
+                               href="#general"
                                x-on:click="activeTab = 'general'"
                                x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-gray-700 dark:hover:text-gray-200 dark:border-gray-800': activeTab != 'general'}">
                                 {% trans "General" %}
@@ -27,6 +28,7 @@
                         {% for inline in inlines_list %}
                             <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                                 <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
+                                   href="#{{ inline.opts.verbose_name|slugify }}"
                                    x-on:click="activeTab = '{{ inline.opts.verbose_name|slugify }}'"
                                    x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}', 'hover:text-gray-700 dark:hover:text-gray-200 dark:border-gray-800': activeTab != '{{ inline.opts.verbose_name|slugify }}'}">
                                     {% if inline.formset.max_num == 1 %}

unfold/templates/unfold/layouts/skeleton.html

@@ -14,65 +14,65 @@
 <!DOCTYPE html>
 <html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr,auto" }}" {% if theme %}class="{{ theme }}"{% else %}x-data="{ adminTheme: $persist('auto').as('adminTheme') }" x-bind:class="{'dark': adminTheme === 'dark' || (adminTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)}" x-cloak{% endif %}>
 
-<head>
-    <title>{% block title %}{% endblock %}</title>
+    <head>
+        <title>{% block title %}{% endblock %}</title>
 
-    <link href="{% static "unfold/fonts/inter/styles.css" %}" rel="stylesheet">
-    <link href="{% static "unfold/fonts/material-symbols/styles.css" %}" rel="stylesheet">
+        <link href="{% static "unfold/fonts/inter/styles.css" %}" rel="stylesheet">
+        <link href="{% static "unfold/fonts/material-symbols/styles.css" %}" rel="stylesheet">
 
-    {% for style in styles %}
-        <link href="{{ style }}" rel="stylesheet">
-    {% endfor %}
+        {% for style in styles %}
+            <link href="{{ style }}" rel="stylesheet">
+        {% endfor %}
 
-    {% for favicon in site_favicons %}
-        <link {% if favicon.rel %}rel="{{ favicon.rel }}"{% endif %} {% if favicon.href %}href="{{ favicon.href }}"{% endif %} {% if favicon.type %}type="{{ favicon.type }}"{% endif %} {% if favicon.sizes %}sizes="{{ favicon.sizes }}"{% endif %}>
-    {% endfor %}
+        {% for favicon in site_favicons %}
+            <link {% if favicon.rel %}rel="{{ favicon.rel }}"{% endif %} {% if favicon.href %}href="{{ favicon.href }}"{% endif %} {% if favicon.type %}type="{{ favicon.type }}"{% endif %} {% if favicon.sizes %}sizes="{{ favicon.sizes }}"{% endif %}>
+        {% endfor %}
 
-    <link href="{% static 'unfold/css/styles.css' %}" rel="stylesheet">
-    <link href="{% static 'unfold/css/simplebar.css' %}" rel="stylesheet">
+        <link href="{% static 'unfold/css/styles.css' %}" rel="stylesheet">
+        <link href="{% static 'unfold/css/simplebar.css' %}" rel="stylesheet">
 
-    <script src="{% static 'unfold/js/alpine.anchor.js' %}" defer></script>
-    <script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
-    <script src="{% static 'unfold/js/alpine.js' %}" defer></script>
-    <script src="{% static 'unfold/js/htmx.js' %}"></script>
-    <script src="{% static 'unfold/js/chart.js' %}"></script>
+        <script src="{% static 'unfold/js/alpine.anchor.js' %}" defer></script>
+        <script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
+        <script src="{% static 'unfold/js/alpine.js' %}" defer></script>
+        <script src="{% static 'unfold/js/htmx.js' %}"></script>
+        <script src="{% static 'unfold/js/chart.js' %}"></script>
 
-    {% for script in scripts %}
-        <script src="{{ script }}"></script>
-    {% endfor %}
+        {% for script in scripts %}
+            <script src="{{ script }}"></script>
+        {% endfor %}
 
-    {% block extrastyle %}{% endblock %}
+        {% block extrastyle %}{% endblock %}
 
-    {% block extrahead %}{% endblock %}
+        {% block extrahead %}{% endblock %}
 
-    <script src="{% static 'unfold/js/app.js' %}"></script>
+        <script src="{% static 'unfold/js/app.js' %}"></script>
 
-    {% block responsive %}
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    {% endblock %}
+        {% block responsive %}
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        {% endblock %}
 
-    {% block blockbots %}
-        <meta name="robots" content="NONE,NOARCHIVE">
-    {% endblock %}
+        {% block blockbots %}
+            <meta name="robots" content="NONE,NOARCHIVE">
+        {% endblock %}
 
-    {% if colors %}
-        <style>
-            html {
-                {% for name, weights in colors.items %}
-                    {% for weight, value in weights.items %}
-                        --color-{{ name }}-{{ weight }}: {{ value }};
+        {% if colors %}
+            <style>
+                html {
+                    {% for name, weights in colors.items %}
+                        {% for weight, value in weights.items %}
+                            --color-{{ name }}-{{ weight }}: {{ value }};
+                        {% endfor %}
                     {% endfor %}
-                {% endfor %}
-            }
-        </style>
-    {% endif %}
-</head>
-
-<body class="antialiased bg-white font-sans text-gray-600 text-sm dark:bg-gray-900 dark:text-gray-300 {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }">
-    {% block base %}{% endblock %}
-
-    <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
-    <script src="{% static 'unfold/js/simplebar.js' %}"></script>
-</body>
+                }
+            </style>
+        {% endif %}
+    </head>
+
+    <body class="antialiased bg-white font-sans text-gray-600 text-sm dark:bg-gray-900 dark:text-gray-300 {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = window.location.hash?.replace('#', '') || 'general'">
+        {% block base %}{% endblock %}
+
+        <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
+        <script src="{% static 'unfold/js/simplebar.js' %}"></script>
+    </body>
 
 </html>

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -17,7 +17,15 @@
         <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium px-3 py-2 text-ellipsis dark:bg-gray-900 {% if widget.value %}text-gray-500 dark:text-gray-300{% else %}text-gray-300 dark:text-gray-300{% endif %}">
 
         <div class="flex flex-none items-center leading-none self-stretch">
-            <input type="{{ widget.type }}" name="{{ widget.name }}" class="{{ widget.file_input_class }}" {% include "django/forms/widgets/attrs.html" %} />
+            <div class="hidden">
+                <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
+            </div>
+
+            {% if widget.is_initial %}
+                <a href="{{ widget.value.url }}" class="border-r cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" target="_blank">
+                    <span class="material-symbols-outlined">download</span>
+                </a>
+            {% endif %}
 
             <label for="{{ widget.attrs.id }}" class="cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200">
                 <span class="material-symbols-outlined">file_upload</span>

unfold/templates/unfold/widgets/foreign_key_raw_id.html

@@ -8,12 +8,14 @@
     {% endif %}
 
     {% if link_url %}
-        <a href="{{ link_url }}" title="{{ link_label }}" class="flex items-center h-9.5 justify-center ml-4 rounded shrink-0 text-primary-600 text-sm dark:text-primary-500">
+        <a href="{{ link_url }}" title="{{ link_label }}" class="flex items-center h-9.5 justify-center ml-4 rounded shrink-0 text-primary-600 text-sm truncate dark:text-primary-500">
             {{ link_label }}
         </a>
     {% else %}
-        <span title="{{ link_label }}" class="bg-white flex items-center h-9.5 justify-center ml-4 rounded shrink-0 text-sm">
-            {{ link_label }}
-        </span>
+        {% if link_label %}
+            <span title="{{ link_label }}" class="flex items-center h-9.5 justify-center ml-4 rounded shrink-0 text-sm truncate">
+                {{ link_label }}
+            </span>
+        {% endif %}
     {% endif %}
 </div>

unfold/templates/unfold/widgets/radio_option.html

@@ -5,8 +5,8 @@
 {% include "django/forms/widgets/input.html" %}
 
 {% if widget.wrap_label %}
-        <span>
-            {{ widget.label }}
-        </span>
+    <span>
+        {{ widget.label }}
+    </span>
     </label>
 {% endif %}

unfold/templates/unfold/widgets/range.html

@@ -1,11 +1,11 @@
 <div class="flex flex-row items-center max-w-2xl">
-{% for widget in widget.subwidgets %}
-    {% include widget.template_name %}
+    {% for widget in widget.subwidgets %}
+        {% include widget.template_name %}
 
-    {% if forloop.first %}
-        <div class="px-4 text-gray-300">
-            -
-        </div>
-    {% endif %}
-{% endfor %}
+        {% if forloop.first %}
+            <div class="px-4 text-gray-300">
+                -
+            </div>
+        {% endif %}
+    {% endfor %}
 </div>

unfold/templates/unfold/widgets/related_widget_wrapper.html

@@ -22,8 +22,8 @@
                             <a class="related-widget-wrapper-link add-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm w-9.5 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200"
                                data-popup="yes"
                                id="add_id_{{ name }}"
-                                href="{{ add_related_url }}?{{ url_params }}"
-                                title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
+                               href="{{ add_related_url }}?{{ url_params }}"
+                               title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
                                 <span class="material-symbols-outlined text-sm">add</span>
                             </a>
                         {% endif %}
@@ -38,11 +38,11 @@
                         {% endif %}
 
                         {% if can_delete_related %}
-                        <a class="related-widget-wrapper-link delete-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-red-600 text-sm w-9.5 dark:bg-gray-900 dark:border-gray-700 dark:text-red-500"
+                            <a class="related-widget-wrapper-link delete-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-red-600 text-sm w-9.5 dark:bg-gray-900 dark:border-gray-700 dark:text-red-500"
                                id="delete_id_{{ name }}"
-                                data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
-                                data-popup="yes"
-                                title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
+                               data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
+                               data-popup="yes"
+                               title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
                                 <span class="material-symbols-outlined text-sm">delete</span>
                             </a>
                         {% endif %}

unfold/templatetags/unfold_list.py

@@ -36,9 +36,7 @@ from ..widgets import UnfoldBooleanWidget
 
 register = Library()
 
-LINK_CLASSES = [
-    "truncate",
-]
+LINK_CLASSES = []
 
 ROW_CLASSES = [
     "align-middle",
@@ -84,7 +82,7 @@ CHECKBOX_CLASSES = [
     "before:content-[attr(data-label)]",
     "before:font-semibold",
     "before:mr-auto",
-    "before:text-gray-100",
+    "before:text-gray-900",
     "lg:before:hidden",
     "lg:border-t",
     "lg:border-gray-200",

unfold/utils.py

@@ -132,7 +132,12 @@ def prettify_json(data: Any) -> Optional[str]:
         return None
 
     def format_response(response: str, theme: str) -> str:
-        formatter = HtmlFormatter(style=theme, noclasses=True, nobackground=True)
+        formatter = HtmlFormatter(
+            style=theme,
+            noclasses=True,
+            nobackground=True,
+            prestyles="white-space: pre-wrap; word-wrap: break-word;",
+        )
         return highlight(response, JsonLexer(), formatter)
 
     response = json.dumps(data, sort_keys=True, indent=4)