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.

Sign up for GitHub

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

Jump to bottom

Unify border-radius behavior #26770

Merged
merged 5 commits into from
Aug 28, 2023
Merged

Unify border-radius behavior #26770

merged 5 commits into from
Aug 28, 2023

Conversation

delvh
Copy link
Member

@delvh delvh commented Aug 28, 2023 •
edited
Loading

Changes

  • no more hardcoded border-radiuses (apart from 0)
  • no more value inconsistencies
  • no more guessing what pixel value you should use
  • two new variables:
    • --border-radius-medium (for elements where the normal border radius does not suffice)
    • --border-radius-circle (for displaying circles)

@delvh
Unify border-radius behavior
ed468c2 
Changes:
- no more hardcoded `border-radius`es (apart from `0`)
- no more value inconsistencies
- two new variables:
  - `--border-radius-large` (for elements where the normal border radius does not suffice)
  - `--circle-border` (for displaying circles)
@delvh delvh added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI type/refactoring Existing code has been cleaned up. There should be no new functionality. labels Aug 28, 2023
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Aug 28, 2023
@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Aug 28, 2023
@delvh
Copy link
Member Author

delvh commented Aug 28, 2023

I've tested every occurrence where I could find/reproduce the element.
Some changes are untested (i.e. because I don't own an IOS device), but I doubt this PR introduces a regression.

silverwind
silverwind reviewed Aug 28, 2023
View reviewed changes
web_src/css/base.css Outdated Show resolved Hide resolved
@silverwind
Copy link
Member

Looks good overall. I hope 8px is not too much for the large ones that were previously 6px.

wxiaoguang
wxiaoguang approved these changes Aug 28, 2023
View reviewed changes
Copy link
Contributor

@wxiaoguang wxiaoguang left a comment

Choose a reason for hiding this comment

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

Agree to use 6px instead of calc(2 * var(--border-radius))

@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 Aug 28, 2023
wxiaoguang
wxiaoguang reviewed Aug 28, 2023
View reviewed changes
web_src/css/base.css Outdated Show resolved Hide resolved
@delvh
Rename --circle-border -> border-radius-circle
f075605 
and decrease `--border-radius-large` to `6px`
@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 Aug 28, 2023
@silverwind
Copy link
Member

silverwind commented Aug 28, 2023 •
edited
Loading

I wonder how we will name next step after large: big, huge, gigantic? 😆

@silverwind
Copy link
Member

silverwind commented Aug 28, 2023 •
edited
Loading

Maybe follow tailwind and call it medium?

rounded | border-radius: 0.25rem; /* 4px */
rounded-md | border-radius: 0.375rem; /* 6px */
rounded-lg | border-radius: 0.5rem; /* 8px */

Note, tailwind assumes 16px base font size, so we have to specify pixels as ours is 14.

@silverwind silverwind self-requested a review August 28, 2023 19:16
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. labels Aug 28, 2023
@delvh
Copy link
Member Author

delvh commented Aug 28, 2023

Better?

@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 Aug 28, 2023
@silverwind
Copy link
Member

Yes, now we are free to add large should the need arise 😆

@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Aug 28, 2023
@silverwind silverwind enabled auto-merge (squash) August 28, 2023 19:38
@silverwind silverwind merged commit dca2f93 into go-gitea:main Aug 28, 2023
23 checks passed
@GiteaBot GiteaBot added this to the 1.21.0 milestone Aug 28, 2023
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Aug 28, 2023
@delvh delvh deleted the refactor/more-css-variables branch August 28, 2023 19:55
@wxiaoguang
Copy link
Contributor

Regression:

image

ps: I would say I still prefer keeping some special values in code, instead of forcing everything into a variable.

zjjhot added a commit to zjjhot/gitea that referenced this pull request Aug 29, 2023
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
764a683 
* giteaofficial/main:
  Add fix incorrect can_create_org_repo for org owner team (go-gitea#26683)
  [skip ci] Updated translations via Crowdin
  Improve modal dialog UI (go-gitea#26764)
  Improve the "bug report" template and "support options" document (go-gitea#26753)
  Unify `border-radius` behavior (go-gitea#26770)
  Reduce some allocations in type conversion (go-gitea#26772)
  Refactor some CSS styles and simplify code (go-gitea#26771)
  Add auth-required to config.json for Cargo http registry (go-gitea#26729)
  refactor(API): refactor secret creation and update functionality (go-gitea#26751)
@delvh
Copy link
Member Author

delvh commented Aug 29, 2023

What was the behavior before?
I doubt it was much different:
The text should still have stretched the circle.
Everything else does not make much sense, unless you want to tell me that the text previously overflowed the circle.

@wxiaoguang
Copy link
Contributor

What was the behavior before?

Before:

image

After:

image

@silverwind
Copy link
Member

silverwind commented Aug 29, 2023 •
edited
Loading

The previous 17px radius was very deliberatly chosen to exactly prevent this kind of stretching because it matches the element vertical size. In hindsight, I should not have approved this.

@wxiaoguang
Copy link
Contributor

-> Fix notification circle (border-radius) #26794

@go-gitea go-gitea locked as resolved and limited conversation to collaborators Nov 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@wxiaoguang wxiaoguang wxiaoguang approved these changes

@silverwind silverwind silverwind 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. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality type/refactoring Existing code has been cleaned up. There should be no new functionality.
Projects
None yet
Milestone
1.21.0
Development

Successfully merging this pull request may close these issues.
4 participants
@delvh @silverwind @wxiaoguang @GiteaBot