Skip to content

Improve flex list UI #26970

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.

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

Merged
merged 3 commits into from
Sep 8, 2023
Merged

Conversation

wxiaoguang
Copy link
Contributor

@wxiaoguang wxiaoguang commented Sep 8, 2023

  1. There is already gt-ac, so no need to introduce flex-item-center
  2. The flex-item-baseline and .flex-item-icon svg { margin-top: 1px } seem to be a tricky patch, they don't resolve the root problem, and still cause misalignment in some cases.
    • The root problem is: the "icon" needs to align with the sibling "title"
    • So, make the "icon" and the "title" both have the same height
  3. flex-text-inline could only be used if the element is really "inline", otherwise its vertical-align would make the box size change. In most cases, flex-text-block is good enough.

image

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Sep 8, 2023
@wxiaoguang wxiaoguang added this to the 1.21.0 milestone Sep 8, 2023
@github-actions github-actions bot added the topic/ui Change the appearance of the Gitea UI label Sep 8, 2023
@wxiaoguang wxiaoguang added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Sep 8, 2023
@silverwind silverwind mentioned this pull request Sep 8, 2023
@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 Sep 8, 2023
@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 Sep 8, 2023
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Sep 8, 2023
@silverwind silverwind enabled auto-merge (squash) September 8, 2023 13:25
@silverwind silverwind merged commit ffa4949 into go-gitea:main Sep 8, 2023
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Sep 8, 2023
@wxiaoguang wxiaoguang deleted the refactor-flex-list branch September 8, 2023 13:59
@wxiaoguang
Copy link
Contributor Author

I have to admit that such layout trick (flex "icon" + "title") is not good enough.

For example, if there are labels ....

Maybe the only way for a perfect fix is to get rid of such layout, eg: move the "icon" into the "title", let they layout together.

image

@wxiaoguang
Copy link
Contributor Author

And even worse .... with emoji label:

image

@silverwind
Copy link
Member

silverwind commented Sep 8, 2023

I woul aim to have the baseline of the text aligned with the lower edge of the left side icon. Labels should be centered on text. While doing these tweaks, ensure wrapping onto multiple lines does not regress.

@wxiaoguang
Copy link
Contributor Author

-> Improve issue list layout #26983

zjjhot added a commit to zjjhot/gitea that referenced this pull request Sep 9, 2023
* giteaoffical/main:
  [skip ci] Updated translations via Crowdin
  Move some functions to service layer (go-gitea#26969)
  Lock yamllint and update indirect python deps (go-gitea#26979)
  Chroma color tweaks (go-gitea#26978)
  Add a new column schedule_id for action_run to track (go-gitea#26975)
  Improve flex list UI (go-gitea#26970)
  Clarify the git command Stdin hanging problem (go-gitea#26967)
  Add v1.20.4 changelog (go-gitea#26974)
  Check newly added node type before "attachDirAuto" (go-gitea#26972)
  Expanding documentation in queue.go (go-gitea#26889)
  move repository deletion to service layer (go-gitea#26948)
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Dec 7, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants