fix: visual changelist improvements (#368)

lukasvinclav · web-flow · commit f351eb2e1486 · 2024-05-06T09:08:32.000+02:00
diff --git a/src/unfold/forms.py b/src/unfold/forms.py
@@ -22,7 +22,12 @@
 class ActionForm(forms.Form):
     action = forms.ChoiceField(
         label="",
-        widget=forms.Select({"class": " ".join([*SELECT_CLASSES, "w-72"])}),
+        widget=forms.Select(
+            {
+                "class": " ".join([*SELECT_CLASSES, "max-w-full", "lg:!w-64"]),
+                "x-model": "action",
+            }
+        ),
     )
 
     select_across = forms.BooleanField(
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/styles.css b/src/unfold/styles.css
@@ -101,8 +101,9 @@ table select:focus {
   @apply border-primary-600;
 }
 
-table tr.selected {
-  @apply bg-yellow-50 dark:bg-white/[.06];
+table tr.selected td,
+table tr.selected th {
+  @apply bg-yellow-200/[.10] dark:bg-white/[.03];
 }
 
 /*******************************************************
diff --git a/src/unfold/templates/admin/actions.html b/src/unfold/templates/admin/actions.html
@@ -1,8 +1,8 @@
 {% load i18n %}
 
-<div class="actions flex flex-col md:flex-row md:items-center">
+<div class="actions flex flex-col gap-3 order-last lg:order-none lg:flex-row lg:items-center">
     {% block actions %}
-        <div class="flex">
+        <div class="flex flex-col gap-2 lg:flex-row" x-data="{action: ''}">
             {% block actions-form %}
                 {% for field in action_form %}
                     {% if field.label %}
@@ -19,31 +19,31 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <button type="submit" class="bg-white border flex items-center h-9.5 ml-3 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-gray-700 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
-                    <span class="material-symbols-outlined md-18">chevron_right</span>
+                <button type="submit" x-show="action" class="bg-primary-600 cursor-pointer flex font-medium items-center justify-center px-3 py-2 rounded-md text-sm text-white whitespace-nowrap" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
+                    {% trans "Run" %}
                 </button>
             {% endblock %}
         </div>
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
-                <div class="hidden truncate md:block">
-                    <span class="action-counter ml-4 text-sm text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
+                <div class="bg-gray-100 flex flex-row gap-2 h-9.5 items-center px-3 rounded-md shadow-sm truncate dark:bg-white/[.04] lg:bg-transparent dark:lg:!bg-transparent lg:px-0 lg:shadow-none">
+                    <span class="action-counter text-sm text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>
 
                     {% if cl.result_count != cl.result_list|length %}
-                        <span class="all hidden ml-4 text-gray-500 text-sm">
+                        <span class="all hidden text-gray-500 text-sm">
                             {{ selection_note_all }}
                         </span>
 
-                        <span class="question hidden ml-4 text-primary-600 text-sm underline">
+                        <span class="question hidden text-primary-600 text-sm underline">
                             <a href="#" title="{% translate "Click here to select the objects across all pages" %}">
                                 {% blocktranslate with cl.result_count as total_count %}Select all {{ total_count }} {{ module_name }}{% endblocktranslate %}
                             </a>
                         </span>
 
-                        <span class="clear hidden ml-4 text-sm text-red-600 underline">
+                        <span class="clear hidden text-sm text-red-600 underline">
                             <a href="#">
                                 {% translate "Clear selection" %}
                             </a>
diff --git a/src/unfold/templates/admin/base.html b/src/unfold/templates/admin/base.html
@@ -43,9 +43,7 @@
                     {% if cl %}
                         {% tab_list cl.opts %}
                     {% elif opts %}
-                        <div class="mb-8">
-                            {% tab_list opts %}
-                        </div>
+                        {% tab_list opts %}
                     {% endif %}
 
                     {% block content %}
diff --git a/src/unfold/templates/admin/change_list.html b/src/unfold/templates/admin/change_list.html
@@ -84,7 +84,7 @@
                     {% 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 md:flex-row dark:bg-gray-800">
+                                <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 %}
@@ -95,7 +95,7 @@
 
                                     {% block filters %}
                                         {% if cl.has_filters %}
-                                            <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white text-gray-500 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200 dark:text-gray-400{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm md:ml-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
+                                            <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white text-gray-500 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200 dark:text-gray-400{% 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-700 dark:group-hover:text-gray-200 dark:text-gray-500{% endif %}">filter_list</span>
diff --git a/src/unfold/templates/admin/change_list_results.html b/src/unfold/templates/admin/change_list_results.html
@@ -8,18 +8,30 @@
 
 {% if results %}
     <table id="result_list" class="block border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:table lg:dark:border-gray-800">
-        <thead class="hidden lg:table-header-group">
+        <thead>
             <tr>
                 {% for header in result_headers %}
-                    <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}w-10{% endif %}" scope="col">
+                    <th class="align-middle font-medium py-2 text-left text-gray-400 text-sm {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
                         <div class="flex items-center">
                             <div class="text">
                                 {% if header.sortable %}
                                     <a href="{{ header.url_primary }}">
                                         {{ header.text|capfirst }}
                                     </a>
                                 {% else %}
-                                    <span>{{ header.text|capfirst }}</span>
+                                    {% if "action-toggle" in header.text and forloop.counter == 1 %}
+                                        <label class="flex flex-row items-center gap-2">
+                                            {{ header.text|capfirst }}
+
+                                            <span class="block font-normal text-gray-500 dark:text-gray-400 lg:hidden">
+                                                {% trans "Select all rows"%}
+                                            </span>
+                                        </label>
+                                    {% else %}
+                                        <span>
+                                            {{ header.text|capfirst }}
+                                        </span>
+                                    {% endif %}
                                 {% endif %}
                             </div>
 
diff --git a/src/unfold/templates/admin/search_form.html b/src/unfold/templates/admin/search_form.html
@@ -1,19 +1,17 @@
 {% load i18n static %}
 
 {% if cl.search_fields %}
-    <div id="toolbar" class="lg:w-72">
-        <div>
-            <div class="bg-white border flex rounded-md overflow-hidden shadow-sm 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 h-9 px-3 text-gray-500 text-sm w-40 lg:w-60 focus:outline-none dark:bg-gray-900 dark:text-gray-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Type to search' %}" />
+    <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-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Type to search' %}" />
 
-                <button type="submit" class="flex items-center ml-auto px-2 focus:outline-none" id="searchbar-submit">
-                    <span class="material-symbols-outlined md-18 text-gray-400 dark:text-gray-500">search</span>
-                </button>
-            </div>
-
-            {% for pair in cl.params.items %}
-                {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}
-            {% endfor %}
+            <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>
+            </button>
         </div>
+
+        {% for pair in cl.params.items %}
+            {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}
+        {% endfor %}
     </div>
 {% endif %}
diff --git a/src/unfold/templates/unfold/helpers/tab_list.html b/src/unfold/templates/unfold/helpers/tab_list.html
@@ -1,6 +1,6 @@
 {% if not is_popup %}
     {% if tab_list or actions_list or actions_items or nav_global %}
-        <div class="flex items-start flex-col mb-2 text-gray-500 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end dark:text-gray-400">
+        <div class="flex items-start flex-col mb-4 text-gray-500 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end dark:text-gray-400">
             {% if tab_list %}
                 <ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
                     {% for item in tab_list %}
diff --git a/src/unfold/templatetags/unfold_list.py b/src/unfold/templatetags/unfold_list.py
@@ -37,9 +37,9 @@
 register = Library()
 
 LINK_CLASSES = [
-    "text-gray-700",
+    "text-gray-600",
     "truncate",
-    "dark:text-gray-200",
+    "dark:text-gray-300",
 ]
 
 ROW_CLASSES = [
@@ -54,6 +54,7 @@
     "px-3",
     "py-2",
     "text-left",
+    "text-gray-500",
     "text-sm",
     "before:flex",
     "before:capitalize",
@@ -63,6 +64,7 @@
     "before:text-gray-500",
     "first:border-t-0",
     "dark:before:text-gray-400",
+    "dark:text-gray-400",
     "lg:before:hidden",
     "lg:first:border-t",
     "lg:py-3",
@@ -186,7 +188,7 @@ def make_qs_param(t, n):
             "url_primary": cl.get_query_string({ORDER_VAR: ".".join(o_list_primary)}),
             "url_remove": cl.get_query_string({ORDER_VAR: ".".join(o_list_remove)}),
             "url_toggle": cl.get_query_string({ORDER_VAR: ".".join(o_list_toggle)}),
-            "class_attrib": format_html(' class="{}"', " ".join(th_classes))
+            "class_attrib": format_html("{}", " ".join(th_classes))
             if th_classes
             else "",
         }

Original file line number	Diff line number	Diff line change
`@@ -101,8 +101,9 @@ table select:focus {`
`101`	`101`	`@apply border-primary-600;`
`102`	`102`	`}`
`103`	`103`
`104`		`-table tr.selected {`
`105`		`- @apply bg-yellow-50 dark:bg-white/[.06];`
	`104`	`+table tr.selected td,`
	`105`	`+table tr.selected th {`
	`106`	`+ @apply bg-yellow-200/[.10] dark:bg-white/[.03];`
`106`	`107`	`}`
`107`	`108`
`108`	`109`	`/*******************************************************`