1
0
mirror of https://github.com/django/django.git synced 2025-01-27 10:39:40 +00:00

[4.2.x] Fixed #34383 -- Fixed layout of admin fieldsets with multiple fields on the same line.

Thanks Antonio Candido Nazareth junior for the report.

Regression in 96a598356a9ea8c2c05b22cadc12e256a3b295fd.

Co-authored-by: Mariusz Felisiak <felisiak.mariusz@gmail.com>

Backport of d687febce5868545f99974d2499a91f81a32fef5 from main
This commit is contained in:
Tom Carrick 2023-03-23 12:53:06 +01:00 committed by Mariusz Felisiak
parent ded3334af6
commit 788f7b8100
8 changed files with 43 additions and 38 deletions

View File

@ -22,11 +22,15 @@ form .form-row p {
padding-left: 0;
}
.form-row > div {
.flex-container {
display: flex;
flex-wrap: wrap;
}
.form-multiline > div {
padding-bottom: 10px;
}
/* FORM LABELS */
label {
@ -191,7 +195,6 @@ form .aligned table p {
}
fieldset .fieldBox {
float: left;
margin-right: 20px;
}

View File

@ -390,10 +390,6 @@ input[type="submit"], button {
display: none;
}
form .form-row p.datetime {
width: 100%;
}
.datetime input {
width: 50%;
max-width: 120px;
@ -564,8 +560,6 @@ input[type="submit"], button {
.aligned .form-row,
.aligned .form-row > div {
display: flex;
flex-wrap: wrap;
max-width: 100vw;
}
@ -573,6 +567,10 @@ input[type="submit"], button {
width: calc(100vw - 30px);
}
.flex-container {
flex-flow: column;
}
textarea {
max-width: none;
}

View File

@ -170,7 +170,6 @@ form .wide input + div.help {
}
fieldset .fieldBox {
float: right;
margin-left: 20px;
margin-right: 0;
}

View File

@ -32,7 +32,7 @@
<div class="form-row">
{{ form.password1.errors }}
<div>{{ form.password1.label_tag }} {{ form.password1 }}</div>
<div class="flex-container">{{ form.password1.label_tag }} {{ form.password1 }}</div>
{% if form.password1.help_text %}
<div class="help"{% if form.password1.id_for_label %} id="{{ form.password1.id_for_label }}_helptext">{% endif %}{{ form.password1.help_text|safe }}</div>
{% endif %}
@ -40,7 +40,7 @@
<div class="form-row">
{{ form.password2.errors }}
<div>{{ form.password2.label_tag }} {{ form.password2 }}</div>
<div class="flex-container">{{ form.password2.label_tag }} {{ form.password2 }}</div>
{% if form.password2.help_text %}
<div class="help"{% if form.password2.id_for_label %} id="{{ form.password2.id_for_label }}_helptext"{% endif %}>{{ form.password2.help_text|safe }}</div>
{% endif %}

View File

@ -5,27 +5,30 @@
{% endif %}
{% for line in fieldset %}
<div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
{% if line.fields|length == 1 %}{{ line.errors }}{% endif %}
{% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="flex-container form-multiline">{% endif %}
{% for field in line %}
<div{% if not line.fields|length == 1 %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
<div>
{% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
{% if field.is_checkbox %}
{{ field.field }}{{ field.label_tag }}
{% else %}
{{ field.label_tag }}
{% if field.is_readonly %}
<div class="readonly">{{ field.contents }}</div>
{% else %}
{{ field.field }}
{% endif %}
<div class="flex-container{% if not line.fields|length == 1 %} fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}{% elif field.is_checkbox %} checkbox-row{% endif %}">
{% if field.is_checkbox %}
{{ field.field }}{{ field.label_tag }}
{% else %}
{{ field.label_tag }}
{% if field.is_readonly %}
<div class="readonly">{{ field.contents }}</div>
{% else %}
{{ field.field }}
{% endif %}
{% endif %}
</div>
{% if field.field.help_text %}
<div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
<div>{{ field.field.help_text|safe }}</div>
</div>
{% endif %}
</div>
{% if field.field.help_text %}
<div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
<div>{{ field.field.help_text|safe }}</div>
</div>
{% endif %}
{% endfor %}
{% if not line.fields|length == 1 %}</div>{% endif %}
</div>
{% endfor %}
</fieldset>

View File

@ -33,12 +33,12 @@
<div class="form-row">
{{ form.old_password.errors }}
<div>{{ form.old_password.label_tag }} {{ form.old_password }}</div>
<div class="flex-container">{{ form.old_password.label_tag }} {{ form.old_password }}</div>
</div>
<div class="form-row">
{{ form.new_password1.errors }}
<div>{{ form.new_password1.label_tag }} {{ form.new_password1 }}</div>
<div class="flex-container">{{ form.new_password1.label_tag }} {{ form.new_password1 }}</div>
{% if form.new_password1.help_text %}
<div class="help"{% if form.new_password1.id_for_label %} id="{{ form.new_password1.id_for_label }}_helptext"{% endif %}>{{ form.new_password1.help_text|safe }}</div>
{% endif %}
@ -46,7 +46,7 @@
<div class="form-row">
{{ form.new_password2.errors }}
<div>{{ form.new_password2.label_tag }} {{ form.new_password2 }}</div>
<div class="flex-container">{{ form.new_password2.label_tag }} {{ form.new_password2 }}</div>
{% if form.new_password2.help_text %}
<div class="help"{% if form.new_password2.id_for_label %} id="{{ form.new_password2.id_for_label }}_helptext"{% endif %}>{{ form.new_password2.help_text|safe }}</div>
{% endif %}

View File

@ -353,13 +353,13 @@ class TestInline(TestDataMixin, TestCase):
)
# The div containing the position field is hidden.
self.assertInHTML(
'<div class="fieldBox field-position hidden">'
'<div class="flex-container fieldBox field-position hidden">'
'<label class="inline">Position:</label>'
'<div class="readonly">0</div></div>',
response.rendered_content,
)
self.assertInHTML(
'<div class="fieldBox field-position hidden">'
'<div class="flex-container fieldBox field-position hidden">'
'<label class="inline">Position:</label>'
'<div class="readonly">1</div></div>',
response.rendered_content,
@ -382,14 +382,14 @@ class TestInline(TestDataMixin, TestCase):
# The whole line containing position field is hidden.
self.assertInHTML(
'<div class="form-row hidden field-position">'
"<div><label>Position:</label>"
'<div class="readonly">0</div></div></div>',
'<div><div class="flex-container"><label>Position:</label>'
'<div class="readonly">0</div></div></div></div>',
response.rendered_content,
)
self.assertInHTML(
'<div class="form-row hidden field-position">'
"<div><label>Position:</label>"
'<div class="readonly">1</div></div></div>',
'<div><div class="flex-container"><label>Position:</label>'
'<div class="readonly">1</div></div></div></div>',
response.rendered_content,
)

View File

@ -8076,11 +8076,13 @@ class TestLabelVisibility(TestCase):
self.assert_field_visible(response, "second")
def assert_field_visible(self, response, field_name):
self.assertContains(response, '<div class="fieldBox field-%s">' % field_name)
self.assertContains(
response, f'<div class="flex-container fieldBox field-{field_name}">'
)
def assert_field_hidden(self, response, field_name):
self.assertContains(
response, '<div class="fieldBox field-%s hidden">' % field_name
response, f'<div class="flex-container fieldBox field-{field_name} hidden">'
)
def assert_fieldline_visible(self, response):