fix: confirmation buttons (#829)

unfoldadmin · Oct 31, 2024 · acb0393 · acb0393
1 parent 741d311
commit acb0393
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 20 deletions.
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/templates/admin/delete_confirmation.html b/src/unfold/templates/admin/delete_confirmation.html
@@ -95,12 +95,7 @@ <h2 class="font-semibold mb-2 text-font-important-light dark:text-font-important
                         <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>

diff --git a/src/unfold/templates/admin/delete_selected_confirmation.html b/src/unfold/templates/admin/delete_selected_confirmation.html
@@ -89,11 +89,7 @@ <h2 class="font-semibold mb-2 text-font-important-light dark:text-font-important
                     <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>

diff --git a/src/unfold/templates/admin/submit_line.html b/src/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>

diff --git a/src/unfold/templates/unfold/helpers/delete_submit_line.html b/src/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>