Skip to content

Improve flex ellipsis#30479

Merged
silverwind merged 6 commits intogo-gitea:mainfrom
wxiaoguang:fix-flex-width
Apr 14, 2024
Merged

Improve flex ellipsis#30479
silverwind merged 6 commits intogo-gitea:mainfrom
wxiaoguang:fix-flex-width

Conversation

@wxiaoguang
Copy link
Contributor

@wxiaoguang wxiaoguang commented Apr 14, 2024

image

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 14, 2024
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Apr 14, 2024
@wxiaoguang wxiaoguang mentioned this pull request Apr 14, 2024
Merged
silverwind
silverwind reviewed Apr 14, 2024
View reviewed changes
@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.

@wxiaoguang
Copy link
Contributor Author

wxiaoguang 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.

@wxiaoguang
Copy link
Contributor Author

wxiaoguang commented Apr 14, 2024 •
edited
Loading

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 •
edited
Loading

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

wxiaoguang commented Apr 14, 2024

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

wxiaoguang commented Apr 14, 2024

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

image

@silverwind
Copy link
Member

silverwind commented Apr 14, 2024

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

wxiaoguang commented Apr 14, 2024

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
silverwind
silverwind approved these changes Apr 14, 2024
View reviewed changes
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
@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
Copy link
Member

silverwind commented Apr 14, 2024

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 silverwind mentioned this pull request Apr 14, 2024
Merged
@silverwind
Copy link
Member

silverwind commented Apr 14, 2024

Partial revert: #30481

silverwind added a commit to silverwind/gitea that referenced this pull request Apr 14, 2024
@silverwind
Merge remote-tracking branch 'origin/main' into longbranch
efa7943 
* 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
@silverwind @wxiaoguang
Revert 100% label max-width (#30481)
ef3941f 
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
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
4e4c21e 
* 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
@silverwind @wxiaoguang @algernon
Revert 100% label max-width (#30481)
ff30628 
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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@silverwind silverwind silverwind approved these changes

@delvh delvh delvh 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/templates This PR modifies the template files skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features.

Projects

None yet

Milestone

1.22.0

Development

Successfully merging this pull request may close these issues.

4 participants

@wxiaoguang @silverwind @delvh @GiteaBot