diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css index ec2ad6ab9370..ea7707eb89bc 100644 --- a/django/contrib/admin/static/admin/css/base.css +++ b/django/contrib/admin/static/admin/css/base.css @@ -498,9 +498,6 @@ input, textarea, select, .form-row p, form .button { font-weight: normal; font-size: 0.8125rem; } -.form-row div.help { - padding: 2px 3px; -} textarea { vertical-align: top; @@ -700,7 +697,7 @@ ul.messagelist li.error { } ul.errorlist { - margin: 0 0 4px; + margin: 0; padding: 0; color: var(--error-fg); background: var(--body-bg); @@ -709,7 +706,6 @@ ul.errorlist { ul.errorlist li { font-size: 0.8125rem; display: block; - margin-bottom: 4px; overflow-wrap: break-word; } @@ -731,17 +727,6 @@ td ul.errorlist li { margin: 0; } -.form-row.errors { - margin: 0; - border: none; - border-bottom: 1px solid var(--hairline-color); - background: none; -} - -.form-row.errors ul.errorlist li { - padding-left: 0; -} - .errors input, .errors select, .errors textarea, td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea { border: 1px solid var(--error-fg); diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css index 5d2c1d2018f4..c4743681849f 100644 --- a/django/contrib/admin/static/admin/css/forms.css +++ b/django/contrib/admin/static/admin/css/forms.css @@ -24,15 +24,18 @@ form .form-row p { .flex-container { display: flex; + gap: 10px; + flex-direction: column; + align-items: flex-start; } -.form-multiline { - flex-wrap: wrap; +.flex-container div.checkbox { + display: flex; } -.form-multiline > div, -.form-multiline > fieldset { - padding-bottom: 10px; +.form-multiline { + flex-wrap: wrap; + flex-direction: row; } /* FORM LABELS */ @@ -41,6 +44,7 @@ legend, label { font-weight: normal; color: var(--body-quiet-color); font-size: 0.8125rem; + padding: 0; } .required legend, legend.required, @@ -59,7 +63,8 @@ form div.radiolist.inline div { } form div.radiolist label { - width: auto; + display: inline-block; + padding: 4px 10px 0 0; } form div.radiolist input[type="radio"] { @@ -94,7 +99,6 @@ fieldset .inline-heading, /* ALIGNED FIELDSETS */ .aligned fieldset { - flex-grow: 1; border-top: none; } @@ -104,21 +108,7 @@ fieldset .inline-heading, .aligned legend { float: inline-start; -} - -.aligned legend, -.aligned label { - display: block; - padding: 4px 10px 0 0; - min-width: 160px; - width: 160px; - word-wrap: break-word; -} - -.aligned label:not(.vCheckboxLabel):after { - content: ''; - display: inline-block; - vertical-align: middle; + padding: 0.5rem 0; } .aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly { @@ -143,30 +133,14 @@ fieldset .inline-heading, width: 350px; } -form .aligned ul { - margin-left: 160px; - padding-left: 10px; -} - form .aligned div.radiolist { display: block; margin: 0; padding: 0; } -form .aligned p.help, -form .aligned div.help { - margin-top: 0; - margin-left: 160px; - 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 fieldset div.help { margin-left: 0; - padding-left: 0; - font-weight: normal; } form .aligned p.help:last-child, @@ -175,16 +149,6 @@ form .aligned div.help:last-child { padding-bottom: 0; } -form .aligned input + p.help, -form .aligned textarea + p.help, -form .aligned select + p.help, -form .aligned input + div.help, -form .aligned textarea + div.help, -form .aligned select + div.help { - margin-left: 160px; - padding-left: 10px; -} - form .aligned select option:checked { background-color: var(--selected-row); color: var(--body-fg); @@ -194,6 +158,11 @@ form .aligned ul li { list-style: none; } +form .aligned div.help ul { + padding-left: 0; + margin-left: 0; +} + form .aligned table p { margin-left: 0; padding-left: 0; @@ -212,32 +181,6 @@ form .aligned table p { width: 610px; } -fieldset .fieldBox { - margin-right: 20px; -} - -/* WIDE FIELDSETS */ - -.wide label, -.wide legend { - width: 200px; -} - -form .wide p.help, -form .wide ul.errorlist, -form .wide div.help { - padding-left: 50px; -} - -form div.help ul { - padding-left: 0; - margin-left: 0; -} - -.colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField { - width: 450px; -} - /* COLLAPSIBLE FIELDSETS */ .collapse summary .fieldset-heading, diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css index 93abf79953c3..c8af03ba90e4 100644 --- a/django/contrib/admin/static/admin/css/responsive.css +++ b/django/contrib/admin/static/admin/css/responsive.css @@ -205,12 +205,6 @@ input[type="submit"], button { min-height: 0; } - fieldset .fieldBox + .fieldBox { - margin-top: 10px; - padding-top: 10px; - border-top: 1px solid var(--hairline-color); - } - textarea { max-width: 100%; max-height: 120px; @@ -224,7 +218,7 @@ input[type="submit"], button { .aligned .datetimeshortcuts, .aligned .related-lookup + strong { align-self: center; - margin-left: 15px; + margin-left: 0.5rem; } form .aligned div.radiolist { @@ -465,11 +459,7 @@ input[type="submit"], button { } .flex-container { - flex-flow: column; - } - - .flex-container.checkbox-row { - flex-flow: row; + align-items: stretch; } textarea { @@ -480,22 +470,6 @@ input[type="submit"], button { width: auto; } - fieldset .fieldBox + .fieldBox { - margin-top: 15px; - padding-top: 15px; - } - - .aligned legend, - .aligned label { - width: 100%; - min-width: auto; - padding: 0 0 10px; - } - - .aligned label:after { - max-height: 0; - } - .aligned .form-row input, .aligned .form-row select, .aligned .form-row textarea { @@ -513,13 +487,6 @@ input[type="submit"], button { padding: 1px 0 0 5px; } - .aligned label + p, - .aligned label + div.help, - .aligned label + div.readonly { - padding: 0; - margin-left: 0; - } - .aligned p.file-upload { font-size: 0.8125rem; } @@ -533,37 +500,10 @@ input[type="submit"], button { padding-bottom: 0; } - .aligned .timezonewarning { - flex: 1 0 100%; - margin-top: 5px; - } - - form .aligned .form-row div.help { - width: 100%; - margin: 5px 0 0; - padding: 0; - } - - form .aligned ul, - form .aligned ul.errorlist { - margin-left: 0; - padding-left: 0; - } - - form .aligned div.radiolist { - margin-top: 5px; - margin-right: 15px; - margin-bottom: -3px; - } - form .aligned div.radiolist:not(.inline) div + div { margin-top: 5px; } - form .aligned fieldset div.flex-container { - display: unset; - } - /* Related widget */ .related-widget-wrapper { diff --git a/django/contrib/admin/static/admin/css/responsive_rtl.css b/django/contrib/admin/static/admin/css/responsive_rtl.css index b336bbfbe9be..cd3286768871 100644 --- a/django/contrib/admin/static/admin/css/responsive_rtl.css +++ b/django/contrib/admin/static/admin/css/responsive_rtl.css @@ -48,17 +48,6 @@ /* MOBILE */ @media (max-width: 767px) { - [dir="rtl"] .aligned .related-lookup, - [dir="rtl"] .aligned .datetimeshortcuts { - margin-left: 0; - margin-right: 15px; - } - - [dir="rtl"] .aligned ul, - [dir="rtl"] form .aligned ul.errorlist { - margin-right: 0; - } - [dir="rtl"] #changelist-filter { margin-left: 0; margin-right: 0; diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css index ba4d0bf549dd..aa7c4e8636d6 100644 --- a/django/contrib/admin/static/admin/css/rtl.css +++ b/django/contrib/admin/static/admin/css/rtl.css @@ -124,29 +124,8 @@ thead th.sorted .text { /* FORMS */ -.aligned label, -.aligned legend { - padding: 0 0 3px 1em; -} - -.submit-row a.deletelink { - margin-left: 0; - margin-right: auto; -} - -.vDateField, .vTimeField { - margin-left: 2px; -} - -.aligned .form-row input { - margin-left: 5px; -} - form .aligned ul { - margin-right: 163px; - padding-right: 10px; - margin-left: 0; - padding-left: 0; + margin: 0; } form ul.inline li { @@ -155,48 +134,10 @@ form ul.inline li { padding-left: 7px; } -form .aligned p.help, -form .aligned div.help { - margin-left: 0; - margin-right: 160px; - padding-right: 10px; -} - -form div.help ul, -form .aligned .checkbox-row + .help, -form .aligned p.date div.help.timezonewarning, -form .aligned p.datetime div.help.timezonewarning, -form .aligned p.time div.help.timezonewarning { - margin-right: 0; - padding-right: 0; -} - -form .wide p.help, -form .wide ul.errorlist, -form .wide div.help { - padding-left: 0; - padding-right: 50px; -} - .submit-row { text-align: right; } -fieldset .fieldBox { - margin-left: 20px; - margin-right: 0; -} - -.errorlist li { - background-position: 100% 12px; - padding: 0; -} - -.errornote { - background-position: 100% 12px; - padding: 10px 12px; -} - /* WIDGETS */ .calendarnav-previous { diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index c0de045c6802..c2a3836b90fd 100644 --- a/django/contrib/admin/static/admin/css/widgets.css +++ b/django/contrib/admin/static/admin/css/widgets.css @@ -302,7 +302,8 @@ p.datetime { } p.datetime label { - display: inline; + display: block; + padding: 0.5rem 0; } .datetime span { @@ -313,7 +314,6 @@ p.datetime label { } .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField { - margin-left: 5px; margin-bottom: 4px; } diff --git a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js index 6251614863df..b30a668a2e5f 100644 --- a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js +++ b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js @@ -68,7 +68,7 @@ } // Check if warning is already there. - if (inp.parentNode.querySelectorAll('.' + warningClass).length) { + if (inp.parentNode.parentNode.querySelectorAll('.' + warningClass).length) { return; } @@ -96,7 +96,12 @@ warning.classList.add('help', warningClass); warning.id = `${field_id}_timezone_warning_helptext`; warning.textContent = message; - inp.parentNode.appendChild(warning); + const errorList = inp.parentNode.parentNode.querySelector('ul.errorlist'); + if (errorList) { + errorList.before(warning); + } else { + inp.parentNode.before(warning); + } }, // Add clock widget to a given field addClock: function(inp) { diff --git a/django/contrib/admin/templates/admin/auth/user/change_password.html b/django/contrib/admin/templates/admin/auth/user/change_password.html index e8d3da82bda2..70b68f6de588 100644 --- a/django/contrib/admin/templates/admin/auth/user/change_password.html +++ b/django/contrib/admin/templates/admin/auth/user/change_password.html @@ -39,29 +39,37 @@
diff --git a/django/contrib/admin/templates/admin/includes/fieldset.html b/django/contrib/admin/templates/admin/includes/fieldset.html index 1fd303ea823e..70c68655c5b3 100644 --- a/django/contrib/admin/templates/admin/includes/fieldset.html +++ b/django/contrib/admin/templates/admin/includes/fieldset.html @@ -8,33 +8,35 @@