Prevent flash of dropdown menu on labels list #30215

silverwind · 2024-03-31T13:21:41Z

On the labels list, This left class caused the dropdown content to flash on page load until JS had hidden it. Remove it as I see no purpose to it.

wxiaoguang · 2024-03-31T13:33:46Z

IIRC, it is a must, otherwise the menu overflows on a wrong direction when the screen width is small.

Could you check the git log?

silverwind · 2024-03-31T13:35:55Z

Looks fine on small screen. It's always left-aligned.

silverwind · 2024-03-31T13:36:56Z

Only issue is that if you open the menu on desktop, then downsize, it will stay right-aligned and be partially outside the screen.

silverwind · 2024-03-31T13:38:52Z

Okay with these new classes, it stays hidden on page load and always opens left, regardless of screen size.

wxiaoguang · 2024-03-31T13:43:30Z

Did a quick test, it seems that class=menu works well. Maybe because the "transition" module has been removed, so the overflow bug also disappears.

So I think it is ok to only keep class=menu now.

silverwind · 2024-03-31T13:44:02Z

The problem is .ui.menu:not(.vertical) .left.menu {display: flex} has more specificity than .ui.dropdown.menu {display:none}. I don't think this usage with just left is something that fomantic supports.

templates/repo/issue/labels/label_list.tmpl

wxiaoguang · 2024-03-31T13:44:55Z

I don't think this usage with just left is something that fomantic supports.

IIRC it is used by Fomantic UI JS code to calculate the popup position.

silverwind · 2024-03-31T13:47:22Z

The left class is meant only for child menus, not the main menu, so it was an abuse of fomantic:

https://fomantic-ui.com/modules/dropdown.html#menu-direction

Specifying left on a menu will make all child menus open in the same direction implicitly

Even thought I do prefer it to open to left, let's remove it for the sake of easier future migration off of it.

silverwind · 2024-03-31T13:51:10Z

What's interesting is the issue filter dropdown also open to left and don't flash, so there must be a difference.

silverwind · 2024-03-31T13:52:55Z

A I see this is a CSS override .repository .filter.menu .ui.dropdown .menu {right: 0} that makes them open to left.

wxiaoguang

sorry it doesn't seem right by introducing these tw- helpers.

Fomantic UI JS just calculate the position automatically. For example, when the screen width is small, the first popup menu should be left-aligned.

silverwind · 2024-03-31T14:04:55Z

Added new CSS solution that will work in all these right-aligned headers. It looks better to always left-align in these imho. Fomantic is too dumb to correctly position itself.

dismiss

On the labels list, This `left` class caused the dropdown content to flash on page load until JS had hidden it. Remove it as I see no purpose to it. <img width="215" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/9e1de97f-dd89-41e0-9229-5c4a786ba762"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

* giteaofficial/main: Remove fomantic input module (go-gitea#30194) Remove most jQuery function calls from the repository topic box (go-gitea#30191) Prevent flash of dropdown menu on labels list (go-gitea#30215) Remove jQuery class from the `repo-issue.js` file (go-gitea#30192) Ignore fomantic folder in linters (go-gitea#30200) Remove `modifies/frontend` from labeler (go-gitea#30198) Make a distinction between `active` and `selected` in the issue author dropdown (go-gitea#30207) Move and simplify tab-size helpers (go-gitea#30196) Fix markdown color code detection (go-gitea#30208)

@silverwind

Backport #30215 by @silverwind On the labels list, This `left` class caused the dropdown content to flash on page load until JS had hidden it. Remove it as I see no purpose to it. <img width="215" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/9e1de97f-dd89-41e0-9229-5c4a786ba762"> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Fixes #31273 (comment). Same method as used in #30215. All left-opening dropdowns need to use it method. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>

Fixes go-gitea#31273 (comment). Same method as used in go-gitea#30215. All left-opening dropdowns need to use it method. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>

Prevent flash of dropdown menu on labels list

7852315

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 31, 2024

pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Mar 31, 2024

silverwind added the backport/v1.22 This PR should be backported to Gitea 1.22 label Mar 31, 2024

github-actions bot added the modifies/templates This PR modifies the template files label Mar 31, 2024

delvh approved these changes Mar 31, 2024

View reviewed changes

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 31, 2024

silverwind added the type/bug label Mar 31, 2024

yardenshoham approved these changes Mar 31, 2024

View reviewed changes

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 31, 2024

silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 31, 2024

silverwind enabled auto-merge (squash) March 31, 2024 13:27

silverwind added the backport/v1.21 This PR should be backported to Gitea 1.21 label Mar 31, 2024

wxiaoguang disabled auto-merge March 31, 2024 13:33

wxiaoguang removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 31, 2024

wxiaoguang added the status/blocked This PR cannot be merged yet, i.e. because it depends on another unmerged PR label Mar 31, 2024

use 'left transition hidden'

42e45b9

wxiaoguang removed the status/blocked This PR cannot be merged yet, i.e. because it depends on another unmerged PR label Mar 31, 2024

wxiaoguang reviewed Mar 31, 2024

View reviewed changes

templates/repo/issue/labels/label_list.tmpl Outdated Show resolved Hide resolved

Update templates/repo/issue/labels/label_list.tmpl

d2ac3fe

wxiaoguang approved these changes Mar 31, 2024

View reviewed changes

open to left with tailwind

3f9876a

silverwind removed the backport/v1.21 This PR should be backported to Gitea 1.21 label Mar 31, 2024

wxiaoguang previously requested changes Mar 31, 2024

View reviewed changes

GiteaBot added lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged and removed lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. labels Mar 31, 2024

use generic css solution

b85c2ef

silverwind added the backport/v1.21 This PR should be backported to Gitea 1.21 label Mar 31, 2024

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged labels Mar 31, 2024

silverwind removed the backport/v1.21 This PR should be backported to Gitea 1.21 label Mar 31, 2024

silverwind merged commit 8da9130 into go-gitea:main Mar 31, 2024
26 checks passed

GiteaBot added this to the 1.23.0 milestone Mar 31, 2024

silverwind deleted the labflash branch March 31, 2024 14:59

GiteaBot mentioned this pull request Mar 31, 2024

Prevent flash of dropdown menu on labels list (#30215) #30216

Merged

GiteaBot added the backport/done All backports for this PR have been created label Mar 31, 2024

wxiaoguang added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Apr 27, 2024

This was referenced Jun 7, 2024

fixed the dropdown menu for the top New button to expand to the left #31273

Merged

Fix navbar + menu flashing on page load #31281

Merged

GiteaBot mentioned this pull request Jun 12, 2024

Fix navbar + menu flashing on page load (#31281) #31342

Merged

go-gitea locked as resolved and limited conversation to collaborators Jun 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prevent flash of dropdown menu on labels list #30215

Prevent flash of dropdown menu on labels list #30215

silverwind commented Mar 31, 2024 •

edited

Loading

wxiaoguang commented Mar 31, 2024

silverwind commented Mar 31, 2024 •

edited

Loading

silverwind commented Mar 31, 2024

silverwind commented Mar 31, 2024

wxiaoguang commented Mar 31, 2024 •

edited

Loading

silverwind commented Mar 31, 2024

wxiaoguang commented Mar 31, 2024

silverwind commented Mar 31, 2024 •

edited

Loading

silverwind commented Mar 31, 2024

silverwind commented Mar 31, 2024

wxiaoguang left a comment •

edited

Loading

silverwind commented Mar 31, 2024 •

edited

Loading

Prevent flash of dropdown menu on labels list #30215

Prevent flash of dropdown menu on labels list #30215

Conversation

silverwind commented Mar 31, 2024 • edited Loading

wxiaoguang commented Mar 31, 2024

silverwind commented Mar 31, 2024 • edited Loading

silverwind commented Mar 31, 2024

silverwind commented Mar 31, 2024

wxiaoguang commented Mar 31, 2024 • edited Loading

silverwind commented Mar 31, 2024

wxiaoguang commented Mar 31, 2024

silverwind commented Mar 31, 2024 • edited Loading

silverwind commented Mar 31, 2024

silverwind commented Mar 31, 2024

wxiaoguang left a comment • edited Loading

Choose a reason for hiding this comment

silverwind commented Mar 31, 2024 • edited Loading

silverwind commented Mar 31, 2024 •

edited

Loading

silverwind commented Mar 31, 2024 •

edited

Loading

wxiaoguang commented Mar 31, 2024 •

edited

Loading

silverwind commented Mar 31, 2024 •

edited

Loading

wxiaoguang left a comment •

edited

Loading

silverwind commented Mar 31, 2024 •

edited

Loading