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

Author: jacobtylerwalls

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 {

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;

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;
     }

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;

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 %}

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 %}

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 %}