Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prevent layout shift in <overflow-menu> items #29831

Merged
merged 12 commits into from Mar 20, 2024
Merged

Prevent layout shift in <overflow-menu> items #29831

merged 12 commits into from Mar 20, 2024

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Mar 16, 2024 •
edited

There is a small layout shift in when active tab changes. Notice how the actions SVG is unstable:

This is because the active item with bold text is wider then the inactive one. I have applied this trick 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

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.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 16, 2024
@pull-request-size pull-request-size bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Mar 16, 2024
@pull-request-size pull-request-size bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Mar 16, 2024
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 16, 2024
@silverwind silverwind changed the title Prevent layout shift from active <overflow-menu> items Prevent layout shift from bold <overflow-menu> items Mar 16, 2024
@silverwind silverwind changed the title Prevent layout shift from bold <overflow-menu> items Prevent layout shift in <overflow-menu> items Mar 16, 2024
@silverwind silverwind added the type/enhancement An improvement of existing functionality label Mar 17, 2024
silverwind
silverwind commented Mar 17, 2024
View reviewed changes
web_src/css/base.css Outdated Show resolved Hide resolved
silverwind
silverwind commented Mar 17, 2024
View reviewed changes
web_src/css/base.css Outdated Show resolved Hide resolved
wxiaoguang
wxiaoguang reviewed Mar 19, 2024
View reviewed changes
Copy link
Contributor

@wxiaoguang wxiaoguang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer either:

  • Make all "tab" items use the same normal font weight
  • Make all "tab" items use the same semi-bold font weight

Instead of this trick .....

TBH I do not see toggling the font weight for tab items would really help the user experence.

@silverwind
Copy link
Member Author

I do prefer active tab to be bold, it gives a visual distinction. Imho, it's better than color alone. The only other option i consider is making all normal weight and distinguish by color alone.

wxiaoguang
wxiaoguang reviewed Mar 19, 2024
View reviewed changes
web_src/js/webcomponents/overflow-menu.js Outdated Show resolved Hide resolved
web_src/js/webcomponents/overflow-menu.js Outdated Show resolved Hide resolved
web_src/js/webcomponents/overflow-menu.js Outdated Show resolved Hide resolved
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Mar 20, 2024
@silverwind silverwind added reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Mar 20, 2024
@silverwind
Merge remote-tracking branch 'origin/main' into noshift
b995486 
* origin/main:
  Fix loadOneBranch panic (go-gitea#29938)
  Fix comment review avatar alignment (go-gitea#29935)
  Remove the negative margin from `.page-content` (go-gitea#29922)
  Move notifications to a standalone file (go-gitea#29930)
  Remove unnecessary ".Link" usages (go-gitea#29929)
  Remove unnecessary ".Link" usages (go-gitea#29909)
  Show Actions post step when it's running (go-gitea#29926)
  Fix the wrong default value of ENABLE_OPENID_SIGNIN on docs (go-gitea#29925)
  Restore deleted branches when syncing (go-gitea#29898)
  Don't lock using GitHub actions (go-gitea#29913)
  Remove jQuery `.attr` from the user search box (go-gitea#29919)
  Remove jQuery `.attr` from the archive download and compare page branch selector (go-gitea#29918)
  Remove jQuery `.attr` from the image diff (go-gitea#29917)
  Remove jQuery `.attr` from the quick pull request button text (go-gitea#29916)
  Remove jQuery `.attr` from the issue author dropdown (go-gitea#29915)
@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 20, 2024
@silverwind silverwind enabled auto-merge (squash) March 20, 2024 16:58
@silverwind silverwind merged commit 99d7ef5 into go-gitea:main Mar 20, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.23.0 milestone Mar 20, 2024
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 20, 2024
silverwind added a commit to lunny/gitea that referenced this pull request Mar 20, 2024
@silverwind @wxiaoguang
Prevent layout shift in <overflow-menu> items (go-gitea#29831)
d2e7f19 
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>
zjjhot added a commit to zjjhot/gitea that referenced this pull request Mar 21, 2024
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
1be56f1 
* giteaofficial/main: (34 commits)
  Refactor URL detection (go-gitea#29960)
  Solving the issue of UI disruption when the review is deleted without refreshing (go-gitea#29951)
  Fix JS error and improve error message styles (go-gitea#29963)
  Fix the bug that user may logout if he switch pages too fast (go-gitea#29962)
  Cancel previous runs of the same PR automatically (go-gitea#29961)
  Exclude `routers/private/tests` from air (go-gitea#29949)
  Remove codecov badge (go-gitea#29950)
  Misc color tweaks (go-gitea#29943)
  Fix and rewrite markup anchor processing (go-gitea#29931)
  Remove fomantic grid module (go-gitea#29894)
  Add background to dashboard navbar, fix missing padding (go-gitea#29940)
  Prevent layout shift in `<overflow-menu>` items (go-gitea#29831)
  Fix loadOneBranch panic (go-gitea#29938)
  Fix comment review avatar alignment (go-gitea#29935)
  Remove the negative margin from `.page-content` (go-gitea#29922)
  Move notifications to a standalone file (go-gitea#29930)
  Remove unnecessary ".Link" usages (go-gitea#29929)
  Remove unnecessary ".Link" usages (go-gitea#29909)
  Show Actions post step when it's running (go-gitea#29926)
  Fix the wrong default value of ENABLE_OPENID_SIGNIN on docs (go-gitea#29925)
  ...

# Conflicts:
#	templates/user/dashboard/issues.tmpl
silverwind added a commit to silverwind/gitea that referenced this pull request Mar 21, 2024
@silverwind
Merge remote-tracking branch 'origin/main' into npmlink
62b58d5 
* origin/main: (332 commits)
  Refactor external URL detection (go-gitea#29973)
  Refactor repo header/list (go-gitea#29969)
  Fix various loading states, remove `.loading` class (go-gitea#29920)
  Update register application URL for GitLab (go-gitea#29959)
  Refactor StringsToInt64s (go-gitea#29967)
  Switch to happy-dom for testing (go-gitea#29948)
  Performance improvements for pull request list page (go-gitea#29900)
  Refactor URL detection (go-gitea#29960)
  Solving the issue of UI disruption when the review is deleted without refreshing (go-gitea#29951)
  Fix JS error and improve error message styles (go-gitea#29963)
  Fix the bug that user may logout if he switch pages too fast (go-gitea#29962)
  Cancel previous runs of the same PR automatically (go-gitea#29961)
  Exclude `routers/private/tests` from air (go-gitea#29949)
  Remove codecov badge (go-gitea#29950)
  Misc color tweaks (go-gitea#29943)
  Fix and rewrite markup anchor processing (go-gitea#29931)
  Remove fomantic grid module (go-gitea#29894)
  Add background to dashboard navbar, fix missing padding (go-gitea#29940)
  Prevent layout shift in `<overflow-menu>` items (go-gitea#29831)
  Fix loadOneBranch panic (go-gitea#29938)
  ...
@lunny lunny modified the milestones: 1.23.0, 1.22.0 Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wxiaoguang wxiaoguang wxiaoguang approved these changes

@yardenshoham yardenshoham yardenshoham approved these changes

Assignees
No one assigned
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/js size/M Denotes a PR that changes 30-99 lines, ignoring generated files. type/enhancement An improvement of existing functionality
Projects
None yet
Milestone
1.22.0
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@silverwind @wxiaoguang @yardenshoham @lunny @GiteaBot