Skip to content
New issue

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

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

Already on GitHub? # 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
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jul 14, 2024
# for free to subscribe to this conversation on GitHub. Already have an account? #.
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.

4 participants