From 0faeff2e1f23f2419a1461fc88076a185087349f Mon Sep 17 00:00:00 2001 From: Paul Holden Date: Tue, 5 Aug 2025 17:51:08 +0100 Subject: [PATCH] MDL-86248 theme_boost: consistently apply dropdown item spacing. MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Replace previous ad-hoc fixes for active item spacing in dropdown menu items. Changes to Javascript are due to the following bug in our SCSS compiler, preventing a simpler `&:has([...])` selector: https://github.com/scssphp/scssphp/issues/606 Co-authored-by: Mikel Martín --- public/lib/amd/build/page_global.min.js | Bin 1699 -> 1880 bytes public/lib/amd/build/page_global.min.js.map | Bin 6986 -> 7454 bytes public/lib/amd/src/page_global.js | 8 +++++++- public/theme/boost/scss/moodle/blocks.scss | 12 ------------ public/theme/boost/scss/moodle/dropdown.scss | 6 ++++++ public/theme/boost/scss/moodle/moremenu.scss | 5 ----- public/theme/boost/style/moodle.css | 13 +++---------- public/theme/classic/style/moodle.css | 13 +++---------- 8 files changed, 19 insertions(+), 38 deletions(-) diff --git a/public/lib/amd/build/page_global.min.js b/public/lib/amd/build/page_global.min.js index f85cb239723944f71bed328a9678cd4dff99ea73..f452d0fe1590513ed38d1d810ae7ae8ce47b8e79 100644 GIT binary patch delta 210 zcmZ3?dxLL7Gh@9*QhrLMt%`;ch*r|n)Jx0EOVLo$ODW1PNXakH)6GrID^=3eOHEA9 z(9lRL%}XxH%+J%%tX9z|$;d2*s#lLrEXqvOO)f1eO3f>=RVpbeO;w6j*VIc)Npa3e zEH2hif*Y7wlA5cV2sEZFRY{YnR&( zgdmkj{DRl;4VA(Nu;vpGV$G62fH!t1U4R$1eBZtI9gn{}`M7yLe|4P65X15No+PeA zI7Nq42wPp;`wn5|U!^XAgNa<8U> zmhG?UCz1J3c(zDS(VjQ7!0XF~c7!QmS-c~BKb5@bQ{3qoCAs$O@Ak9Fueo9$~)8mFlY_()shm5w9Nq8v8RYJzQJBb zo{CD9a|h| zb&thM?<3j-vx!HIy9(n th2Ih@;g3Z6@m9P6PurBV0{jsJiXZfvE3}gOe?|d?`hYnc=TPC=*>6`e6lVYc delta 465 zcmYk2Jx>Bb5Qbwg!C*iNjf9*QYG@o|r0|1AXNTqZ^uQC45;-6!Uj{>riLvqrnC-2s ztTfl+A29lNtex9y++ve`X5ROmotMn=2J(1DGWIwD!SD+k=qDDHo07-$lu{hVMRj?6l)-kDRV*BQ-!>(W=?}UUN zzXsw$H#9uTF$8VI9;>|ky7oEqwc9+{0ogEM)eVoseeJSe;%s?Owh9<0%bov2jnYW{ tw5{q!YH8>#6LW_`e<7!@CRk5gtGtu diff --git a/public/lib/amd/src/page_global.js b/public/lib/amd/src/page_global.js index 6edcc61627e..de77a82f147 100644 --- a/public/lib/amd/src/page_global.js +++ b/public/lib/amd/src/page_global.js @@ -58,6 +58,11 @@ function( var initActionOptionDropdownHandler = function() { var body = $('body'); + // Ensure on load that the "current" item is always marked to ensure we make space for active item indicator. + body.find('.dropdown-menu').each(function() { + $(this).find('[aria-current="true"]').addClass('dropdown-item-active'); + }); + CustomEvents.define(body, [CustomEvents.events.activate]); body.on(CustomEvents.events.activate, '[data-show-active-item]', function(e) { // The dropdown item that the user clicked on. @@ -77,7 +82,7 @@ function( // Clear the active class from all other options. var dropdownItems = menuContainer.find('.dropdown-item'); - dropdownItems.removeClass('active'); + dropdownItems.removeClass(['active', 'dropdown-item-active']); dropdownItems.removeAttr('aria-current'); if (!menuContainer.attr('data-skip-active-class')) { @@ -86,6 +91,7 @@ function( // adding the active class itself. option.addClass('active'); } + option.addClass('dropdown-item-active'); // Update aria attribute for active item. option.attr('aria-current', true); diff --git a/public/theme/boost/scss/moodle/blocks.scss b/public/theme/boost/scss/moodle/blocks.scss index f6e097293f7..3697d576a61 100644 --- a/public/theme/boost/scss/moodle/blocks.scss +++ b/public/theme/boost/scss/moodle/blocks.scss @@ -265,10 +265,6 @@ $blocks-plus-gutter: calc(#{$blocks-column-width} + (#{$grid-gutter-width} * 0.5 width: 100%; } } - // Make space for active item indicator. - .dropdown-item { - padding-left: map-get($spacers, 4); - } } // @@ -285,14 +281,6 @@ $blocks-plus-gutter: calc(#{$blocks-column-width} + (#{$grid-gutter-width} * 0.5 padding-left: 5.55em; } } -.block_timeline { - .dropdown-menu { - // Make space for active item indicator. - .dropdown-item { - padding-left: map-get($spacers, 4); - } - } -} // // Blocks block_settings and block_navigation diff --git a/public/theme/boost/scss/moodle/dropdown.scss b/public/theme/boost/scss/moodle/dropdown.scss index 8e7e946ba5b..f5cdd70719f 100644 --- a/public/theme/boost/scss/moodle/dropdown.scss +++ b/public/theme/boost/scss/moodle/dropdown.scss @@ -35,6 +35,12 @@ .dropdown-menu { width: fit-content; + &:has(.dropdown-item-active) { + .dropdown-item { + // Make space for active item indicator. + padding-left: map-get($spacers, 4); + } + } } // Add dropdown menu items styles for each theme color mantainning default hover colour for contrast. diff --git a/public/theme/boost/scss/moodle/moremenu.scss b/public/theme/boost/scss/moodle/moremenu.scss index 24491cc791e..ae9863a4015 100644 --- a/public/theme/boost/scss/moodle/moremenu.scss +++ b/public/theme/boost/scss/moodle/moremenu.scss @@ -89,11 +89,6 @@ } } - // Make space for active item indicator. - .dropdown-item { - padding-left: map-get($spacers, 4); - } - .dropdown-item[aria-current="true"], .dropdown-item.active { background-color: transparent; diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css index bcb27f50d03..b79c3237b1b 100644 --- a/public/theme/boost/style/moodle.css +++ b/public/theme/boost/style/moodle.css @@ -29650,9 +29650,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 width: 100%; } } -.block_myoverview .dropdown-item { - padding-left: 1.5rem; -} .block_timeline .paged-content-page-container { background-color: var(--bs-body-bg); @@ -29662,10 +29659,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 padding-left: 5.55em; } -.block_timeline .dropdown-menu .dropdown-item { - padding-left: 1.5rem; -} - .block_settings .block_tree [aria-expanded=true], .block_settings .block_tree [aria-expanded=true].emptybranch, .block_settings .block_tree [aria-expanded=false], @@ -40745,9 +40738,6 @@ div.editor_atto_toolbar button .icon { .moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider { display: none; } -.moremenu .dropdown-item { - padding-left: 1.5rem; -} .moremenu .dropdown-item[aria-current=true], .moremenu .dropdown-item.active { background-color: transparent; @@ -41034,6 +41024,9 @@ div.editor_atto_toolbar button .icon { .dropdown-menu { width: fit-content; } +.dropdown-menu:has(.dropdown-item-active) .dropdown-item { + padding-left: 1.5rem; +} .dropdown-item:hover.text-primary, .dropdown-item:hover a.text-primary, .dropdown-item:focus.text-primary, diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css index 73dd2520658..eeaf54b0dd5 100644 --- a/public/theme/classic/style/moodle.css +++ b/public/theme/classic/style/moodle.css @@ -29650,9 +29650,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 width: 100%; } } -.block_myoverview .dropdown-item { - padding-left: 1.5rem; -} .block_timeline .paged-content-page-container { background-color: var(--bs-body-bg); @@ -29662,10 +29659,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 padding-left: 5.55em; } -.block_timeline .dropdown-menu .dropdown-item { - padding-left: 1.5rem; -} - .block_settings .block_tree [aria-expanded=true], .block_settings .block_tree [aria-expanded=true].emptybranch, .block_settings .block_tree [aria-expanded=false], @@ -40679,9 +40672,6 @@ div.editor_atto_toolbar button .icon { .moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider { display: none; } -.moremenu .dropdown-item { - padding-left: 1.5rem; -} .moremenu .dropdown-item[aria-current=true], .moremenu .dropdown-item.active { background-color: transparent; @@ -40968,6 +40958,9 @@ div.editor_atto_toolbar button .icon { .dropdown-menu { width: fit-content; } +.dropdown-menu:has(.dropdown-item-active) .dropdown-item { + padding-left: 1.5rem; +} .dropdown-item:hover.text-primary, .dropdown-item:hover a.text-primary, .dropdown-item:focus.text-primary, -- 2.43.0