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

UI border-radius inconsistent problems #30673

Closed
23 tasks done
lunny opened this issue Apr 24, 2024 · 5 comments · Fixed by #30707 or #30809
Closed
23 tasks done

UI border-radius inconsistent problems #30673

lunny opened this issue Apr 24, 2024 · 5 comments · Fixed by #30707 or #30809
Labels
topic/ui Change the appearance of the Gitea UI

Comments

@lunny
Copy link
Member

lunny commented Apr 24, 2024 •
edited

  • Repository Activity
image
  • Repository Actions Secrets
image
  • Repository Actions Variables
image
  • File editor
image
  • File editor preview
image
  • User profile
image
  • Admin -> Identity & Access -> User Emails
image
  • Admin -> Code Assets -> Repositories
image
  • Admin -> Integrations -> Webhook
image
  • Admin -> Actions -> Variables
image
  • Admin -> System Notices
image
  • Org setting -> Webhooks
image
  • Org setting -> Labels
image
  • Org Setting -> Blocked Users
image
  • Org Setting -> Actions -> Secrets
image
  • Org Setting -> Actions -> Variables
image
  • Org -> Teams -> Members/Repositories setting for a Team
image
  • New migration
image
  • notification -> subscriptions
image
  • User settings -> Blocked users
image
  • User settings -> Actions -> Secrets
image
  • User settings -> Actions -> Variables
image
  • User setttings -> Webhooks
image
@lunny lunny added the topic/ui Change the appearance of the Gitea UI label Apr 24, 2024
@lunny lunny mentioned this issue Apr 24, 2024
Merged
@silverwind
Copy link
Member

I see these are because of various .ui.segment constructs. Should pretty much all be fixable with some :has magic.

@silverwind silverwind mentioned this issue Apr 25, 2024
Merged
silverwind added a commit that referenced this issue Apr 29, 2024
@silverwind @wxiaoguang @GiteaBot
Fix all rounded borders, change affected tab menus to pills (#30707)
a3d9f0d 
Fixes #30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
GiteaBot added a commit to GiteaBot/gitea that referenced this issue Apr 29, 2024
@silverwind @wxiaoguang @GiteaBot
Fix all rounded borders, change affected tab menus to pills (go-gitea…
693e20a 
…#30707)

Fixes go-gitea#30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
@GiteaBot GiteaBot mentioned this issue Apr 29, 2024
Merged
silverwind added a commit that referenced this issue Apr 29, 2024
@GiteaBot @silverwind @wxiaoguang
Fix all rounded borders, change affected tab menus to pills (#30707) (#…
6c86034 
…30769)

Backport #30707 by @silverwind

Fixes #30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
@lunny
Copy link
Member Author

lunny commented Apr 30, 2024 •
edited

The two places border-radius missed. @silverwind

  • Admin -> Code Assets -> Repositories
image
  • Admin -> System Notices
image

@lunny lunny reopened this Apr 30, 2024
@silverwind
Copy link
Member

silverwind commented Apr 30, 2024 •
edited

The two places border-radius missed. @silverwind

Could not reproduce these:

#30707 (comment)
#30707 (comment)

@lunny
Copy link
Member Author

lunny commented May 1, 2024

I can reproduce them in both firefox, chrome, and local/try.gitea.io .

@silverwind
Copy link
Member

silverwind commented May 1, 2024 •
edited

I can reproduce /admin/notices when pagination is present, likely the other needs it too.

@silverwind silverwind mentioned this issue May 1, 2024
Merged
silverwind added a commit that referenced this issue May 2, 2024
@silverwind
Fix rounded border for segment followed by pagination (#30809)
82eca44 
Fixes #30673, specifically
#30673 (comment).
GiteaBot pushed a commit to GiteaBot/gitea that referenced this issue May 2, 2024
@silverwind @GiteaBot
Fix rounded border for segment followed by pagination (go-gitea#30809)
e3bf5bb 
Fixes go-gitea#30673, specifically
go-gitea#30673 (comment).
@GiteaBot GiteaBot mentioned this issue May 2, 2024
Merged
silverwind added a commit that referenced this issue May 2, 2024
@GiteaBot @silverwind
Fix rounded border for segment followed by pagination (#30809) (#30818)
41efdda 
Backport #30809 by @silverwind

Fixes #30673, specifically
#30673 (comment).

Co-authored-by: silverwind <me@silverwind.io>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic/ui Change the appearance of the Gitea UI
Projects
None yet
Milestone
No milestone
2 participants
@lunny @silverwind