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.

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

Improve flex ellipsis #30479

Merged
merged 6 commits into from Apr 14, 2024
Merged

Improve flex ellipsis #30479

merged 6 commits into from Apr 14, 2024

Conversation

wxiaoguang
Copy link
Contributor

image

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 14, 2024
@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Apr 14, 2024
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Apr 14, 2024
@silverwind
Copy link
Member

I wonder if tw-flex > * { min-width: 0} would have any unexpected side-effects or if it would just make gt-ellipsis work in more such places.

@wxiaoguang
Copy link
Contributor Author

I wonder if tw-flex > * { min-width: 0} would have any unexpected side-effects or if it would just make gt-ellipsis work in more such places.

See the code: min-width should be set on the parent flex element, to limit its x-axis.

@wxiaoguang
Copy link
Contributor Author

wxiaoguang commented Apr 14, 2024

or if it would just make gt-ellipsis work in more such places.

There won't be more places.

If we use gt-ellipsis with flex, it should appear in a known element, for example, in a label, in a flex-text-*, etc. I won't expect to use tw-flex everywhere to contain gt-ellipsis, using tw-flex everywhere already makes a mess.

@silverwind
Copy link
Member

silverwind commented Apr 14, 2024

I wonder if tw-flex > * { min-width: 0} would have any unexpected side-effects or if it would just make gt-ellipsis work in more such places.

See the code: min-width should be set on the parent flex element, to limit its x-axis.

No, it should be on the flex children, e.g.

div.tw-flex
  div.tw-min-w-0
    div.gt-ellipsis
    div.gt-ellipsis

@wxiaoguang
Copy link
Contributor Author

No, it should be on the flex children, e.g.

Oh yes, my example is not accurate for this case. Will add more.

@wxiaoguang
Copy link
Contributor Author

Let's see this example, the only min-width is on .ui.label (flex):

image

@silverwind
Copy link
Member

Maybe add some examples where you you three elements, and some with two. I would also name the page as "Ellipsis examples", not specific to labels.

@wxiaoguang
Copy link
Contributor Author

Maybe add some examples where you you three elements, and some with two. I would also name the page as "Ellipsis examples", not specific to labels.

Feel free to edit this PR.

@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 Apr 14, 2024
@wxiaoguang wxiaoguang changed the title Improve "label" ellipsis Improve flex ellipsis Apr 14, 2024
Copy link
Member

@silverwind silverwind left a comment

Choose a reason for hiding this comment

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

Guess it won't break anything at least.

@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 Apr 14, 2024
@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 14, 2024
@silverwind silverwind merged commit b84baf2 into go-gitea:main Apr 14, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.23.0 milestone Apr 14, 2024
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 14, 2024
@silverwind silverwind added backport/v1.22 This PR should be backported to Gitea 1.22 and removed backport/v1.22 This PR should be backported to Gitea 1.22 labels Apr 14, 2024
@silverwind
Copy link
Member

No backport, see #30344 (comment). Shouldn't have merged this. I really wonder why we didn't put the fixes into that PR instead.

@silverwind
Copy link
Member

Partial revert: #30481

silverwind added a commit to silverwind/gitea that referenced this pull request Apr 14, 2024
* origin/main:
  Improve flex ellipsis (go-gitea#30479)
  Remove fomantic button module (go-gitea#30475)
  Improve "must-change-password" logic and document (go-gitea#30472)
  Fix commitstatus summary (go-gitea#30431)
  Remove fomantic menu module (go-gitea#30325)
  Use `flex-container` for dashboard layout (go-gitea#30214)
  Rewrite and restyle reaction selector and enable no-sizzle eslint rule (go-gitea#30453)
  Pulse page improvements (go-gitea#30149)
  Fix JS error when opening to expanded code comment (go-gitea#30463)
  fix: Fix to delete cookie when AppSubURL is non-empty (go-gitea#30375)
  Add `interface{}` to `any` replacement to `make fmt`, exclude `*.pb.go` (go-gitea#30461)
  Fix network error when open/close organization/individual projects and redirect to project page (go-gitea#30387)
  Avoid losing token when updating mirror settings (go-gitea#30429)
@wxiaoguang wxiaoguang deleted the fix-flex-width branch April 15, 2024 00:40
wxiaoguang added a commit that referenced this pull request Apr 15, 2024
Partial revert of #30479

It's causing problems at least here:
#30344 (comment)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
zjjhot added a commit to zjjhot/gitea that referenced this pull request Apr 15, 2024
* giteaofficial/main:
  [skip ci] Updated licenses and gitignores
  Revert 100% label max-width (go-gitea#30481)
  Improve flex ellipsis (go-gitea#30479)
  Remove fomantic button module (go-gitea#30475)
  Improve "must-change-password" logic and document (go-gitea#30472)
  Fix commitstatus summary (go-gitea#30431)
  Remove fomantic menu module (go-gitea#30325)
  Use `flex-container` for dashboard layout (go-gitea#30214)
  Rewrite and restyle reaction selector and enable no-sizzle eslint rule (go-gitea#30453)
  Pulse page improvements (go-gitea#30149)
DennisRasey pushed a commit to DennisRasey/forgejo that referenced this pull request Apr 22, 2024
Partial revert of go-gitea/gitea#30479

It's causing problems at least here:
go-gitea/gitea#30344 (comment)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit ef3941f2ebe9d8353f9546e7df00b24092c71cb7)
@wxiaoguang wxiaoguang added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Apr 27, 2024
@wxiaoguang wxiaoguang modified the milestones: 1.23.0, 1.22.0 Apr 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/templates This PR modifies the template files size/M Denotes a PR that changes 30-99 lines, ignoring generated files. skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants