From b5198320860eafef91d8abcb4accb6b159b2f102 Mon Sep 17 00:00:00 2001 From: Joep Duin <165405982+joepduin@users.noreply.github.com> Date: Fri, 14 Nov 2025 18:46:31 +0100 Subject: [PATCH 1/3] Fix: admin theme emoji alignment (#6459) * Fix: admin theme dropdown emoji alignment * Sprites --- src/static/scripts/admin.css | 17 +++++++++++++ src/static/scripts/admin.js | 13 ++++++++-- src/static/templates/admin/base.hbs | 38 ++++++++++++++++++++++++++--- 3 files changed, 62 insertions(+), 6 deletions(-) diff --git a/src/static/scripts/admin.css b/src/static/scripts/admin.css index dd153b1d..0df56771 100644 --- a/src/static/scripts/admin.css +++ b/src/static/scripts/admin.css @@ -58,3 +58,20 @@ img { .abbr-badge { cursor: help; } + +.theme-icon, +.theme-icon-active { + display: inline-flex; + flex: 0 0 1.75em; + justify-content: center; +} + +.theme-icon svg, +.theme-icon-active svg { + width: 1.25em; + height: 1.25em; + min-width: 1.25em; + min-height: 1.25em; + display: block; + overflow: visible; +} \ No newline at end of file diff --git a/src/static/scripts/admin.js b/src/static/scripts/admin.js index 06d6ca5c..f3c41942 100644 --- a/src/static/scripts/admin.js +++ b/src/static/scripts/admin.js @@ -106,7 +106,11 @@ const showActiveTheme = (theme, focus = false) => { const themeSwitcherText = document.querySelector("#bd-theme-text"); const activeThemeIcon = document.querySelector(".theme-icon-active use"); const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`); - const svgOfActiveBtn = btnToActive.querySelector("span use").textContent; + if (!btnToActive) { + return; + } + const btnIconUse = btnToActive ? btnToActive.querySelector("[data-theme-icon-use]") : null; + const iconHref = btnIconUse ? btnIconUse.getAttribute("href") || btnIconUse.getAttribute("xlink:href") : null; document.querySelectorAll("[data-bs-theme-value]").forEach(element => { element.classList.remove("active"); @@ -115,7 +119,12 @@ const showActiveTheme = (theme, focus = false) => { btnToActive.classList.add("active"); btnToActive.setAttribute("aria-pressed", "true"); - activeThemeIcon.textContent = svgOfActiveBtn; + + if (iconHref && activeThemeIcon) { + activeThemeIcon.setAttribute("href", iconHref); + activeThemeIcon.setAttribute("xlink:href", iconHref); + } + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`; themeSwitcher.setAttribute("aria-label", themeSwitcherLabel); diff --git a/src/static/templates/admin/base.hbs b/src/static/templates/admin/base.hbs index 5e713105..4cdec626 100644 --- a/src/static/templates/admin/base.hbs +++ b/src/static/templates/admin/base.hbs @@ -11,6 +11,28 @@ + + + + + + + + + + + + + + + + + + + + + +