Fixed #31986 -- Fixed admin filter sidebar scrolling.

Regression in 2bc38bc7ca.

Thanks haki for the report.
This commit is contained in:
Tom Carrick 2020-09-11 10:17:50 +02:00 committed by Mariusz Felisiak
parent 6eb3f53bdd
commit 8ee4bb6ffc
8 changed files with 75 additions and 84 deletions

View File

@ -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;
}
@ -31,6 +36,7 @@
#changelist-form .results {
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 {

View File

@ -426,6 +426,7 @@ body.popup .submit-row {
.inline-related.tabular fieldset.module table {
width: 100%;
overflow-x: scroll;
}
.last-related fieldset {

View File

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

View File

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

View File

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

View File

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

View File

@ -53,21 +53,10 @@
{{ cl.formset.non_form_errors }}
{% endif %}
<div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
<div class="changelist-form-container">
{% block search %}{% search_form cl %}{% endblock %}
{% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
{% block filters %}
{% if cl.has_filters %}
<div id="changelist-filter">
<h2>{% translate 'Filter' %}</h2>
{% if cl.has_active_filters %}<h3 id="changelist-filter-clear">
<a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
</h3>{% endif %}
{% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
</div>
{% endif %}
{% endblock %}
<form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
{% if cl.formset %}
<div>{{ cl.formset.management_form }}</div>
@ -81,5 +70,17 @@
{% block pagination %}{% pagination cl %}{% endblock %}
</form>
</div>
{% block filters %}
{% if cl.has_filters %}
<div id="changelist-filter">
<h2>{% translate 'Filter' %}</h2>
{% if cl.has_active_filters %}<h3 id="changelist-filter-clear">
<a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
</h3>{% endif %}
{% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
</div>
{% endif %}
{% endblock %}
</div>
</div>
{% endblock %}

View File

@ -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`).