From 999ba9db6d6331eaa58af77debba42754bcc1a8e Mon Sep 17 00:00:00 2001 From: Tom Carrick Date: Thu, 23 Nov 2023 17:37:37 +0100 Subject: [PATCH] Fixed #34995 -- Improved position of related widget's add link on admin pages on small screens. Regression in 1699f8b52ac15f687cc39088401c2641022c71cd. Co-authored-by: Sarah Boyce <42296566+sarahboyce@users.noreply.github.com> Co-authored-by: Natalia Bidart <124304+nessita@users.noreply.github.com> --- .../admin/static/admin/css/responsive.css | 31 +------------------ django/contrib/admin/static/admin/css/rtl.css | 4 +++ .../admin/static/admin/css/widgets.css | 26 ++++++++-------- .../admin/static/admin/js/SelectFilter2.js | 3 ++ js_tests/admin/SelectFilter2.test.js | 8 +++-- 5 files changed, 27 insertions(+), 45 deletions(-) diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css index bbcfd3929e..7a41223ba5 100644 --- a/django/contrib/admin/static/admin/css/responsive.css +++ b/django/contrib/admin/static/admin/css/responsive.css @@ -237,22 +237,6 @@ input[type="submit"], button { padding: 7px; } - /* Related widget */ - - .related-widget-wrapper { - float: none; - } - - .related-widget-wrapper-link + .selector { - max-width: calc(100% - 30px); - margin-right: 15px; - } - - select + .related-widget-wrapper-link, - .related-widget-wrapper-link + .related-widget-wrapper-link { - margin-left: 10px; - } - /* Selector */ .selector { @@ -270,7 +254,7 @@ input[type="submit"], button { } .selector .selector-filter input { - width: auto; + width: 100%; min-height: 0; flex: 1 1; } @@ -292,7 +276,6 @@ input[type="submit"], button { width: 26px; height: 52px; padding: 2px 0; - margin: auto 15px; border-radius: 20px; transform: translateY(-10px); } @@ -336,7 +319,6 @@ input[type="submit"], button { width: 52px; height: 26px; padding: 0 2px; - margin: 15px auto; transform: none; } @@ -684,21 +666,12 @@ input[type="submit"], button { align-self: center; } - select + .related-widget-wrapper-link, - .related-widget-wrapper-link + .related-widget-wrapper-link { - margin-left: 15px; - } - /* Selector */ .selector { flex-direction: column; } - .selector > * { - float: none; - } - .selector-available, .selector-chosen { margin-bottom: 0; flex: 1 1 auto; @@ -710,11 +683,9 @@ input[type="submit"], button { .selector ul.selector-chooser { display: block; - float: none; width: 52px; height: 26px; padding: 0 2px; - margin: 15px auto 20px; transform: none; } diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css index 48f08a3e73..58ba97710b 100644 --- a/django/contrib/admin/static/admin/css/rtl.css +++ b/django/contrib/admin/static/admin/css/rtl.css @@ -289,3 +289,7 @@ form .form-row p.datetime { margin-left: inherit; margin-right: 2px; } + +.selector .selector-chooser { + margin: 0; +} diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index 3ab5fb1eb2..f5b769333b 100644 --- a/django/contrib/admin/static/admin/css/widgets.css +++ b/django/contrib/admin/static/admin/css/widgets.css @@ -1,23 +1,24 @@ /* SELECTOR (FILTER INTERFACE) */ .selector { - width: 800px; - float: left; display: flex; + flex-grow: 1; + gap: 10px; } .selector select { - width: 380px; height: 17.2em; flex: 1 0 auto; + overflow: scroll; + width: 100%; } .selector-available, .selector-chosen { - width: 380px; text-align: center; margin-bottom: 5px; display: flex; flex-direction: column; + flex: 1 1; } .selector-available h2, .selector-chosen h2 { @@ -58,6 +59,7 @@ font-size: 0.625rem; margin: 0; text-align: left; + display: flex; } .selector .selector-filter label, @@ -72,9 +74,12 @@ min-width: auto; } +.selector-filter input { + flex-grow: 1; +} + .selector .selector-available input, .selector .selector-chosen input { - width: 320px; margin-left: 8px; } @@ -83,7 +88,6 @@ width: 22px; background-color: var(--selected-bg); border-radius: 10px; - margin: 0 5px; padding: 0; transform: translateY(-17px); } @@ -575,8 +579,9 @@ ul.timelist, .timelist li { /* RELATED WIDGET WRAPPER */ .related-widget-wrapper { - float: left; /* display properly in form rows with multiple fields */ - overflow: hidden; /* clear floated contents */ + display: flex; + gap: 10px; + flex-grow: 1; } .related-widget-wrapper-link { @@ -589,11 +594,6 @@ ul.timelist, .timelist li { filter: grayscale(0); } -select + .related-widget-wrapper-link, -.related-widget-wrapper-link + .related-widget-wrapper-link { - margin-left: 7px; -} - /* GIS MAPS */ .dj_map { width: 600px; diff --git a/django/contrib/admin/static/admin/js/SelectFilter2.js b/django/contrib/admin/static/admin/js/SelectFilter2.js index 9a4e0a3a91..fc59eba7c4 100644 --- a/django/contrib/admin/static/admin/js/SelectFilter2.js +++ b/django/contrib/admin/static/admin/js/SelectFilter2.js @@ -30,6 +30,9 @@ Requires core.js and SelectBox.js. //
or
const selector_div = quickElement('div', from_box.parentNode); + // Make sure the selector div is at the beginning so that the + // add link would be displayed to the right of the widget. + from_box.parentNode.prepend(selector_div); selector_div.className = is_stacked ? 'selector stacked' : 'selector'; //
diff --git a/js_tests/admin/SelectFilter2.test.js b/js_tests/admin/SelectFilter2.test.js index 387bfd669c..0b1317cff5 100644 --- a/js_tests/admin/SelectFilter2.test.js +++ b/js_tests/admin/SelectFilter2.test.js @@ -5,9 +5,13 @@ QUnit.module('admin.SelectFilter2'); QUnit.test('init', function(assert) { const $ = django.jQuery; - $('
').appendTo('#qunit-fixture'); - $('').appendTo('#id'); + $('
').appendTo('#qunit-fixture'); + $('').appendTo('#test'); + $('
This is helpful.
').appendTo('#test'); + $('').appendTo('#test'); SelectFilter.init('id', 'things', 0); + assert.equal($('#test').children().first().prop("tagName"), "DIV"); + assert.equal($('#test').children().first().attr("class"), "selector"); assert.equal($('.selector-available h2').text().trim(), "Available things"); assert.equal($('.selector-chosen h2').text().trim(), "Chosen things"); assert.equal($('.selector-chosen select')[0].getAttribute('multiple'), '');