Skip to content

Commit 8e569f0

Browse files
Antoliny0919Antoliny0919
committed
Fixed #36553 -- Improved semantic structure of admin widgets.
1 parent a627194 commit 8e569f0

File tree

12 files changed

+175
-102
lines changed

12 files changed

+175
-102
lines changed

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ legend, label {
4343
}
4444

4545
.required legend, legend.required,
46-
.required label, label.required {
46+
.required label, label.required, span.required {
4747
font-weight: bold;
4848
}
4949

@@ -120,7 +120,7 @@ fieldset .inline-heading,
120120
vertical-align: middle;
121121
}
122122

123-
.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
123+
.aligned label + div, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
124124
padding: 6px 0;
125125
margin-top: 0;
126126
margin-bottom: 0;
@@ -155,6 +155,7 @@ form .aligned div.radiolist {
155155

156156
form .aligned fieldset div.help {
157157
margin-left: 0;
158+
padding-left: 0;
158159
}
159160

160161
form .aligned p.help,
@@ -164,9 +165,9 @@ form .aligned div.help {
164165
padding-left: 10px;
165166
}
166167

167-
form .aligned p.date div.help.timezonewarning,
168-
form .aligned p.datetime div.help.timezonewarning,
169-
form .aligned p.time div.help.timezonewarning {
168+
form .aligned div.date div.help.timezonewarning,
169+
form .aligned div.datetime div.help.timezonewarning,
170+
form .aligned div.time div.help.timezonewarning {
170171
margin-left: 0;
171172
padding-left: 0;
172173
font-weight: normal;
@@ -462,6 +463,11 @@ body.popup .submit-row {
462463
font-size: 1rem;
463464
}
464465

466+
.inline-group .tabular td div:not(.help),
467+
.inline-group .tabular td a {
468+
font-size: 0.8125rem;
469+
}
470+
465471
.inline-group .tabular td.original p {
466472
position: absolute;
467473
left: 0;

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -308,15 +308,17 @@ input[type="submit"], button {
308308
display: none;
309309
}
310310

311+
div.datetime, div.datetime label, div.datetime span,
312+
div.url, div.url label, div.url span,
313+
div.file-upload, div.file-upload label, div.file-upload span {
314+
font-size: 0.8125rem;
315+
}
316+
311317
.datetime input {
312318
width: 50%;
313319
max-width: 120px;
314320
}
315321

316-
.datetime span {
317-
font-size: 0.8125rem;
318-
}
319-
320322
.datetime .timezonewarning {
321323
display: block;
322324
font-size: 0.6875rem;
@@ -520,14 +522,6 @@ input[type="submit"], button {
520522
margin-left: 0;
521523
}
522524

523-
.aligned p.file-upload {
524-
font-size: 0.8125rem;
525-
}
526-
527-
span.clearable-file-input {
528-
margin-left: 15px;
529-
}
530-
531525
span.clearable-file-input label {
532526
font-size: 0.8125rem;
533527
padding-bottom: 0;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,10 @@ form .form-row p.datetime {
262262
float: right;
263263
}
264264

265+
span.clearable-file-input {
266+
margin-right: 15px;
267+
}
268+
265269
/* MISC */
266270

267271
.inline-related h2, .inline-group h2 {

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -293,36 +293,30 @@
293293

294294
/* DATE AND TIME */
295295

296-
p.datetime {
296+
div.datetime {
297297
line-height: 20px;
298298
margin: 0;
299299
padding: 0;
300300
color: var(--body-quiet-color);
301-
font-weight: bold;
301+
font-size: 0.6875rem;
302302
}
303303

304-
p.datetime label {
304+
div.datetime label {
305305
display: inline;
306+
font-size: 0.6875rem;
306307
}
307308

308-
.datetime span {
309+
div.datetime span {
309310
white-space: nowrap;
310-
font-weight: normal;
311-
font-size: 0.6875rem;
312311
color: var(--body-quiet-color);
312+
font-size: 0.6875rem;
313313
}
314314

315315
.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
316316
margin-left: 5px;
317317
margin-bottom: 4px;
318318
}
319319

320-
table p.datetime {
321-
font-size: 0.6875rem;
322-
margin-left: 0;
323-
padding-left: 0;
324-
}
325-
326320
.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
327321
position: relative;
328322
display: inline-block;
@@ -360,38 +354,44 @@ table p.datetime {
360354

361355
/* URL */
362356

363-
p.url {
357+
div.url {
364358
line-height: 20px;
365359
margin: 0;
366360
padding: 0;
367361
color: var(--body-quiet-color);
368362
font-size: 0.6875rem;
369-
font-weight: bold;
370363
}
371364

372-
.url a {
373-
font-weight: normal;
365+
div.url label, div.url span {
366+
display: inline;
367+
padding: 0;
368+
font-size: 0.6875rem;
374369
}
375370

376371
/* FILE UPLOADS */
377372

378-
p.file-upload {
373+
div.file-upload {
379374
line-height: 20px;
380375
margin: 0;
381376
padding: 0;
382377
color: var(--body-quiet-color);
383378
font-size: 0.6875rem;
384-
font-weight: bold;
385379
}
386380

387-
.file-upload a {
388-
font-weight: normal;
381+
div.file-upload label, div.file-upload span {
382+
display: inline;
383+
padding: 0;
384+
font-size: 0.6875rem;
389385
}
390386

391387
.file-upload .deletelink {
392388
margin-left: 5px;
393389
}
394390

391+
span.clearable-file-input {
392+
margin-left: 15px;
393+
}
394+
395395
span.clearable-file-input label {
396396
color: var(--body-fg);
397397
font-size: 0.6875rem;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@
5959
},
6060
// Add a warning when the time zone in the browser and backend do not match.
6161
addTimezoneWarning: function(inp) {
62+
const isDatetime = inp.closest('div.datetime');
63+
const container = isDatetime ? inp.parentNode.parentNode : inp.parentNode;
6264
const warningClass = DateTimeShortcuts.timezoneWarningClass;
6365
let timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;
6466

@@ -68,7 +70,7 @@
6870
}
6971

7072
// Check if warning is already there.
71-
if (inp.parentNode.querySelectorAll('.' + warningClass).length) {
73+
if (container.querySelectorAll('.' + warningClass).length) {
7274
return;
7375
}
7476

@@ -89,14 +91,13 @@
8991
);
9092
}
9193
message = interpolate(message, [timezoneOffset]);
92-
9394
const warning = document.createElement('div');
9495
const id = inp.id;
95-
const field_id = inp.closest('p.datetime') ? id.slice(0, id.lastIndexOf("_")) : id;
96+
const field_id = isDatetime ? id.slice(0, id.lastIndexOf("_")) : id;
9697
warning.classList.add('help', warningClass);
9798
warning.id = `${field_id}_timezone_warning_helptext`;
9899
warning.textContent = message;
99-
inp.parentNode.appendChild(warning);
100+
container.appendChild(warning);
100101
},
101102
// Add clock widget to a given field
102103
addClock: function(inp) {

‎django/contrib/admin/templates/admin/widgets/clearable_file_input.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
{% if widget.is_initial %}<p class="file-upload">{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
1+
{% if widget.is_initial %}<div class="file-upload"><div><span {% if widget.required %}class="required"{% endif %}>{{ widget.initial_text }}:</span> <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
22
<span class="clearable-file-input">
33
<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}{% if widget.attrs.checked %} checked{% endif %}>
4-
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label></span>{% endif %}<br>
5-
{{ widget.input_text }}:{% endif %}
6-
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.is_initial %}</p>{% endif %}
4+
<label for="{{ widget.checkbox_id }}"> {{ widget.clear_checkbox_label }}</label></span>{% endif %}</div>
5+
<div><label {% if widget.attrs.id %}for="{{ widget.attrs.id }}"{% endif %}{% if widget.required %} class="required"{% endif %}>{{ widget.input_text }}:</label>{% endif %}
6+
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.is_initial %}</div></div>{% endif %}

‎django/contrib/admin/templates/admin/widgets/date.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<p class="date">
1+
<div class="date">
22
{% include "django/forms/widgets/date.html" %}
3-
</p>
3+
</div>

‎django/contrib/admin/templates/admin/widgets/split_datetime.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<p class="datetime">
2-
<label {% if widget.attrs.id %}for="{{ widget.subwidgets.0.attrs.id }}"{% endif %}>{{ date_label }}</label> {% with widget=widget.subwidgets.0 %}{% include widget.template_name %}{% endwith %}<br>
3-
<label {% if widget.attrs.id %}for="{{ widget.subwidgets.1.attrs.id }}"{% endif %}>{{ time_label }}</label> {% with widget=widget.subwidgets.1 %}{% include widget.template_name %}{% endwith %}
4-
</p>
1+
<div class="datetime">
2+
<div><label {% if widget.attrs.id %}for="{{ widget.subwidgets.0.attrs.id }}"{% endif %}{% if widget.required %} class="required"{% endif %}>{{ date_label }}</label> {% with widget=widget.subwidgets.0 %}{% include widget.template_name %}{% endwith %}</div>
3+
<div><label {% if widget.attrs.id %}for="{{ widget.subwidgets.1.attrs.id }}"{% endif %}{% if widget.required %} class="required"{% endif %}>{{ time_label }}</label> {% with widget=widget.subwidgets.1 %}{% include widget.template_name %}{% endwith %}</div>
4+
</div>

‎django/contrib/admin/templates/admin/widgets/time.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<p class="time">
1+
<div class="time">
22
{% include "django/forms/widgets/time.html" %}
3-
</p>
3+
</div>

‎django/contrib/admin/templates/admin/widgets/url.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{% if url_valid %}<p class="url">{{ current_label }} <a href="{{ widget.href }}">{{ widget.value }}</a><br>{{ change_label }} {% endif %}{% include "django/forms/widgets/input.html" %}{% if url_valid %}</p>{% endif %}
1+
{% if url_valid %}<div class="url"><div><span{% if widget.required %} class="required"{% endif %}>{{ current_label }}</span> <a href="{{ widget.href }}">{{ widget.value }}</a></div><div><label {% if widget.attrs.id %}for="{{ widget.attrs.id }}"{% endif %}{% if widget.required %} class="required"{% endif %}>{{ change_label }}</label> {% endif %}{% include "django/forms/widgets/input.html" %}{% if url_valid %}</div></div>{% endif %}

0 commit comments

Comments
 (0)