From c8a2963a2e195c82fdb5652294365c28fc1f199a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 00:43:58 +0100 Subject: [PATCH 01/10] Prevent layout shift from active `` items --- web_src/css/base.css | 8 ++++++++ web_src/js/webcomponents/overflow-menu.js | 20 ++++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/web_src/css/base.css b/web_src/css/base.css index 2c055b74399ed..c2f031c89b0bf 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -735,6 +735,14 @@ img.ui.avatar, padding-bottom: 80px; } +.size-for-bold::before { + content: attr(data-text); + visibility: hidden; + display: block; + font-weight: 500; /* match .ui.secondary.pointing.menu .active.item and .ui.tabular.menu .active.item */ + height: 0; +} + /* overwrite semantic width of containers inside the main page content div (div with class "page-content") */ .page-content .ui.ui.ui.container:not(.fluid) { width: 1280px; diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 9fa45855677fe..053d3cba70731 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -127,6 +127,26 @@ window.customElements.define('overflow-menu', class extends HTMLElement { }); init() { + // for horizontal menus where fomantic boldens active items, prevent this bold text from + // enlarging the menu's active item replacing the text node with a div that renders a + // invisible pseudo-element that enlarges the box. + if (this.matches('.ui.secondary.pointing.menu') || this.matches('.ui.tabular.menu')) { + for (const item of this.querySelectorAll('.item')) { + for (const child of item.childNodes) { + if (child.nodeType === Node.TEXT_NODE) { + const text = child.textContent.trim(); + if (text) { + const div = document.createElement('div'); + div.classList.add('size-for-bold'); + div.setAttribute('data-text', text); + div.textContent = text; + child.replaceWith(div); + } + } + } + } + } + // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon. this.resizeObserver = new ResizeObserver((entries) => { From b67ea6256ca94104d88a221b795d0fe1c0b1af48 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 01:44:16 +0100 Subject: [PATCH 02/10] use variable change to 600 --- web_src/css/base.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index c2f031c89b0bf..56659fe197823 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -735,11 +735,17 @@ img.ui.avatar, padding-bottom: 80px; } +/* these selectors must stay together */ +.ui.secondary.pointing.menu .active.item, +.ui.tabular.menu .active.item, +.size-for-bold::before { + font-weight: var(--font-weight-semibold); +} + .size-for-bold::before { content: attr(data-text); visibility: hidden; display: block; - font-weight: 500; /* match .ui.secondary.pointing.menu .active.item and .ui.tabular.menu .active.item */ height: 0; } From 6b87b4bd440b1a3279d840100d3c26759ad56b4f Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 01:50:04 +0100 Subject: [PATCH 03/10] use semibold, reduce padding --- web_src/css/base.css | 6 ++++-- web_src/js/webcomponents/overflow-menu.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 56659fe197823..296c7a2582eaf 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -738,11 +738,11 @@ img.ui.avatar, /* these selectors must stay together */ .ui.secondary.pointing.menu .active.item, .ui.tabular.menu .active.item, -.size-for-bold::before { +.size-for-semibold::before { font-weight: var(--font-weight-semibold); } -.size-for-bold::before { +.size-for-semibold::before { content: attr(data-text); visibility: hidden; display: block; @@ -1875,6 +1875,8 @@ table th[data-sortt-desc] .svg { } .ui.secondary.pointing.menu .item { + padding-left: 12px !important; + padding-right: 12px !important; color: var(--color-text-light-2); } diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 053d3cba70731..cf3b6f8bd9cd8 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -137,7 +137,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement { const text = child.textContent.trim(); if (text) { const div = document.createElement('div'); - div.classList.add('size-for-bold'); + div.classList.add('size-for-semibold'); div.setAttribute('data-text', text); div.textContent = text; child.replaceWith(div); From 72d09127b14eb1a12dc064b2a0cf2401b3a6fcf6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 02:40:07 +0100 Subject: [PATCH 04/10] merge related css rules for menus --- web_src/css/base.css | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 296c7a2582eaf..c7b0b3b559da9 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1849,15 +1849,6 @@ table th[data-sortt-desc] .svg { border-color: var(--color-secondary); } -.ui.tabular.menu .item { - padding: 11px 12px; - color: var(--color-text-light-2); -} - -.ui.tabular.menu .item:hover { - color: var(--color-text); -} - .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover { background: var(--color-body); @@ -1874,16 +1865,20 @@ table th[data-sortt-desc] .svg { border-color: var(--color-secondary); } +.ui.tabular.menu .item, .ui.secondary.pointing.menu .item { - padding-left: 12px !important; - padding-right: 12px !important; + padding: 11px 12px !important; color: var(--color-text-light-2); } +.ui.tabular.menu .item:hover, +.ui.secondary.pointing.menu a.item:hover { + color: var(--color-text); +} + .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover, -.ui.secondary.pointing.menu .dropdown.item:hover, -.ui.secondary.pointing.menu a.item:hover { +.ui.secondary.pointing.menu .dropdown.item:hover { color: var(--color-text-dark); } From 2a82c3e033550bbc07436bbaab9092acb72c5128 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 02:48:16 +0100 Subject: [PATCH 05/10] add margin to repo-header --- web_src/css/repo/header.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 4461e3338e5fb..9222a83b24248 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -8,6 +8,7 @@ flex-flow: row wrap; justify-content: space-between; gap: 0.5rem; + margin-bottom: 4px; } .repo-header .flex-item { From a323e19c56f70b79085fd9483fde7b059c824b97 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 17 Mar 2024 23:22:39 +0100 Subject: [PATCH 06/10] Update web_src/css/base.css --- web_src/css/base.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index c7b0b3b559da9..9a6e290a4e821 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -735,7 +735,6 @@ img.ui.avatar, padding-bottom: 80px; } -/* these selectors must stay together */ .ui.secondary.pointing.menu .active.item, .ui.tabular.menu .active.item, .size-for-semibold::before { From 2f67b4149f1d34982a0b92f12e2b02602294a05d Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 17 Mar 2024 23:23:09 +0100 Subject: [PATCH 07/10] Update web_src/css/base.css --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 9a6e290a4e821..deeade6019995 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -735,8 +735,8 @@ img.ui.avatar, padding-bottom: 80px; } -.ui.secondary.pointing.menu .active.item, .ui.tabular.menu .active.item, +.ui.secondary.pointing.menu .active.item, .size-for-semibold::before { font-weight: var(--font-weight-semibold); } From 7b4e0cafc39e735ab5902bb59d0df17f3cf5beec Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 19 Mar 2024 16:53:11 +0100 Subject: [PATCH 08/10] Update web_src/js/webcomponents/overflow-menu.js Co-authored-by: wxiaoguang --- web_src/js/webcomponents/overflow-menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index cf3b6f8bd9cd8..8b23ea2d6819d 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -130,7 +130,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement { // for horizontal menus where fomantic boldens active items, prevent this bold text from // enlarging the menu's active item replacing the text node with a div that renders a // invisible pseudo-element that enlarges the box. - if (this.matches('.ui.secondary.pointing.menu') || this.matches('.ui.tabular.menu')) { + if (this.matches('.ui.secondary.pointing.menu, .ui.tabular.menu')) { for (const item of this.querySelectorAll('.item')) { for (const child of item.childNodes) { if (child.nodeType === Node.TEXT_NODE) { From a21fabbd44c7884b480c6e69685827cb94d253f1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 20 Mar 2024 00:27:43 +0100 Subject: [PATCH 09/10] tweak and add comment --- web_src/js/webcomponents/overflow-menu.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 8b23ea2d6819d..ac2ed81c99256 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -134,14 +134,13 @@ window.customElements.define('overflow-menu', class extends HTMLElement { for (const item of this.querySelectorAll('.item')) { for (const child of item.childNodes) { if (child.nodeType === Node.TEXT_NODE) { - const text = child.textContent.trim(); - if (text) { - const div = document.createElement('div'); - div.classList.add('size-for-semibold'); - div.setAttribute('data-text', text); - div.textContent = text; - child.replaceWith(div); - } + const text = child.textContent.trim(); // whitespace is insignificant inside flexbox + if (!text) continue; + const span = document.createElement('span'); + span.classList.add('size-for-semibold'); + span.setAttribute('data-text', text); + span.textContent = text; + child.replaceWith(span); } } } From b48978d28437f7b4a0434a710da3e1333300f3a3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 20 Mar 2024 01:24:32 +0100 Subject: [PATCH 10/10] rename to resize-for-semibold --- web_src/css/base.css | 4 ++-- web_src/js/webcomponents/overflow-menu.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 284d9603df288..fc93aae7d8d43 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -680,11 +680,11 @@ img.ui.avatar, .ui.tabular.menu .active.item, .ui.secondary.pointing.menu .active.item, -.size-for-semibold::before { +.resize-for-semibold::before { font-weight: var(--font-weight-semibold); } -.size-for-semibold::before { +.resize-for-semibold::before { content: attr(data-text); visibility: hidden; display: block; diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index ac2ed81c99256..604fce7d4bb4d 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -137,7 +137,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement { const text = child.textContent.trim(); // whitespace is insignificant inside flexbox if (!text) continue; const span = document.createElement('span'); - span.classList.add('size-for-semibold'); + span.classList.add('resize-for-semibold'); span.setAttribute('data-text', text); span.textContent = text; child.replaceWith(span);