From 18d13000e911bba2c1ab3a063245b0219ac1954a Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 20 Mar 2024 18:00:35 +0100 Subject: [PATCH 1/5] [PORT] gitea#29831: Prevent layout shift in `` items There is a small layout shift in when active tab changes. Notice how the actions SVG is unstable: ![](https://github.com/go-gitea/gitea/assets/115237/a6928e89-5d47-4a91-8f36-1fa22fddbce7) This is because the active item with bold text is wider then the inactive one. I have applied [this trick](https://stackoverflow.com/a/32570813/808699) to prevent this layout shift. It's only active inside `` because I wanted to avoid changing HTML and doing it in regular JS would cause a flicker. I don't expect us to introduce other similar menus without ``, so that place is likely fine. ![after](https://github.com/go-gitea/gitea/assets/115237/d6089924-8de6-4ee0-8db4-15f16069a131) I also changed the weight from 500 to 600, slightly reduced horizontal padding, merged some tab-bar related CSS rules and a added a small margin below repo-header so it does not look so crammed against the buttons on top. Co-authored-by: wxiaoguang --- Conflict resolution: Moved an `:focus` selector to the new CSS rule. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit 99d7ef50917e8d61798715e1b0b3dc1a99709f27) --- web_src/css/base.css | 32 +++++++++++++++-------- web_src/css/repo/header.css | 1 + web_src/js/webcomponents/overflow-menu.js | 19 ++++++++++++++ 3 files changed, 41 insertions(+), 11 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index f78fd920e..67716b273 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1842,15 +1842,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); @@ -1867,17 +1858,36 @@ table th[data-sortt-desc] .svg { border-color: var(--color-secondary); } +.ui.tabular.menu .item, .ui.secondary.pointing.menu .item { + padding: 11px 12px !important; color: var(--color-text-light-2); } +.ui.tabular.menu .item:hover, +.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus { + color: var(--color-text); +} + .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus, -.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus, -.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus { +.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus { color: var(--color-text-dark); } +.ui.tabular.menu .active.item, +.ui.secondary.pointing.menu .active.item, +.resize-for-semibold::before { + font-weight: var(--font-weight-semibold); +} + +.resize-for-semibold::before { + content: attr(data-text); + visibility: hidden; + display: block; + height: 0; +} + .ui.header { color: var(--color-text); } diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 0a2c0c82a..13fb40e35 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 { diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 9fa458556..604fce7d4 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -127,6 +127,25 @@ 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, .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(); // whitespace is insignificant inside flexbox + if (!text) continue; + const span = document.createElement('span'); + span.classList.add('resize-for-semibold'); + span.setAttribute('data-text', text); + span.textContent = text; + child.replaceWith(span); + } + } + } + } + // 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 1ee494a045f496eec71ed200fc1c7368be91dc4d Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 00:54:09 +0100 Subject: [PATCH 2/5] [Port] gitea#29982 Introduce `.secondary-nav` and handle `.page-content` spacing universally Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce `.secondary-nav` as a universal way for styling and margin adjustments inside `.page-content`. If the first child of `.page-content` is `.secondary-nav`, we add margin below it, otherwise we add padding to the first child. Notable changes: - `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`. - `navbar` class is removed. Co-authored-by: Giteabot Co-authored-by: wxiaoguang --- Conflict resolution: Trivial conflict & changed selector to reflect new classes. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818) --- templates/admin/layout_head.tmpl | 2 +- templates/explore/navbar.tmpl | 2 +- templates/repo/header.tmpl | 4 ++-- templates/user/auth/link_account.tmpl | 2 +- templates/user/auth/signin_navbar.tmpl | 2 +- templates/user/auth/signup_openid_navbar.tmpl | 2 +- templates/user/dashboard/navbar.tmpl | 3 +-- tests/e2e/example.test.e2e.js | 2 +- tests/e2e/utils_e2e.js | 2 +- web_src/css/base.css | 18 ++++++++++++++---- web_src/css/dashboard.css | 12 ++++++------ web_src/css/explore.css | 6 ++---- web_src/css/modules/navbar.css | 4 ++++ web_src/css/repo.css | 10 ---------- web_src/css/repo/header.css | 11 +++++------ web_src/css/themes/theme-gitea-dark.css | 2 +- web_src/css/themes/theme-gitea-light.css | 2 +- web_src/css/user.css | 4 ---- 18 files changed, 43 insertions(+), 47 deletions(-) diff --git a/templates/admin/layout_head.tmpl b/templates/admin/layout_head.tmpl index b326c82a6..c1f5fb331 100644 --- a/templates/admin/layout_head.tmpl +++ b/templates/admin/layout_head.tmpl @@ -1,6 +1,6 @@ {{template "base/head" .ctxData}}
-
+
{{template "base/alert" .ctxData}}
diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl index 8841613b9..8e619fa66 100644 --- a/templates/explore/navbar.tmpl +++ b/templates/explore/navbar.tmpl @@ -1,4 +1,4 @@ - +
{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 6f2bf4229..f10efa1e3 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -1,4 +1,4 @@ -
+
{{with .Repository}}
@@ -81,7 +81,7 @@ {{if .IsGenerated}}
{{ctx.Locale.Tr "repo.generated_from"}} {{(.TemplateRepo ctx).FullName}}
{{end}}
{{end}} - + {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
{{if .Permission.CanRead $.UnitTypeCode}} diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl index 81ea92c95..8dd49ccd6 100644 --- a/templates/user/auth/link_account.tmpl +++ b/templates/user/auth/link_account.tmpl @@ -1,6 +1,6 @@ {{template "base/head" .}}