mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-06-27 20:30:33 +02:00
3ea544d89c
Backport #25109 by @jtran The current UI to create API access tokens uses checkboxes that have a complicated relationship where some need to be checked and/or disabled in certain states. It also requires that a user interact with it to understand what their options really are. This branch changes to use `<select>`s. It better fits the available options, and it's closer to [GitHub's UI](https://github.com/settings/personal-access-tokens/new), which is good, in my opinion. It's more mobile friendly since the tap-areas are larger. If we ever add more permissions, like Maintainer, there's a natural place that doesn't take up more screen real-estate. This branch also fixes a few minor issues: - Hide the error about selecting at least one permission after second submission - Fix help description to call it "authorization" since that's what permissions are about (not authentication) Related: #24767. <img width="883" alt="Screenshot 2023-06-07 at 5 07 34 PM" src="https://github.com/go-gitea/gitea/assets/10803/6b63d807-c9be-4a4b-8e53-ecab6cbb8f76"> --- When it's open: <img width="881" alt="Screenshot 2023-06-07 at 5 07 59 PM" src="https://github.com/go-gitea/gitea/assets/10803/2432c6d0-39c2-4ca4-820e-c878ffdbfb69"> Co-authored-by: Jonathan Tran <jon@allspice.io>
26 lines
601 B
CSS
26 lines
601 B
CSS
.gitea-select {
|
|
position: relative;
|
|
}
|
|
|
|
.gitea-select select {
|
|
appearance: none; /* hide default triangle */
|
|
}
|
|
|
|
/* ::before and ::after pseudo elements don't work on select elements,
|
|
so we need to put it on the parent. */
|
|
.gitea-select::after {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 8px;
|
|
pointer-events: none;
|
|
content: '';
|
|
width: 14px;
|
|
height: 14px;
|
|
mask-size: cover;
|
|
-webkit-mask-size: cover;
|
|
mask-image: var(--octicon-chevron-right);
|
|
-webkit-mask-image: var(--octicon-chevron-right);
|
|
transform: rotate(90deg); /* point the chevron down */
|
|
background: currentcolor;
|
|
}
|