feat: empty changelist results design (#906)

src/unfold/sites.py

@@ -49,14 +49,23 @@ def __init__(self, name: str = "admin") -> None:
             self.site_url = get_config(self.settings_name)["SITE_URL"]
 
     def get_urls(self) -> List[URLPattern]:
-        urlpatterns = [
-            path("search/", self.admin_view(self.search), name="search"),
-            path(
-                "toggle-sidebar/",
-                self.admin_view(self.toggle_sidebar),
-                name="toggle_sidebar",
-            ),
-        ] + super().get_urls()
+        extra_urls = []
+
+        if hasattr(self, "extra_urls") and callable(self.extra_urls):
+            extra_urls = self.extra_urls()
+
+        urlpatterns = (
+            [
+                path("search/", self.admin_view(self.search), name="search"),
+                path(
+                    "toggle-sidebar/",
+                    self.admin_view(self.toggle_sidebar),
+                    name="toggle_sidebar",
+                ),
+            ]
+            + extra_urls
+            + super().get_urls()
+        )
 
         return urlpatterns
 
@@ -120,6 +129,9 @@ def each_context(self, request: HttpRequest) -> Dict[str, Any]:
             except ImportError:
                 pass
 
+        if hasattr(self, "extra_context") and callable(self.extra_context):
+            context = self.extra_context(context)
+
         return context
 
     def index(

src/unfold/templates/admin/change_list_results.html

@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load admin_urls i18n %}
 
 {% if result_hidden_fields %}
     <div class="hiddenfields">
@@ -85,4 +85,38 @@
             </tbody>
         </table>
     </div>
+{% else %}
+    {% url cl.opts|admin_urlname:"add" as add_url %}
+    {% blocktranslate with name=cl.opts.verbose_name asvar title %}Add {{ name }}{% endblocktranslate %}
+
+    <div class="border flex flex-col items-center px-8 py-24 rounded-md shadow-sm dark:border-gray-800">
+        <div class="bg-gray-100 flex h-24 items-center justify-center mb-8 rounded-full w-24 dark:bg-gray-800">
+            <span class="material-symbols-outlined text-gray-500 !text-5xl dark:text-gray-400">inbox</span>
+        </div>
+
+        <h2 class="font-semibold mb-1 text-xl text-font-important-light dark:text-font-important-dark">
+            {% trans "No results found" %}
+        </h2>
+
+        <p class="mb-6 text-center">
+            {% trans "This page yielded into no results. Create a new item or reset your filters." %}
+        </p>
+
+        {% if has_add_permission or cl.has_filters %}
+            <div class="flex flex-col gap-4 justify-center w-full lg:flex-row">
+                {% if has_add_permission %}
+                    <a href="{% add_preserved_filters add_url is_popup to_field %}" class="bg-primary-600 flex flex-row font-medium gap-2 items-center h-9.5 justify-center px-3 py-2 rounded-md text-white w-full lg:w-auto">
+                        <span class="material-symbols-outlined text-white">add</span> {{ title }}
+                    </a>
+                {% endif %}
+
+
+                {% if cl.has_filters %}
+                    <a href="{{ cl.clear_all_filters_qs }}" class="border flex flex-row font-medium gap-2 group/button h-9.5 items-center justify-center px-3 py-2 rounded-md transition-all w-full hover:text-primary-600 lg:w-auto dark:border-gray-700 dark:hover:bg-gray-900 dark:hover:text-primary-500">
+                        <span class="material-symbols-outlined group-hover/button:text-primary-600 dark:group-hover/button:text-gray-500 text-gray-400 dark:text-gray-500">filter_list_off</span> {% trans "Reset filters" %}
+                    </a>
+                {% endif %}
+            </div>
+        {% endif %}
+    </div>
 {% endif %}

src/unfold/templates/admin/login.html

@@ -24,7 +24,7 @@
 {% endblock %}
 
 {% block base %}
-    <div class="flex min-h-screen">
+    <div id="page" class="flex min-h-screen">
         <div class="flex flex-grow items-center justify-center mx-auto px-4 relative">
             <div class="w-full sm:w-96">
                 <h1 class="font-semibold mb-10">

src/unfold/templates/admin/pagination.html

@@ -1,9 +1,9 @@
 {% load unfold_list i18n %}
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative 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="backdrop-blur-sm bg-white/80 flex items-center dark:bg-gray-900/80 {% if not is_popup %}lg:border-t lg:h-[71px] lg:py-2 relative scrollable-top lg:px-8 dark:border-gray-800{% endif %}">
-            <div class="flex flex-row items-center {% if not cl.model_admin.list_fullwidth %}mx-auto{% endif %}" x-bind:style="'width: ' + changeListWidth + 'px'">
+    <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 %} x-bind:style="'width: ' + mainWidth + 'px'">
+        <div class="lg:backdrop-blur-sm lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-gray-900/80 {% if not is_popup %}lg:border-t lg:h-[71px] lg:py-2 lg:relative lg:scrollable-top lg:px-8 lg:dark:border-gray-800{% endif %}">
+            <div class="flex flex-row items-center {% if not cl.model_admin.list_fullwidth %}lg:mx-auto{% endif %}" x-bind:style="'width: ' + changeListWidth + 'px'">
                 {% if pagination_required %}
                     {% for i in page_range %}
                         <div class="{% if forloop.last %}pr-2{% else %}pr-4{% endif %}">
@@ -12,7 +12,7 @@
                     {% endfor %}
                 {% endif %}
 
-                <div class="py-2">
+                <div class="py-4">
                     {% if pagination_required %}
                         -
                     {% endif %}

src/unfold/templates/admin/submit_line.html

@@ -1,9 +1,9 @@
 {% load i18n admin_urls %}
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative lg: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="backdrop-blur-sm bg-white/80 dark:bg-gray-900/80 {% 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">
+    <div class="{% if not is_popup %}max-w-full 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 %} x-bind:style="'width: ' + mainWidth + 'px'">
+        <div class="backdrop-blur-sm bg-white/80 dark:bg-gray-900/80 {% if not is_popup %}lg:border-t lg:py-4 relative lg:scrollable-top lg:px-8 dark:border-gray-800{% endif %}">
+            <div class="flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse">
                 {% block submit-row %}
                     {% if show_save %}
                         <button type="submit" name="_save" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md text-white w-full lg:w-auto">

src/unfold/templates/registration/logged_out.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block base %}
-    <div class="flex min-h-screen">
+    <div id="page" class="flex min-h-screen">
         <div class="flex flex-grow items-center justify-center mx-auto px-4">
             <div class="w-full sm:w-96">
                 <h1 class="font-semibold mb-4 text-xl">

src/unfold/templates/unfold/layouts/base_simple.html

@@ -3,14 +3,14 @@
 {% load i18n %}
 
 {% block base %}
-    <div class="flex min-h-screen">
+    <div id="page" class="flex min-h-screen">
         {% if not is_popup and is_nav_sidebar_enabled %}
             {% block nav-sidebar %}
                 {% include "admin/nav_sidebar.html" %}
             {% endblock %}
         {% endif %}
 
-        <div id="main" class="shadow flex-grow min-w-0">
+        <div id="main" class="shadow flex-grow min-w-0" x-resize="mainWidth = $width">
             {% block content_before %}
                 {% include "unfold/helpers/header.html" %}
             {% endblock %}

src/unfold/templates/unfold/layouts/skeleton.html

@@ -70,7 +70,7 @@
         {% endif %}
     </head>
 
-    <body class="antialiased bg-white font-sans text-font-default-light text-sm dark:bg-gray-900 dark:text-font-default-dark {% 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'">
+    <body class="antialiased bg-white font-sans text-font-default-light text-sm dark:bg-gray-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ mainWidth: 0, 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>

src/unfold/templatetags/unfold_list.py

@@ -369,6 +369,7 @@ def result_list(context: Dict[str, Any], cl: ChangeList) -> Dict[str, Any]:
         "num_sorted_fields": num_sorted_fields,
         "results": list(results(cl)),
         "actions_row": context.get("actions_row"),
+        "has_add_permission": cl.model_admin.has_add_permission(context["request"]),
     }