Skip to content

Commit cec1446

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

File tree

12 files changed

+170
-103
lines changed

12 files changed

+170
-103
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.8175rem;
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: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -313,10 +313,6 @@ input[type="submit"], button {
313313
max-width: 120px;
314314
}
315315

316-
.datetime span {
317-
font-size: 0.8125rem;
318-
}
319-
320316
.datetime .timezonewarning {
321317
display: block;
322318
font-size: 0.6875rem;
@@ -327,6 +323,14 @@ input[type="submit"], button {
327323
color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
328324
}
329325

326+
.url span {
327+
font-size: 1rem;
328+
}
329+
330+
.file-upload span {
331+
font-size: 1rem;
332+
}
333+
330334
.form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
331335
width: 75%;
332336
}
@@ -520,14 +524,6 @@ input[type="submit"], button {
520524
margin-left: 0;
521525
}
522526

523-
.aligned p.file-upload {
524-
font-size: 0.8125rem;
525-
}
526-
527-
span.clearable-file-input {
528-
margin-left: 15px;
529-
}
530-
531527
span.clearable-file-input label {
532528
font-size: 0.8125rem;
533529
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: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -293,22 +293,19 @@
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;
302301
}
303302

304-
p.datetime label {
303+
div.datetime label {
305304
display: inline;
306305
}
307306

308307
.datetime span {
309308
white-space: nowrap;
310-
font-weight: normal;
311-
font-size: 0.6875rem;
312309
color: var(--body-quiet-color);
313310
}
314311

@@ -317,12 +314,6 @@ p.datetime label {
317314
margin-bottom: 4px;
318315
}
319316

320-
table p.datetime {
321-
font-size: 0.6875rem;
322-
margin-left: 0;
323-
padding-left: 0;
324-
}
325-
326317
.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
327318
position: relative;
328319
display: inline-block;
@@ -360,38 +351,40 @@ table p.datetime {
360351

361352
/* URL */
362353

363-
p.url {
354+
div.url {
364355
line-height: 20px;
365356
margin: 0;
366357
padding: 0;
367358
color: var(--body-quiet-color);
368-
font-size: 0.6875rem;
369-
font-weight: bold;
370359
}
371360

372-
.url a {
373-
font-weight: normal;
361+
div.url label {
362+
display: inline;
363+
padding: 0;
374364
}
375365

376366
/* FILE UPLOADS */
377367

378-
p.file-upload {
368+
div.file-upload {
379369
line-height: 20px;
380370
margin: 0;
381371
padding: 0;
382372
color: var(--body-quiet-color);
383-
font-size: 0.6875rem;
384-
font-weight: bold;
385373
}
386374

387-
.file-upload a {
388-
font-weight: normal;
375+
div.file-upload label {
376+
display: inline;
377+
padding: 0;
389378
}
390379

391380
.file-upload .deletelink {
392381
margin-left: 5px;
393382
}
394383

384+
span.clearable-file-input {
385+
margin-left: 15px;
386+
}
387+
395388
span.clearable-file-input label {
396389
color: var(--body-fg);
397390
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)