Skip to content

Fixed #36553 -- Improved semantic structure of admin widgets. #19735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed #36553 -- Improved semantic structure of admin widgets. #19735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions django/contrib/admin/static/admin/css/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ legend, label {
}

.required legend, legend.required,
.required label, label.required {
.required label, label.required, span.required {
font-weight: bold;
}

Expand Down Expand Up @@ -120,7 +120,7 @@ fieldset .inline-heading,
vertical-align: middle;
}

.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
.aligned label + div, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
padding: 6px 0;
margin-top: 0;
margin-bottom: 0;
Expand Down Expand Up @@ -155,6 +155,7 @@ form .aligned div.radiolist {

form .aligned fieldset div.help {
margin-left: 0;
padding-left: 0;
}

form .aligned p.help,
Expand All @@ -164,9 +165,9 @@ form .aligned div.help {
padding-left: 10px;
}

form .aligned p.date div.help.timezonewarning,
form .aligned p.datetime div.help.timezonewarning,
form .aligned p.time div.help.timezonewarning {
form .aligned div.date div.help.timezonewarning,
form .aligned div.datetime div.help.timezonewarning,
form .aligned div.time div.help.timezonewarning {
margin-left: 0;
padding-left: 0;
font-weight: normal;
Expand Down Expand Up @@ -462,6 +463,11 @@ body.popup .submit-row {
font-size: 1rem;
}

.inline-group .tabular td div:not(.help),
.inline-group .tabular td a {
font-size: 0.8125rem;
}

.inline-group .tabular td.original p {
position: absolute;
left: 0;
Expand Down
18 changes: 6 additions & 12 deletions django/contrib/admin/static/admin/css/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,15 +308,17 @@ input[type="submit"], button {
display: none;
}

div.datetime, div.datetime label, div.datetime span,
div.url, div.url label, div.url span,
div.file-upload, div.file-upload label, div.file-upload span {
font-size: 0.8125rem;
}

.datetime input {
width: 50%;
max-width: 120px;
}

.datetime span {
font-size: 0.8125rem;
}

.datetime .timezonewarning {
display: block;
font-size: 0.6875rem;
Expand Down Expand Up @@ -520,14 +522,6 @@ input[type="submit"], button {
margin-left: 0;
}

.aligned p.file-upload {
font-size: 0.8125rem;
}

span.clearable-file-input {
margin-left: 15px;
}
Comment on lines -527 to -529
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-08-16 at 9 08 26 PM

Add the checkbox margin in the clearable file widget apply regardless of screen size. Previously, the margin was applied only on mobile screens and not at all in RTL mode.


span.clearable-file-input label {
font-size: 0.8125rem;
padding-bottom: 0;
Expand Down
4 changes: 4 additions & 0 deletions django/contrib/admin/static/admin/css/rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,10 @@ form .form-row p.datetime {
float: right;
}

span.clearable-file-input {
margin-right: 15px;
}

/* MISC */

.inline-related h2, .inline-group h2 {
Expand Down
40 changes: 20 additions & 20 deletions django/contrib/admin/static/admin/css/widgets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,36 +293,30 @@

/* DATE AND TIME */

p.datetime {
div.datetime {
line-height: 20px;
margin: 0;
padding: 0;
color: var(--body-quiet-color);
font-weight: bold;
font-size: 0.6875rem;
}

p.datetime label {
div.datetime label {
display: inline;
font-size: 0.6875rem;
}

.datetime span {
div.datetime span {
white-space: nowrap;
font-weight: normal;
font-size: 0.6875rem;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0.6875rem was applied to links(Today, Now) in the datetime field, causing the date and time field links to have different sizes. It has now been updated to 0.8175rem, making them the same size.

Before

Screenshot 2025-08-16 at 9 27 02 PM

After

Screenshot 2025-08-16 at 9 27 26 PM

color: var(--body-quiet-color);
font-size: 0.6875rem;
}

.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
margin-left: 5px;
margin-bottom: 4px;
}

table p.datetime {
font-size: 0.6875rem;
margin-left: 0;
padding-left: 0;
}

.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
position: relative;
display: inline-block;
Expand Down Expand Up @@ -360,38 +354,44 @@ table p.datetime {

/* URL */

p.url {
div.url {
line-height: 20px;
margin: 0;
padding: 0;
color: var(--body-quiet-color);
font-size: 0.6875rem;
font-weight: bold;
}

.url a {
font-weight: normal;
div.url label, div.url span {
display: inline;
padding: 0;
font-size: 0.6875rem;
}

/* FILE UPLOADS */

p.file-upload {
div.file-upload {
line-height: 20px;
margin: 0;
padding: 0;
color: var(--body-quiet-color);
font-size: 0.6875rem;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I adjusted the font size to 0.8175rem. I felt the previous size was too small and saw no need to make it any smaller.

Before

Screenshot 2025-08-16 at 9 21 36 PM

After

Screenshot 2025-08-16 at 9 22 08 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is most noticeable in mobile view, but I think this change means that the url is quite a bit smaller than the label
Screenshot from 2025-09-26 13-47-57

I think my preference would be either to leave the sizing alone in this change, or to have something consistent

Copy link
Contributor Author

@Antoliny0919 Antoliny0919 Sep 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. I think it’s better to stick with the 0.8125rem, 0.6875 we were using before.

font-weight: bold;
}

.file-upload a {
font-weight: normal;
div.file-upload label, div.file-upload span {
display: inline;
padding: 0;
font-size: 0.6875rem;
}

.file-upload .deletelink {
margin-left: 5px;
}

span.clearable-file-input {
margin-left: 15px;
}

span.clearable-file-input label {
color: var(--body-fg);
font-size: 0.6875rem;
Expand Down
9 changes: 5 additions & 4 deletions django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@
},
// Add a warning when the time zone in the browser and backend do not match.
addTimezoneWarning: function(inp) {
const isDatetime = inp.closest('div.datetime');
const container = isDatetime ? inp.parentNode.parentNode : inp.parentNode;
const warningClass = DateTimeShortcuts.timezoneWarningClass;
let timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;

Expand All @@ -68,7 +70,7 @@
}

// Check if warning is already there.
if (inp.parentNode.querySelectorAll('.' + warningClass).length) {
if (container.querySelectorAll('.' + warningClass).length) {
return;
}

Expand All @@ -89,14 +91,13 @@
);
}
message = interpolate(message, [timezoneOffset]);

const warning = document.createElement('div');
const id = inp.id;
const field_id = inp.closest('p.datetime') ? id.slice(0, id.lastIndexOf("_")) : id;
const field_id = isDatetime ? id.slice(0, id.lastIndexOf("_")) : id;
warning.classList.add('help', warningClass);
warning.id = `${field_id}_timezone_warning_helptext`;
warning.textContent = message;
inp.parentNode.appendChild(warning);
container.appendChild(warning);
},
// Add clock widget to a given field
addClock: function(inp) {
Expand Down
8 changes: 4 additions & 4 deletions django/contrib/admin/templates/admin/widgets/clearable_file_input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% if widget.is_initial %}<p class="file-upload">{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
{% 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 %}
<span class="clearable-file-input">
<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}{% if widget.attrs.checked %} checked{% endif %}>
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label></span>{% endif %}<br>
{{ widget.input_text }}:{% endif %}
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.is_initial %}</p>{% endif %}
<label for="{{ widget.checkbox_id }}"> {{ widget.clear_checkbox_label }}</label></span>{% endif %}</div>
<div><label {% if widget.attrs.id %}for="{{ widget.attrs.id }}"{% endif %}{% if widget.required %} class="required"{% endif %}>{{ widget.input_text }}:</label>{% endif %}
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.is_initial %}</div></div>{% endif %}
4 changes: 2 additions & 2 deletions django/contrib/admin/templates/admin/widgets/date.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<p class="date">
<div class="date">
{% include "django/forms/widgets/date.html" %}
</p>
</div>
8 changes: 4 additions & 4 deletions django/contrib/admin/templates/admin/widgets/split_datetime.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<p class="datetime">
<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>
<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 %}
</p>
<div class="datetime">
<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>
<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>
</div>
4 changes: 2 additions & 2 deletions django/contrib/admin/templates/admin/widgets/time.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<p class="time">
<div class="time">
{% include "django/forms/widgets/time.html" %}
</p>
</div>
2 changes: 1 addition & 1 deletion django/contrib/admin/templates/admin/widgets/url.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
{% 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 %}
4 changes: 2 additions & 2 deletions js_tests/admin/DateTimeShortcuts.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ QUnit.test('time zone offset warning - date and time field', function(assert) {
const $ = django.jQuery;
const savedOffset = $('body').attr('data-admin-utc-offset');
// DateTimeField with fieldset containing date and time inputs.
const dateTimeField = '<p class="datetime">' +
const dateTimeField = '<div class="datetime">' +
'<input id="id_updated_at_0" type="text" name="updated_at_0" class="vDateField">' +
'<input id="id_updated_at_1" type="text" name="updated_at_1" class="vTimeField">' +
'</p>';
'</div>';
$('#qunit-fixture').append($(dateTimeField));
$('body').attr('data-admin-utc-offset', new Date().getTimezoneOffset() * -60 + 3600);
DateTimeShortcuts.init();
Expand Down
Loading