mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity
forgejo/web_src/js/webcomponents
History
silverwind 18d13000e9
[PORT] gitea#29831: Prevent layout shift in `<overflow-menu>` 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 `<overflow-menu>` 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
`<overflow-menu>`, 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 <wxiaoguang@gmail.com>

---

Conflict resolution: Moved an `:focus` selector to the new CSS rule.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 99d7ef50917e8d61798715e1b0b3dc1a99709f27)
 		2024-03-28 16:09:14 +01:00
..
README.md Add `<overflow-menu>`, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
absolute-date.js Use `Temporal.PlainDate` for absolute dates (#29804) 2024-03-20 08:46:29 +01:00
absolute-date.test.js Use `Temporal.PlainDate` for absolute dates (#29804) 2024-03-20 08:46:29 +01:00
index.js Add `<overflow-menu>`, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
origin-url.js Add `<overflow-menu>`, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
origin-url.test.js Add `<overflow-menu>`, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
overflow-menu.js [PORT] gitea#29831: Prevent layout shift in `<overflow-menu>` items 2024-03-28 16:09:14 +01:00
polyfills.js Enforce trailing comma in JS on multiline (#30002) 2024-03-26 19:04:27 +01:00

README.md

Web Components

This webcomponents directory contains the source code for the web components used in the Gitea Web UI.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

Guidelines

  • These components are loaded in <head> (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
  • Do not import svg.js into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
  • All our components must be added to webpack.config.js so they work correctly in Vue.