1
0
mirror of https://github.com/django/django.git synced 2025-03-31 19:46:42 +00:00

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>
This commit is contained in:
Tom Carrick 2023-03-23 12:53:06 +01:00 committed by Mariusz Felisiak
parent 21757bbdcd
commit d687febce5
8 changed files with 43 additions and 38 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -5,27 +5,30 @@
{% endif %} {% endif %}
{% for line in fieldset %} {% 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 %}"> <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 %} {% 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 not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
{% if field.is_checkbox %} <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 %}">
{{ field.field }}{{ field.label_tag }} {% if field.is_checkbox %}
{% else %} {{ field.field }}{{ field.label_tag }}
{{ field.label_tag }} {% else %}
{% if field.is_readonly %} {{ field.label_tag }}
<div class="readonly">{{ field.contents }}</div> {% if field.is_readonly %}
{% else %} <div class="readonly">{{ field.contents }}</div>
{{ field.field }} {% else %}
{% endif %} {{ 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 %} {% endif %}
</div> </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 %} {% endfor %}
{% if not line.fields|length == 1 %}</div>{% endif %}
</div> </div>
{% endfor %} {% endfor %}
</fieldset> </fieldset>

View File

@ -33,12 +33,12 @@
<div class="form-row"> <div class="form-row">
{{ form.old_password.errors }} {{ 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>
<div class="form-row"> <div class="form-row">
{{ form.new_password1.errors }} {{ 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 %} {% 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> <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 %} {% endif %}
@ -46,7 +46,7 @@
<div class="form-row"> <div class="form-row">
{{ form.new_password2.errors }} {{ 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 %} {% 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> <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 %} {% endif %}

View File

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

View File

@ -8105,11 +8105,13 @@ class TestLabelVisibility(TestCase):
self.assert_field_visible(response, "second") self.assert_field_visible(response, "second")
def assert_field_visible(self, response, field_name): 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): def assert_field_hidden(self, response, field_name):
self.assertContains( 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): def assert_fieldline_visible(self, response):