Skip to content

Commit 4b7c2b6

Browse files
Antoliny0919Antoliny0919
committed
Fixed #34643 -- Moved admin form label to a more accessible place.
1 parent c1aa4a7 commit 4b7c2b6

File tree

17 files changed

+175
-245
lines changed

17 files changed

+175
-245
lines changed

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -498,9 +498,6 @@ input, textarea, select, .form-row p, form .button {
498498
font-weight: normal;
499499
font-size: 0.8125rem;
500500
}
501-
.form-row div.help {
502-
padding: 2px 3px;
503-
}
504501

505502
textarea {
506503
vertical-align: top;
@@ -700,7 +697,7 @@ ul.messagelist li.error {
700697
}
701698

702699
ul.errorlist {
703-
margin: 0 0 4px;
700+
margin: 0;
704701
padding: 0;
705702
color: var(--error-fg);
706703
background: var(--body-bg);
@@ -709,7 +706,6 @@ ul.errorlist {
709706
ul.errorlist li {
710707
font-size: 0.8125rem;
711708
display: block;
712-
margin-bottom: 4px;
713709
overflow-wrap: break-word;
714710
}
715711

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

Lines changed: 9 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.form-row {
66
overflow: hidden;
7-
padding: 10px;
7+
padding: 10px 0;
88
font-size: 0.8125rem;
99
border-bottom: 1px solid var(--hairline-color);
1010
}
@@ -24,14 +24,18 @@ form .form-row p {
2424

2525
.flex-container {
2626
display: flex;
27+
gap: 10px;
28+
flex-direction: column;
29+
align-items: flex-start;
2730
}
2831

29-
.form-multiline {
30-
flex-wrap: wrap;
32+
.flex-container div.checkbox {
33+
display: flex;
3134
}
3235

33-
.form-multiline > div {
34-
padding-bottom: 10px;
36+
.form-multiline {
37+
flex-wrap: wrap;
38+
flex-direction: row;
3539
}
3640

3741
/* FORM LABELS */
@@ -93,16 +97,6 @@ fieldset .inline-heading,
9397

9498
.aligned label {
9599
display: block;
96-
padding: 4px 10px 0 0;
97-
min-width: 160px;
98-
width: 160px;
99-
word-wrap: break-word;
100-
}
101-
102-
.aligned label:not(.vCheckboxLabel):after {
103-
content: '';
104-
display: inline-block;
105-
vertical-align: middle;
106100
}
107101

108102
.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
@@ -127,48 +121,18 @@ fieldset .inline-heading,
127121
width: 350px;
128122
}
129123

130-
form .aligned ul {
131-
margin-left: 160px;
132-
padding-left: 10px;
133-
}
134-
135124
form .aligned div.radiolist {
136125
display: inline-block;
137126
margin: 0;
138127
padding: 0;
139128
}
140129

141-
form .aligned p.help,
142-
form .aligned div.help {
143-
margin-top: 0;
144-
margin-left: 160px;
145-
padding-left: 10px;
146-
}
147-
148-
form .aligned p.date div.help.timezonewarning,
149-
form .aligned p.datetime div.help.timezonewarning,
150-
form .aligned p.time div.help.timezonewarning {
151-
margin-left: 0;
152-
padding-left: 0;
153-
font-weight: normal;
154-
}
155-
156130
form .aligned p.help:last-child,
157131
form .aligned div.help:last-child {
158132
margin-bottom: 0;
159133
padding-bottom: 0;
160134
}
161135

162-
form .aligned input + p.help,
163-
form .aligned textarea + p.help,
164-
form .aligned select + p.help,
165-
form .aligned input + div.help,
166-
form .aligned textarea + div.help,
167-
form .aligned select + div.help {
168-
margin-left: 160px;
169-
padding-left: 10px;
170-
}
171-
172136
form .aligned select option:checked {
173137
background-color: var(--selected-row);
174138
}
@@ -195,22 +159,8 @@ form .aligned table p {
195159
width: 610px;
196160
}
197161

198-
fieldset .fieldBox {
199-
margin-right: 20px;
200-
}
201-
202162
/* WIDE FIELDSETS */
203163

204-
.wide label {
205-
width: 200px;
206-
}
207-
208-
form .wide p.help,
209-
form .wide ul.errorlist,
210-
form .wide div.help {
211-
padding-left: 50px;
212-
}
213-
214164
form div.help ul {
215165
padding-left: 0;
216166
margin-left: 0;

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

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -463,14 +463,6 @@ input[type="submit"], button {
463463
width: calc(100vw - 30px);
464464
}
465465

466-
.flex-container {
467-
flex-flow: column;
468-
}
469-
470-
.flex-container.checkbox-row {
471-
flex-flow: row;
472-
}
473-
474466
textarea {
475467
max-width: none;
476468
}
@@ -484,16 +476,6 @@ input[type="submit"], button {
484476
padding-top: 15px;
485477
}
486478

487-
.aligned label {
488-
width: 100%;
489-
min-width: auto;
490-
padding: 0 0 10px;
491-
}
492-
493-
.aligned label:after {
494-
max-height: 0;
495-
}
496-
497479
.aligned .form-row input,
498480
.aligned .form-row select,
499481
.aligned .form-row textarea {
@@ -511,13 +493,6 @@ input[type="submit"], button {
511493
padding: 1px 0 0 5px;
512494
}
513495

514-
.aligned label + p,
515-
.aligned label + div.help,
516-
.aligned label + div.readonly {
517-
padding: 0;
518-
margin-left: 0;
519-
}
520-
521496
.aligned p.file-upload {
522497
font-size: 0.8125rem;
523498
}
@@ -531,29 +506,6 @@ input[type="submit"], button {
531506
padding-bottom: 0;
532507
}
533508

534-
.aligned .timezonewarning {
535-
flex: 1 0 100%;
536-
margin-top: 5px;
537-
}
538-
539-
form .aligned .form-row div.help {
540-
width: 100%;
541-
margin: 5px 0 0;
542-
padding: 0;
543-
}
544-
545-
form .aligned ul,
546-
form .aligned ul.errorlist {
547-
margin-left: 0;
548-
padding-left: 0;
549-
}
550-
551-
form .aligned div.radiolist {
552-
margin-top: 5px;
553-
margin-right: 15px;
554-
margin-bottom: -3px;
555-
}
556-
557509
form .aligned div.radiolist:not(.inline) div + div {
558510
margin-top: 5px;
559511
}

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,17 +48,6 @@
4848
/* MOBILE */
4949

5050
@media (max-width: 767px) {
51-
[dir="rtl"] .aligned .related-lookup,
52-
[dir="rtl"] .aligned .datetimeshortcuts {
53-
margin-left: 0;
54-
margin-right: 15px;
55-
}
56-
57-
[dir="rtl"] .aligned ul,
58-
[dir="rtl"] form .aligned ul.errorlist {
59-
margin-right: 0;
60-
}
61-
6251
[dir="rtl"] #changelist-filter {
6352
margin-left: 0;
6453
margin-right: 0;

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

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -124,28 +124,8 @@ thead th.sorted .text {
124124

125125
/* FORMS */
126126

127-
.aligned label {
128-
padding: 0 0 3px 1em;
129-
}
130-
131-
.submit-row a.deletelink {
132-
margin-left: 0;
133-
margin-right: auto;
134-
}
135-
136-
.vDateField, .vTimeField {
137-
margin-left: 2px;
138-
}
139-
140-
.aligned .form-row input {
141-
margin-left: 5px;
142-
}
143-
144127
form .aligned ul {
145-
margin-right: 163px;
146-
padding-right: 10px;
147-
margin-left: 0;
148-
padding-left: 0;
128+
margin: 0;
149129
}
150130

151131
form ul.inline li {
@@ -154,48 +134,10 @@ form ul.inline li {
154134
padding-left: 7px;
155135
}
156136

157-
form .aligned p.help,
158-
form .aligned div.help {
159-
margin-left: 0;
160-
margin-right: 160px;
161-
padding-right: 10px;
162-
}
163-
164-
form div.help ul,
165-
form .aligned .checkbox-row + .help,
166-
form .aligned p.date div.help.timezonewarning,
167-
form .aligned p.datetime div.help.timezonewarning,
168-
form .aligned p.time div.help.timezonewarning {
169-
margin-right: 0;
170-
padding-right: 0;
171-
}
172-
173-
form .wide p.help,
174-
form .wide ul.errorlist,
175-
form .wide div.help {
176-
padding-left: 0;
177-
padding-right: 50px;
178-
}
179-
180137
.submit-row {
181138
text-align: right;
182139
}
183140

184-
fieldset .fieldBox {
185-
margin-left: 20px;
186-
margin-right: 0;
187-
}
188-
189-
.errorlist li {
190-
background-position: 100% 12px;
191-
padding: 0;
192-
}
193-
194-
.errornote {
195-
background-position: 100% 12px;
196-
padding: 10px 12px;
197-
}
198-
199141
/* WIDGETS */
200142

201143
.calendarnav-previous {

‎django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
}
6969

7070
// Check if warning is already there.
71-
if (inp.parentNode.querySelectorAll('.' + warningClass).length) {
71+
if (inp.parentNode.parentNode.querySelectorAll('.' + warningClass).length) {
7272
return;
7373
}
7474

@@ -93,7 +93,12 @@
9393
const warning = document.createElement('div');
9494
warning.classList.add('help', warningClass);
9595
warning.textContent = message;
96-
inp.parentNode.appendChild(warning);
96+
const errorList = inp.parentNode.parentNode.querySelector('ul.errorlist');
97+
if (errorList) {
98+
errorList.before(warning);
99+
} else {
100+
inp.parentNode.before(warning);
101+
}
97102
},
98103
// Add clock widget to a given field
99104
addClock: function(inp) {

‎django/contrib/admin/templates/admin/auth/user/change_password.html

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,29 +39,38 @@
3939
<fieldset class="module aligned">
4040

4141
<div class="form-row">
42-
{{ form.usable_password.errors }}
43-
<div class="flex-container">{{ form.usable_password.label_tag }} {{ form.usable_password }}</div>
44-
{% if form.usable_password.help_text %}
45-
<div class="help"{% if form.usable_password.id_for_label %} id="{{ form.usable_password.id_for_label }}_helptext"{% endif %}>
46-
<p>{{ form.usable_password.help_text|safe }}</p>
42+
<div class="flex-container{% if form.usable_password.errors %} errors{% endif %}">
43+
{{ form.usable_password.label_tag }}
44+
{% if form.usable_password.help_text %}
45+
<div class="help"{% if form.usable_password.id_for_label %} id="{{ form.usable_password.id_for_label }}_helptext"{% endif %}>
46+
<p>{{ form.usable_password.help_text|safe }}</p>
47+
</div>
48+
{% endif %}
49+
{{ form.usable_password.errors }}
50+
{{ form.usable_password }}
4751
</div>
48-
{% endif %}
4952
</div>
5053

5154
<div class="form-row field-password1">
52-
{{ form.password1.errors }}
53-
<div class="flex-container">{{ form.password1.label_tag }} {{ form.password1 }}</div>
55+
<div class="flex-container{% if form.password1.errors %} errors{% endif %}">
56+
{{ form.password1.label_tag }}
5457
{% if form.password1.help_text %}
5558
<div class="help"{% if form.password1.id_for_label %} id="{{ form.password1.id_for_label }}_helptext"{% endif %}>{{ form.password1.help_text|safe }}</div>
5659
{% endif %}
60+
{{ form.password1.errors }}
61+
{{ form.password1 }}
62+
</div>
5763
</div>
5864

5965
<div class="form-row field-password2">
60-
{{ form.password2.errors }}
61-
<div class="flex-container">{{ form.password2.label_tag }} {{ form.password2 }}</div>
66+
<div class="flex-container{% if form.password2.errors %} errors{% endif %}">
67+
{{ form.password2.label_tag }}
6268
{% if form.password2.help_text %}
6369
<div class="help"{% if form.password2.id_for_label %} id="{{ form.password2.id_for_label }}_helptext"{% endif %}>{{ form.password2.help_text|safe }}</div>
6470
{% endif %}
71+
{{ form.password2.errors }}
72+
{{ form.password2 }}
73+
</div>
6574
</div>
6675

6776
</fieldset>

0 commit comments

Comments
 (0)