From 8ee4bb6ffcb3346c0fa8fb194986fbf9edadc822 Mon Sep 17 00:00:00 2001 From: Tom Carrick Date: Fri, 11 Sep 2020 10:17:50 +0200 Subject: [PATCH] Fixed #31986 -- Fixed admin filter sidebar scrolling. Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c. Thanks haki for the report. --- .../admin/static/admin/css/changelists.css | 42 ++++++++++--------- .../contrib/admin/static/admin/css/forms.css | 1 + .../admin/static/admin/css/nav_sidebar.css | 15 +++++-- .../admin/static/admin/css/responsive.css | 34 +++++---------- .../admin/static/admin/css/responsive_rtl.css | 19 ++++----- django/contrib/admin/static/admin/css/rtl.css | 14 +------ .../admin/templates/admin/change_list.html | 31 +++++++------- docs/releases/3.1.2.txt | 3 ++ 8 files changed, 75 insertions(+), 84 deletions(-) diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css index eb0392d355..d80b0bb057 100644 --- a/django/contrib/admin/static/admin/css/changelists.css +++ b/django/contrib/admin/static/admin/css/changelists.css @@ -1,8 +1,14 @@ /* CHANGELISTS */ #changelist { - position: relative; - width: 100%; + display: flex; + align-items: flex-start; + justify-content: space-between; +} + +#changelist .changelist-form-container { + flex: 1 1 auto; + min-width: 0; } #changelist table { @@ -21,7 +27,6 @@ .change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull { - margin-right: 280px; width: auto; } @@ -30,7 +35,8 @@ } #changelist-form .results { - overflow-x: auto; + overflow-x: auto; + width: 100%; } #changelist .toplinks { @@ -67,7 +73,7 @@ /* TOOLBAR */ -#changelist #toolbar { +#toolbar { padding: 8px 10px; margin-bottom: 15px; border-top: 1px solid #eee; @@ -76,28 +82,28 @@ color: #666; } -#changelist #toolbar form input { +#toolbar form input { border-radius: 4px; font-size: 14px; padding: 5px; color: #333; } -#changelist #toolbar form #searchbar { +#searchbar { height: 19px; border: 1px solid #ccc; padding: 2px 5px; margin: 0; vertical-align: top; font-size: 13px; - max-width: 230px; + max-width: 100%; } -#changelist #toolbar form #searchbar:focus { +#searchbar:focus { border-color: #999; } -#changelist #toolbar form input[type="submit"] { +#toolbar form input[type="submit"] { border: 1px solid #ccc; font-size: 13px; padding: 4px 8px; @@ -109,12 +115,12 @@ color: #333; } -#changelist #toolbar form input[type="submit"]:focus, -#changelist #toolbar form input[type="submit"]:hover { +#toolbar form input[type="submit"]:focus, +#toolbar form input[type="submit"]:hover { border-color: #999; } -#changelist #changelist-search img { +#changelist-search img { vertical-align: middle; margin-right: 4px; } @@ -122,14 +128,11 @@ /* FILTER COLUMN */ #changelist-filter { - position: absolute; - top: 0; - right: 0; - z-index: 1000; + order: 1; width: 240px; background: #f8f8f8; border-left: none; - margin: 0; + margin: 0 0 0 30px; } #changelist-filter h2 { @@ -227,6 +230,7 @@ line-height: 22px; margin: 0; border-top: 1px solid #ddd; + width: 100%; } .paginator a:link, .paginator a:visited { @@ -266,7 +270,6 @@ /* ACTIONS */ .filtered .actions { - margin-right: 280px; border-right: none; } @@ -286,6 +289,7 @@ border-bottom: none; line-height: 24px; color: #999; + width: 100%; } #changelist .actions.selected { diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css index 700cb34a42..883b14a657 100644 --- a/django/contrib/admin/static/admin/css/forms.css +++ b/django/contrib/admin/static/admin/css/forms.css @@ -426,6 +426,7 @@ body.popup .submit-row { .inline-related.tabular fieldset.module table { width: 100%; + overflow-x: scroll; } .last-related fieldset { diff --git a/django/contrib/admin/static/admin/css/nav_sidebar.css b/django/contrib/admin/static/admin/css/nav_sidebar.css index be03db966c..784d087419 100644 --- a/django/contrib/admin/static/admin/css/nav_sidebar.css +++ b/django/contrib/admin/static/admin/css/nav_sidebar.css @@ -99,12 +99,21 @@ background: #ffc; } +.main > #nav-sidebar + .content { + max-width: calc(100% - 23px); +} + +.main.shifted > #nav-sidebar + .content { + max-width: calc(100% - 299px); +} + @media (max-width: 767px) { #nav-sidebar, #toggle-nav-sidebar { display: none; } -} -.change-list .main > #nav-sidebar+.content { - overflow: hidden; + .main > #nav-sidebar + .content, + .main.shifted > #nav-sidebar + .content { + max-width: 100%; + } } diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css index 82d9ab851f..7ffa871fc8 100644 --- a/django/contrib/admin/static/admin/css/responsive.css +++ b/django/contrib/admin/static/admin/css/responsive.css @@ -93,14 +93,14 @@ input[type="submit"], button { /* Changelist */ - #changelist #toolbar { + #toolbar { border: none; padding: 15px; } #changelist-search > div { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; max-width: 480px; } @@ -108,13 +108,17 @@ input[type="submit"], button { line-height: 22px; } - #changelist #toolbar form #searchbar { + #toolbar form #searchbar { flex: 1 0 auto; width: 0; height: 22px; margin: 0 10px 0 6px; } + #toolbar form input[type=submit] { + flex: 0 1 auto; + } + #changelist-search .quiet { width: 100%; margin: 5px 0 0 25px; @@ -159,9 +163,6 @@ input[type="submit"], button { .change-list .filtered .paginator, .filtered #toolbar, .filtered .actions, - .filtered div.xfull { - margin-right: 230px; - } #changelist .paginator { border-top-color: #eee; @@ -500,25 +501,16 @@ input[type="submit"], button { /* Changelist */ #changelist { - display: flex; + align-items: stretch; flex-direction: column; } - #changelist #toolbar { - order: 1; + #toolbar { padding: 10px; } - #changelist .xfull { - order: 2; - } - - #changelist-form { - order: 3; - } - #changelist-filter { - order: 4; + margin-left: 0; } #changelist .actions label { @@ -534,11 +526,6 @@ input[type="submit"], button { flex: 1 0 100%; } - .change-list .filtered .results, .change-list .filtered .paginator, - .filtered #toolbar, .filtered .actions, .filtered div.xfull { - margin-right: 0; - } - #changelist-filter { position: static; width: auto; @@ -570,7 +557,6 @@ input[type="submit"], button { .aligned .form-row, .aligned .form-row > div { display: flex; - flex-wrap: wrap; max-width: 100vw; } diff --git a/django/contrib/admin/static/admin/css/responsive_rtl.css b/django/contrib/admin/static/admin/css/responsive_rtl.css index 66fcc3ca61..66d3c2f9b3 100644 --- a/django/contrib/admin/static/admin/css/responsive_rtl.css +++ b/django/contrib/admin/static/admin/css/responsive_rtl.css @@ -23,9 +23,9 @@ [dir="rtl"] .change-list .filtered .paginator, [dir="rtl"] .filtered #toolbar, [dir="rtl"] .filtered div.xfull, - [dir="rtl"] .filtered .actions { - margin-right: 0; - margin-left: 230px; + [dir="rtl"] .filtered .actions, + [dir="rtl"] #changelist-filter { + margin-left: 0; } [dir="rtl"] .inline-group ul.tools a.add, @@ -63,14 +63,6 @@ /* MOBILE */ @media (max-width: 767px) { - [dir="rtl"] .change-list .filtered .results, - [dir="rtl"] .change-list .filtered .paginator, - [dir="rtl"] .filtered #toolbar, - [dir="rtl"] .filtered div.xfull, - [dir="rtl"] .filtered .actions { - margin-left: 0; - } - [dir="rtl"] .aligned .related-lookup, [dir="rtl"] .aligned .datetimeshortcuts { margin-left: 0; @@ -80,4 +72,9 @@ [dir="rtl"] .aligned ul { margin-right: 0; } + + [dir="rtl"] #changelist-filter { + margin-left: 0; + margin-right: 0; + } } diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css index f39777214f..1a4bada1e4 100644 --- a/django/contrib/admin/static/admin/css/rtl.css +++ b/django/contrib/admin/static/admin/css/rtl.css @@ -87,15 +87,10 @@ thead th.sorted .text { } #changelist-filter { - right: auto; - left: 0; border-left: none; border-right: none; -} - -.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull { - margin-right: 0; - margin-left: 280px; + margin-left: 0; + margin-right: 30px; } #changelist-filter li.selected { @@ -107,11 +102,6 @@ thead th.sorted .text { margin-right: -15px; } -.filtered .actions { - margin-left: 280px; - margin-right: 0; -} - #changelist table tbody td:first-child, #changelist table tbody th:first-child { border-right: none; border-left: none; diff --git a/django/contrib/admin/templates/admin/change_list.html b/django/contrib/admin/templates/admin/change_list.html index b426373410..15508a9a9f 100644 --- a/django/contrib/admin/templates/admin/change_list.html +++ b/django/contrib/admin/templates/admin/change_list.html @@ -53,9 +53,23 @@ {{ cl.formset.non_form_errors }} {% endif %}
- {% block search %}{% search_form cl %}{% endblock %} - {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %} +
+ {% block search %}{% search_form cl %}{% endblock %} + {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %} +
{% csrf_token %} + {% if cl.formset %} +
{{ cl.formset.management_form }}
+ {% endif %} + + {% block result_list %} + {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %} + {% result_list cl %} + {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %} + {% endblock %} + {% block pagination %}{% pagination cl %}{% endblock %} +
+
{% block filters %} {% if cl.has_filters %}
@@ -67,19 +81,6 @@
{% endif %} {% endblock %} - -
{% csrf_token %} - {% if cl.formset %} -
{{ cl.formset.management_form }}
- {% endif %} - - {% block result_list %} - {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %} - {% result_list cl %} - {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %} - {% endblock %} - {% block pagination %}{% pagination cl %}{% endblock %} -
{% endblock %} diff --git a/docs/releases/3.1.2.txt b/docs/releases/3.1.2.txt index 598bd2a754..7788970d08 100644 --- a/docs/releases/3.1.2.txt +++ b/docs/releases/3.1.2.txt @@ -26,3 +26,6 @@ Bugfixes * Fixed a ``django.contrib.admin.EmptyFieldListFilter`` crash when using on a ``GenericRelation`` (:ticket:`32038`). + +* Fixed a regression in Django 3.1.1 where the admin changelist filter sidebar + would not scroll for a long list of available filters (:ticket:`31986`).