Fixed #36887 -- Improved admin changelist layout for object-tools button.

15 files changed, 38 insertions, 27 deletions

diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css
index ea7707eb89..dc6e24a476 100644
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -808,18 +808,25 @@ a.deletelink:focus, a.deletelink:hover {
     text-decoration: none;
 }
 
+/* TITLES */
+
+.titles-and-tools {
+    display: flex;
+}
+
+.titles {
+    flex-grow: 1;
+}
+
 /* OBJECT TOOLS */
 
 .object-tools {
     padding: 0;
-    overflow: hidden;
-    text-align: right;
-    margin: 0 0 15px;
+    margin: 0;
 }
 
 .object-tools li {
     display: inline-block;
-    height: auto;
 }
 
 .object-tools li + li {
diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css
index c8af03ba90..9524cc5263 100644
--- a/django/contrib/admin/static/admin/css/responsive.css
+++ b/django/contrib/admin/static/admin/css/responsive.css
@@ -439,11 +439,15 @@ input[type="submit"], button {
         margin-top: 30px;
     }
 
-    .object-tools {
-        text-align: left;
+    /* Forms */
+
+    .titles-and-tools {
+        flex-direction: column;
     }
 
-    /* Forms */
+    .object-tools {
+        margin-bottom: 10px;
+    }
 
     .form-row {
         padding: 15px 0;
diff --git a/django/contrib/admin/static/admin/css/responsive_rtl.css b/django/contrib/admin/static/admin/css/responsive_rtl.css
index cd32867688..34a3462b6c 100644
--- a/django/contrib/admin/static/admin/css/responsive_rtl.css
+++ b/django/contrib/admin/static/admin/css/responsive_rtl.css
@@ -53,10 +53,6 @@
         margin-right: 0;
     }
 
-    [dir="rtl"] .object-tools {
-        text-align: right;
-    }
-
     [dir="rtl"] .aligned .vCheckboxLabel {
         padding: 1px 5px 0 0;
     }
diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css
index aa7c4e8636..4726aceb9c 100644
--- a/django/contrib/admin/static/admin/css/rtl.css
+++ b/django/contrib/admin/static/admin/css/rtl.css
@@ -25,10 +25,6 @@ th {
     background-position: 100% 1px;
 }
 
-.object-tools {
-    text-align: left;
-}
-
 .object-tools li + li {
     margin-right: 15px;
     margin-left: 0;
diff --git a/django/contrib/admin/templates/admin/base.html b/django/contrib/admin/templates/admin/base.html
index 73121e5114..066f5fa65c 100644
--- a/django/contrib/admin/templates/admin/base.html
+++ b/django/contrib/admin/templates/admin/base.html
@@ -98,11 +98,15 @@
         {% endblock messages %}
         <!-- Content -->
         <div id="content" class="{% block coltype %}colM{% endblock %}">
-          {% block pretitle %}{% endblock %}
-          {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
-          {% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}
-          {% block content %}
+          <div class="titles-and-tools">
+            <div class="titles">
+              {% block pretitle %}{% endblock %}
+              {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
+              {% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}
+            </div>
             {% block object-tools %}{% endblock %}
+          </div>
+          {% block content %}
             {{ content }}
           {% endblock %}
           {% block sidebar %}{% endblock %}
diff --git a/django/contrib/admin/templates/admin/change_form.html b/django/contrib/admin/templates/admin/change_form.html
index 2e06fab63f..9b09fb9952 100644
--- a/django/contrib/admin/templates/admin/change_form.html
+++ b/django/contrib/admin/templates/admin/change_form.html
@@ -24,7 +24,6 @@
 {% endblock %}
 {% endif %}
 
-{% block content %}<div id="content-main">
 {% block object-tools %}
 {% if change and not is_popup %}
   <ul class="object-tools">
@@ -34,6 +33,8 @@
   </ul>
 {% endif %}
 {% endblock %}
+
+{% block content %}<div id="content-main">
 <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}{% block form_top %}{% endblock %}
 <div>
 {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1">{% endif %}
diff --git a/django/contrib/admin/templates/admin/change_list.html b/django/contrib/admin/templates/admin/change_list.html
index 42e157a85e..78eef88294 100644
--- a/django/contrib/admin/templates/admin/change_list.html
+++ b/django/contrib/admin/templates/admin/change_list.html
@@ -39,15 +39,16 @@
 
 {% block coltype %}{% endblock %}
 
+{% block object-tools %}
+<ul class="object-tools">
+  {% block object-tools-items %}
+    {% change_list_object_tools %}
+  {% endblock %}
+</ul>
+{% endblock %}
+
 {% block content %}
   <div id="content-main">
-    {% block object-tools %}
-        <ul class="object-tools">
-          {% block object-tools-items %}
-            {% change_list_object_tools %}
-          {% endblock %}
-        </ul>
-    {% endblock %}
     {% if cl.formset and cl.formset.errors %}
         <p class="errornote">
         {% blocktranslate count counter=cl.formset.total_error_count %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
diff --git a/docs/intro/_images/admin04t.png b/docs/intro/_images/admin04t.png
index ef5e12b93c..4558ac5228 100644
--- a/docs/intro/_images/admin04t.png
+++ b/docs/intro/_images/admin04t.png
diff --git a/docs/intro/_images/admin05t.png b/docs/intro/_images/admin05t.png
index f4e3214721..3ff15fc36f 100644
--- a/docs/intro/_images/admin05t.png
+++ b/docs/intro/_images/admin05t.png
diff --git a/docs/intro/_images/admin07t.png b/docs/intro/_images/admin07t.png
new file mode 100644
index 0000000000..c03a7833f9
--- /dev/null
+++ b/docs/intro/_images/admin07t.png
diff --git a/docs/intro/_images/admin08t.png b/docs/intro/_images/admin08t.png
index 23f48fdd41..046d025859 100644
--- a/docs/intro/_images/admin08t.png
+++ b/docs/intro/_images/admin08t.png
diff --git a/docs/intro/_images/admin12t.png b/docs/intro/_images/admin12t.png
index b79465a4ac..a84a0cb28f 100644
--- a/docs/intro/_images/admin12t.png
+++ b/docs/intro/_images/admin12t.png
diff --git a/docs/intro/_images/admin13t.png b/docs/intro/_images/admin13t.png
index 1567d32393..1d857cbaf5 100644
--- a/docs/intro/_images/admin13t.png
+++ b/docs/intro/_images/admin13t.png
diff --git a/docs/ref/contrib/admin/_images/list_filter.png b/docs/ref/contrib/admin/_images/list_filter.png
index bdb58f9f38..962c4b3cae 100644
--- a/docs/ref/contrib/admin/_images/list_filter.png
+++ b/docs/ref/contrib/admin/_images/list_filter.png
diff --git a/docs/releases/6.1.txt b/docs/releases/6.1.txt
index d10225dfdf..2539e599c7 100644
--- a/docs/releases/6.1.txt
+++ b/docs/releases/6.1.txt
@@ -401,6 +401,8 @@ backends.
 
 * The ``wide`` class is removed, as it was made obsolete by the new layout.
 
+* The ``object-tools`` block is hoisted out of the ``content`` block in forms.
+
 :mod:`django.contrib.gis`
 -------------------------