8000 Fixed #31986 -- Fixed admin filter sidebar scrolling. · django/django@8ee4bb6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8ee4bb6

Browse files
knyghtyfelixxm
knyghty
authored and
felixxm
committed
Fixed #31986 -- Fixed admin filter sidebar scrolling.
Regression in 2bc38bc. Thanks haki for the report.
1 parent 6eb3f53 commit 8ee4bb6

File tree

8 files changed

+75
-84
lines changed

8 files changed

+75
-84
lines changed

‎django/contrib/admin/static/admin/css/changelists.css

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
/* CHANGELISTS */
22

33
#changelist {
4-
position: relative;
5-
width: 100%;
4+
display: flex;
5+
align-items: flex-start;
6+
justify-content: space-between;
7+
}
8+
9+
#changelist .changelist-form-container {
10+
flex: 1 1 auto;
11+
min-width: 0;
612
}
713

814
#changelist table {
@@ -21,7 +27,6 @@
2127

2228
.change-list .filtered .results, .change-list .filtered .paginator,
2329
.filtered #toolbar, .filtered div.xfull {
24-
margin-right: 280px;
2530
width: auto;
2631
}
2732

@@ -30,7 +35,8 @@
3035
}
3136

3237
#changelist-form .results {
33-
overflow-x: auto;
38+
overflow-x: auto;
39+
width: 100%;
3440
}
3541

3642
#changelist .toplinks {
@@ -67,7 +73,7 @@
6773

6874
/* TOOLBAR */
6975

70-
#changelist #toolbar {
76+
#toolbar {
7177
padding: 8px 10px;
7278
margin-bottom: 15px;
7379
border-top: 1px solid #eee;
@@ -76,28 +82,28 @@
7682
color: #666;
7783
}
7884

79-
#changelist #toolbar form input {
85+
#toolbar form input {
8086
border-radius: 4px;
8187
font-size: 14px;
8288
padding: 5px;
8389
color: #333;
8490
}
8591

86-
#changelist #toolbar form #searchbar {
92+
#searchbar {
8793
height: 19px;
8894
border: 1px solid #ccc;
8995
padding: 2px 5px;
9096
margin: 0;
9197
vertical-align: top;
9298
font-size: 13px;
93-
max-width: 230px;
99+
max-width: 100%;
94100
}
95101

96-
#changelist #toolbar form #searchbar:focus {
102+
#searchbar:focus {
97103
border-color: #999;
98104
}
99105

100-
#changelist #toolbar form input[type="submit"] {
106+
#toolbar form input[type="submit"] {
101107
border: 1px solid #ccc;
102108
font-size: 13px;
103109
padding: 4px 8px;
@@ -109,27 +115,24 @@
109115
color: #333;
110116
}
111117

112-
#changelist #toolbar form input[type="submit"]:focus,
113-
#changelist #toolbar form input[type="submit"]:hover {
118+
#toolbar form input[type="submit"]:focus,
119+
#toolbar form input[type="submit"]:hover {
114120
border-color: #999;
115121
}
116122

117-
#changelist #changelist-search img {
123+
#changelist-search img {
118124
vertical-align: middle;
119125
margin-right: 4px;
120126
}
121127

122128
/* FILTER COLUMN */
123129

124130
#changelist-filter {
125-
position: absolute;
126-
top: 0;
127-
right: 0;
128-
z-index: 1000;
131+
order: 1;
129132
width: 240px;
130133
background: #f8f8f8;
131134
border-left: none;
132-
margin: 0;
135+
margin: 0 0 0 30px;
133136
}
134137

135138
#changelist-filter h2 {
@@ -227,6 +230,7 @@
227230
line-height: 22px;
228231
margin: 0;
229232
border-top: 1px solid #ddd;
233+
width: 100%;
230234
}
231235

232236
.paginator a:link, .paginator a:visited {
@@ -266,7 +270,6 @@
266270
/* ACTIONS */
267271

268272
.filtered .actions {
269-
margin-right: 280px;
270273
border-right: none;
271274
}
272275

@@ -286,6 +289,7 @@
286289
border-bottom: none;
287290
line-height: 24px;
288291
color: #999;
292+
width: 100%;
289293
}
290294

291295
#changelist .actions.selected {

‎django/contrib/admin/static/admin/css/forms.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,7 @@ body.popup .submit-row {
426426

427427
.inline-related.tabular fieldset.module table {
428428
width: 100%;
429+
overflow-x: scroll;
429430
}
430431

431432
.last-related fieldset {

‎django/contrib/admin/static/admin/css/nav_sidebar.css

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,21 @@
9999
background: #ffc;
100100
}
101101

102+
.main > #nav-sidebar + .content {
103+
max-width: calc(100% - 23px);
104+
}
105+
106+
.main.shifted > #nav-sidebar + .content {
107+
max-width: calc(100% - 299px);
108+
}
109+
102110
@media (max-width: 767px) {
103111
#nav-sidebar, #toggle-nav-sidebar {
104112
display: none;
105113
}
106-
}
107114

108-
.change-list .main > #nav-sidebar+.content {
109-
overflow: hidden;
115+
.main > #nav-sidebar + .content,
116+
.main.shifted > #nav-sidebar + .content {
117+
max-width: 100%;
118+
}
110119
}

‎django/contrib/admin/static/admin/css/responsive.css

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -93,28 +93,32 @@ input[type="submit"], button {
9393

9494
/* Changelist */
9595

96-
#changelist #toolbar {
96+
#toolbar {
9797
border: none;
9898
padding: 15px;
9999
}
100100

101101
#changelist-search > div {
102102
display: flex;
103-
flex-wrap: wrap;
103+
flex-wrap: nowrap;
104104
max-width: 480px;
105105
}
106106

107107
#changelist-search label {
108108
line-height: 22px;
109109
}
110110

111-
#changelist #toolbar form #searchbar {
111+
#toolbar form #searchbar {
112112
flex: 1 0 auto;
113113
width: 0;
114114
height: 22px;
115115
margin: 0 10px 0 6px;
116116
}
117117

118+
#toolbar form input[type=submit] {
119+
flex: 0 1 auto;
120+
}
121+
118122
#changelist-search .quiet {
119123
width: 100%;
120124
margin: 5px 0 0 25px;
@@ -159,9 +163,6 @@ input[type="submit"], button {
159163
.change-list .filtered .paginator,
160164
.filtered #toolbar,
161165
.filtered .actions,
162-
.filtered div.xfull {
163-
margin-right: 230px;
164-
}
165166

166167
#changelist .paginator {
167168
border-top-color: #eee;
@@ -500,25 +501,16 @@ input[type="submit"], button {
500501
/* Changelist */
501502

502503
#changelist {
503-
display: flex;
504+
align-items: stretch;
504505
flex-direction: column;
505506
}
506507

507-
#changelist #toolbar {
508-
order: 1;
508+
#toolbar {
509509
padding: 10px;
510510
}
511511

512-
#changelist .xfull {
513-
order: 2;
514-
}
515-
516-
#changelist-form {
517-
order: 3;
518-
}
519-
520512
#changelist-filter {
521-
order: 4;
513+
margin-left: 0;
522514
}
523515

524516
#changelist .actions label {
@@ -534,11 +526,6 @@ input[type="submit"], button {
534526
flex: 1 0 100%;
535527
}
536528

537-
.change-list .filtered .results, .change-list .filtered .paginator,
538-
.filtered #toolbar, .filtered .actions, .filtered div.xfull {
539-
margin-right: 0;
540-
}
541-
542529
#changelist-filter {
543530
position: static;
544531
width: auto;
@@ -570,7 +557,6 @@ input[type="submit"], button {
570557
.aligned .form-row,
571558
.aligned .form-row > div {
572559
display: flex;
573-
flex-wrap: wrap;
574560
max-width: 100vw;
575561
}
576562

‎django/contrib/admin/static/admin/css/responsive_rtl.css

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@
2323
[dir="rtl"] .change-list .filtered .paginator,
2424
[dir="rtl"] .filtered #toolbar,
2525
[dir="rtl"] .filtered div.xfull,
26-
[dir="rtl"] .filtered .actions {
27-
margin-right: 0;
28-
margin-left: 230px;
26+
[dir="rtl"] .filtered .actions,
27+
[dir="rtl"] #changelist-filter {
28+
margin-left: 0;
2929
}
3030

3131
[dir="rtl"] .inline-group ul.tools a.add,
@@ -63,14 +63,6 @@
6363
/* MOBILE */
6464

6565
@media (max-width: 767px) {
66-
[dir="rtl"] .change-list .filtered .results,
67-
[dir="rtl"] .change-list .filtered .paginator,
68-
[dir="rtl"] .filtered #toolbar,
69-
[dir="rtl"] .filtered div.xfull,
70-
[dir="rtl"] .filtered .actions {
71-
margin-left: 0;
72-
}
73-
7466
[dir="rtl"] .aligned .related-lookup,
7567
[dir="rtl"] .aligned .datetimeshortcuts {
7668
margin-left: 0;
@@ -80,4 +72,9 @@
8072
[dir="rtl"] .aligned ul {
8173
margin-right: 0;
8274
}
75+
76+
[dir="rtl"] #changelist-filter {
77+
margin-left: 0;
78+
margin-right: 0;
79+
}
8380
}

‎django/contrib/admin/static/admin/css/rtl.css

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,10 @@ thead th.sorted .text {
8787
}
8888

8989
#changelist-filter {
90-
right: auto;
91-
left: 0;
9290
border-left: none;
9391
border-right: none;
94-
}
95-
96-
.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull {
97-
margin-right: 0;
98-
margin-left: 280px;
92+
margin-left: 0;
93+
margin-right: 30px;
9994
}
10095

10196
#changelist-filter li.selected {
@@ -107,11 +102,6 @@ thead th.sorted .text {
107102
margin-right: -15px;
108103
}
109104

110-
.filtered .actions {
111-
margin-left: 280px;
112-
margin-right: 0;
113-
}
114-
115105
#changelist table tbody td:first-child, #changelist table tbody th:first-child {
116106
border-right: none;
117107
border-left: none;

‎django/contrib/admin/templates/admin/change_list.html

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,23 @@
5353
{{ cl.formset.non_form_errors }}
5454
{% endif %}
5555
<div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
56-
{% block search %}{% search_form cl %}{% endblock %}
57-
{% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
56+
<div class="changelist-form-container">
57+
{% block search %}{% search_form cl %}{% endblock %}
58+
{% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
5859

60+
<form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
61+
{% if cl.formset %}
62+
<div>{{ cl.formset.management_form }}</div>
63+
{% endif %}
64+
65+
{% block result_list %}
66+
{% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
67+
{% result_list cl %}
68+
{% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
69+
{% endblock %}
70+
{% block pagination %}{% pagination cl %}{% endblock %}
71+
</form>
72+
</div>
5973
{% block filters %}
6074
{% if cl.has_filters %}
6175
<div id="changelist-filter">
@@ -67,19 +81,6 @@ <h2>{% translate 'Filter' %}</h2>
6781
</div>
6882
{% endif %}
6983
{% endblock %}
70-
71-
<form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
72-
{% if cl.formset %}
73-
<div>{{ cl.formset.management_form }}</div>
74-
{% endif %}
75-
76-
{% block result_list %}
77-
{% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
78-
{% result_list cl %}
79-
{% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
80-
{% endblock %}
81-
{% block pagination %}{% pagination cl %}{% endblock %}
82-
</form>
8384
</div>
8485
</div>
8586
{% endblock %}

‎docs/releases/3.1.2.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,6 @@ Bugfixes
2626

2727
* Fixed a ``django.contrib.admin.EmptyFieldListFilter`` crash when using on a
2828
``GenericRelation`` (:ticket:`32038`).
29+
30+
* Fixed a regression in Django 3.1.1 where the admin changelist filter sidebar
31+
would not scroll for a long list of available filters (:ticket:`31986`).

0 commit comments

Comments
 (0)
0