Commit graph

26 commits

Author SHA1 Message Date
Otto Richter
a62521f241 New release form semantics
- correctly render labels without help text
- accessibility: fix external release button focus
- accessibility: test form aspects in browser test
2024-09-11 13:30:30 +02:00
Otto Richter
83d2b3b7fa Implement CSS-only input toggling, refactor related forms
UX/Translation changes:

- new teams: remove redundant tooltips that don't add meaningful information
  - move general information to table fieldset
- new teams: rename "general" to "custom" access for clarity
- new teams: show labels beside options on mobile

Accessibility:

- semantic form elements allow easier navigation (fieldset, mostly)
- improve better labelling of new teams table
- fix accessibility scan issues
- TODO: the parts that "disable" form elements were not yet touched and
  are not really accessible to screenreaders

Technical:

- replace two JavaScript solutions with one CSS standard
- implement a simpler grid (.simple-grid)
- simplify markup
- remove some webhook settings specific CSS

Testing:

- check more form content for accessibility issues
- but exclude tooltips from the scan :(
- reuse existing form tests from previous PR
2024-08-21 15:03:19 +02:00
Otto Richter
c9e402afdc feat(tmpl): Introduce semantic HTML in forms
Modifies forms:

- (new) org team
- (new) repo webhook
- (new) repo protected branch

The forms are not completely rewritten to semantic HTML yet. The focus
of this change was on standard elements, some custom solutions were left
untouched for now.

- swaps the order fo permission radio buttons as per https://codeberg.org/forgejo/forgejo/issues/4983
- uses fieldsets to group related inputs
  - ensures consistent styling across forms
  - can be improved later, e.g. using horizontal lines between sections
- fixes: previous font size of labels was smaller than the font size of the help text
- help text are now part of the label, clicking them now also activates the input
- drop unused CSS (no required checkboxes in grouped class remain)
- playwright testing:
  - move login boilerplate to utils
  - automated form accessibility checking
    - allow defining the scope, because legacy parts of the forms are not yet accessible
  - assert some CSS properties that should not be overriden
- the Makefile adjustment was necessary, because eslint scanned some internal files in the tests/e2e/reports directory
2024-08-19 01:14:18 +02:00
Earl Warren
8acaa427d6 Merge pull request 'Port of Refactor login page' () from 0ko/forgejo:ui-login-redesign into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4400
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
2024-07-10 04:15:56 +00:00
Anbraten
629ca22a97 Refactor login page ()
As requested in
https://github.com/go-gitea/gitea/pull/31504#issuecomment-2196196646.
This PR refactor the login page:

![Screenshot from 2024-07-04
19-23-10](https://github.com/go-gitea/gitea/assets/6918444/c45700f4-6747-473c-bdee-2156718a7953)

![Screenshot from 2024-07-04
19-23-21](https://github.com/go-gitea/gitea/assets/6918444/b1bf71cf-85f9-4517-a409-cc6d72e6af8f)

![Screenshot from 2024-06-30
09-35-20](https://github.com/go-gitea/gitea/assets/6918444/728cc37e-0cca-4883-afec-a43663d2c666)
- [x] use separate box for passkey login and go to registration
- [x] move forgot passoword next to password label
- [x] fix password required label `*` and padding
- [x] remove tabs from login page

---------

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 9c00dda33ad7bd594dd8f331fa1bf0acefc2ca54)

Conflict resolution:
* signin_navbar.tmpl has been deleted
* additions in form.css
* major code changes in signin_openid
* ...
2024-07-07 14:22:44 +05:00
Gusted
610487eb83
[BUG] Fix mobile UI for organisation creation
- Don't make checkpoints or radio inputs full width on a small screen,
these obviously shouldn't try to take up the whole width of a container.
- Wrap the label for organisation permission box inside a `<span
class="inline field">`, so it gets a left-margin from the `.inline.field
> :first-child` selector. This make the checkboxes and radio buttons
groups look indented from the left.
- Resolves 
2024-07-07 01:37:38 +02:00
Shiny Nematoda
b5d96e7db7 [FEAT] expose fuzzy search for issues/repo ()
Ports fuzzy search for `/issues` and `/pulls` from gitea.
Adds fuzzy search for `/user/repo/issues` and `/user/repo/pulls`.

---
## Notes
### Port: [`gitea#be5be0ac81`](be5be0ac81)

- CONFLICT (content): Merge conflict in routers/web/user/home.go

Conflict resolved by
  1. keeping both `PageIsOrgIssues` and the newly introduced `IsFuzzy`
  2. using `pager.AddParam(ctx, "fuzzy", "IsFuzzy")` rather than `pager.AddParamString("fuzzy", fmt.Sprintf("%v", isFuzzy))`

- CONFLICT (content): Merge conflict in templates/user/dashboard/issues.tmpl

Conflict resolved by keeping the changes from , and picking the `&fuzzy=${{.IsFuzzy}}` inclusion to all urls and `{{if .PageIsPulls}}...`

### Port: [`gitea#fede3cbada`](fede3cbada)

- CONFLICT (content): Merge conflict in templates/user/dashboard/issues.tmpl

Conflict resolved by keeping previous changes and picking the replacement of `{{if .PageIsPulls}}...` with `{{template "shared/search/combo_fuzzy"...` which contains the replacement of `explorer.go` to `explorer.go_to`

### Fixup commit

replaces `Iif` with `if` which was introduced in gitea#fede3cbada

### Feature commit

adds in support for /user/repo/(issues|pulls) + test

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Kerwin Bryant <kerwin612@qq.com>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4160
Reviewed-by: twenty-panda <twenty-panda@noreply.codeberg.org>
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
Co-committed-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
2024-06-17 18:58:24 +00:00
Otto Richter
03c1c88b5b Fix colour contrast issues 2024-04-30 01:48:30 +02:00
silverwind
0bd1e13676
Fix checkboxes on mobile view, remove some dead css ()
Fix the checkbox issues in
https://github.com/go-gitea/gitea/issues/30303 which were existing
problems with these selectors, but made visible with
https://github.com/go-gitea/gitea/pull/30162.

There is a lot of dead/useless CSS in `form.css`, I only fixed the two
problems and remove CSS that was definitely not in use or needed.

<img width="369" alt="Screenshot 2024-04-06 at 18 00 08"
src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129">
<img width="405" alt="Screenshot 2024-04-06 at 18 00 28"
src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2">

Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 644ade5ae6805a3db063b3f81a596febe49bacaf)
2024-04-15 20:01:35 +02:00
silverwind
66f9a4ee68
Remove fomantic checkbox module ()
CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on
admin page also still work. The only necessary JS is the one that links
`input` and `label` so that it can be toggled via label. All checkboxes
except the markdown ones render at `--checkbox-size: 16px` now.

<img width="174" alt="Screenshot 2024-03-28 at 22 15 10"
src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db">

<img width="499" alt="Screenshot 2024-03-28 at 21 00 07"
src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce">

<img width="83" alt="Screenshot 2024-03-28 at 22 14 34"
src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474">

---------

Co-authored-by: delvh <dev.lh@web.de>
(cherry picked from commit 8fd15990c5c8980caf2b9ffefc0b3427efacdc04)
2024-04-07 11:05:37 +02:00
Earl Warren
33ede09135 Merge pull request '[PORT] Unify search boxes (gitea#29530)' () from snematoda/port-29530 into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2688
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
2024-03-24 05:33:13 +00:00
Rafael Heard
3acea02eb6
Move all login and account creation page labels to be above inputs ()
There are a few inconsistencies within Gitea and this PR addresses one
of them. This PR updates the sign-in page layout, including the register
and openID tabs, to match the layout of the settings pages
(/user/settings) for more consistency.

This PR updates the following routes:
`/user/login`
`/user/sign_up`
`/user/login/openid`
`/user/forgot_password`
`/user/link_account`
`/user/recover_account`

**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/fb0cb517-57c0-4eed-be1d-56f36bd1960d">

**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/428d691d-0a42-4a67-a646-05527f2a7b41">

This PR addresses a revert of the original PR due to this
[comment](https://github.com/go-gitea/gitea/pull/28753#issuecomment-1956596817).

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
2024-03-23 12:36:12 +01:00
Denys Konovalov
847f03b6a6 Unify search boxes ()
Unify all but a few search boxes to use uniform style, uniform
translations and shared templates where possible.
Remove a few duplicated search templates, e. g. code search.

<details><summary>Example after screenshots:</summary>

![grafik](https://github.com/go-gitea/gitea/assets/47871822/e20e7d6b-c6be-4a47-b132-672766f41421)

![grafik](https://github.com/go-gitea/gitea/assets/47871822/d5b11b9c-c12f-4a29-8fb0-24e5aa511d18)

![grafik](https://github.com/go-gitea/gitea/assets/47871822/d86bb444-36c7-426d-9cf1-c634963dffb1)

![grafik](https://github.com/go-gitea/gitea/assets/47871822/a76c0319-0518-484a-a840-563d02b61198)

</details>

Also includes 

Co-authored-by: 6543 <6543@obermui.de>

---------

Co-authored-by: 6543 <m.huber@kithara.com>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
Conflicts:
	routers/web/repo/search.go
	templates/repo/home.tmpl
	templates/repo/search.tmpl
	templates/shared/repo_search.tmpl
2024-03-20 12:31:05 +00:00
Lunny Xiao
c88ae2e382
Revert because UI broken. ()
Revert 
Revert 

(cherry picked from commit e6e50696b83164805bec83a1b20c95a85a4dd7e5)
2024-02-26 22:30:25 +01:00
Rafael Heard
89eca88643
Left align the input labels for the link account page ()
In a previous [PR](https://github.com/go-gitea/gitea/pull/28753) we
moved the labels to be above the inputs. The PR ensures that the
alignment is also on both tabs of the link account page
(`/user/link_account`).

Before
<img width="1094" alt="before"
src="https://github.com/go-gitea/gitea/assets/6152817/ac1e86bd-c4d6-4e45-87d1-87bb8a736149">

After
<img width="1094" alt="after"
src="https://github.com/go-gitea/gitea/assets/6152817/1b5fc109-f4d2-43ee-b924-0a9e53a0e391">

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
(cherry picked from commit e4e5d76932e9d5ba1f8c63213aefae1493012a81)
2024-02-26 21:42:15 +01:00
Rafael Heard
4af0944b26
move sign in labels to be above inputs ()
There are a few inconsistencies within Gitea and this PR addresses one of them.
This PR updates the sign-in page layout, including the register and openID tabs,
to match the layout of the settings pages (`/user/settings`) for more consistency.

**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/fb0cb517-57c0-4eed-be1d-56f36bd1960d">

**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/428d691d-0a42-4a67-a646-05527f2a7b41">

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
(cherry picked from commit 1c14cd0c43d670fef984068e2666641ea5a062db)
2024-02-16 15:20:52 +01:00
delvh
dca2f9371d
Unify border-radius behavior ()
## Changes
- no more hardcoded `border-radius`es (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)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-08-28 19:43:59 +00:00
wxiaoguang
ee9e83b230
Remove incorrect CSS helper classes () 2023-08-25 06:47:59 +00:00
silverwind
6a075589bf
Fix mobile navbar and misc cleanups ()
- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items

Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-06-09 09:10:51 +00:00
HesterG
63a429581c
Modify OAuth login ui and fix display name, iconurl related logic ()
Close  

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-06-08 16:35:29 +00:00
wxiaoguang
027014d7de
Fix webauthn regression and improve code ()
Follow:

* 

There are some bugs in :

* https://github.com/go-gitea/gitea/pull/22697#issuecomment-1577957966
* the webauthn failure message is never shown and causes console error
* The `document.getElementById('register-button')` and
`document.getElementById('login-button')` is wrong
    * there is no such element in code
    * it causes JS error when a browser doesn't provide webauthn
    * the end user can't see the real error message

These bugs are fixed in this PR.

Other changes:

* Use simple HTML/CSS layouts, no need to use too many `gt-` patches
* Make the webauthn page have correct "page-content" layout
* The "data-webauthn-error-msg" elements are only used to provide locale
texts, so move them into a single "gt-hidden", then no need to repeat a
lot of "gt-hidden" in code
* The `{{.CsrfTokenHtml}}`  is a no-op because there is no form
* Many `hideElem('#webauthn-error')` in code is no-op because the
`webauthn-error` already has "gt-hidden" by default
* Make the tests for "URLEncodedBase64" really test with concrete cases.


Screenshots:

* Error message when webauthn fails (before, there is no error message):

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/93cf9559-d93b-4f06-9d98-0f7032d9c65b)

</details>

* Error message when webauthn is unavailable 

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/ffc0fcd9-b93b-4418-979c-c89bb627aaf2)

</details>
2023-06-07 19:20:18 +08:00
silverwind
a7e18b9fb7
Rework Oauth login buttons, swap github logo to monocolor ()
Diff without whitespace:
https://github.com/go-gitea/gitea/pull/24740/files?diff=unified&w=1

- Use SVGs for GitHub and GitLab oauth providers
- Replace section wrapping with a divider
- Rework icon rendering, increase size from 32px to 40px

Before:

<img width="853" alt="Screenshot 2023-05-15 at 21 54 23"
src="https://github.com/go-gitea/gitea/assets/115237/6ab5cfb4-46ff-469a-bd1f-06780d4a6a0b">

After (more providers):

<img width="849" alt="Screenshot 2023-05-15 at 21 51 21"
src="https://github.com/go-gitea/gitea/assets/115237/fa84f92f-98e0-4aed-9357-5d62ddd98195">

<img width="856" alt="Screenshot 2023-05-15 at 21 56 45"
src="https://github.com/go-gitea/gitea/assets/115237/d3edd7ed-dadd-4302-aca7-08f20adc220e">


Ref: https://codeberg.org/Codeberg/Community/issues/1023

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-15 22:46:51 +00:00
silverwind
9f6bc7c6f4
Replace tribute with text-expander-element for textarea ()
The completion popup now behaves now much more as expected than before
for the raw textarea:
- You can press <kbd>Tab</kbd> or <kbd>Enter</kbd> once the completion
popup is open to accept the selected item
- The menu does not close automatically when moving the cursor
- When you delete text, previously correct suggestions are shown again
- If you delete all text until the opening char (`@` or `:`) after
applying a suggestion, the popup reappears again
- Menu UI has been improved

<img width="278" alt="Screenshot 2023-04-07 at 19 43 42"
src="https://user-images.githubusercontent.com/115237/230653601-d6517b9f-0988-445e-aa57-5ebfaf5039f3.png">
2023-04-09 12:18:45 -04:00
silverwind
ca03ca9e6e
CSS color tweaks ()
Change grey shades in arc-green to match the theme more:

<img width="661" alt="Screenshot 2023-03-30 at 21 42 34"
src="https://user-images.githubusercontent.com/115237/228957952-8e099e56-6923-4aa6-8ce9-3c1cd898b73e.png">

Adjusted grey shade in light theme:

<img width="652" alt="image"
src="https://user-images.githubusercontent.com/115237/228963876-3bde6181-8397-4dc2-be72-33982e6c7acb.png">

Increase contrast in arc-green, change background to slightly darker
shade, change forgeground to slightly brighter colors:

<img width="283" alt="Screenshot 2023-03-30 at 22 33 20"
src="https://user-images.githubusercontent.com/115237/228957957-272c24a5-dd0b-427a-b6b7-e62836bdd73c.png">

Increase contrast of grey text in light theme as well by making them
darker:

<img width="273" alt="Screenshot 2023-03-30 at 22 33 35"
src="https://user-images.githubusercontent.com/115237/228957959-283139c7-6fa7-4b68-9fdd-16c668ad1301.png">

Add color rule for border multiple select items:

<img width="183" alt="Screenshot 2023-03-30 at 22 29 31"
src="https://user-images.githubusercontent.com/115237/228957954-6b5a752d-bbb0-4519-ab35-d02c0804d955.png">
<img width="181" alt="Screenshot 2023-03-30 at 22 29 46"
src="https://user-images.githubusercontent.com/115237/228957956-fca9790a-d6c9-4f31-8d1b-d183ab3ac669.png">

Added color rule for red `*` on required form fields:

<img width="97" alt="image"
src="https://user-images.githubusercontent.com/115237/228958760-517ad9ef-565d-4349-b734-9b559ab42429.png">
2023-03-31 16:24:47 +08:00
Hester Gong
d42015e6eb
Fix long name ui issues and label ui issue ()
This PR fixes some ui problems as mentioned in the two issues below.
1. Long file path has no word break

## Before
<img width="1357" alt="截屏2023-03-17 17 49 43"
src="https://user-images.githubusercontent.com/17645053/225873491-27c7bf9a-d5d5-4065-9e4a-ff228e935abf.png">

## After
<img width="1248" alt="截屏2023-03-17 17 51 22"
src="https://user-images.githubusercontent.com/17645053/225873562-93b87af7-9c83-43f8-aa0d-36a9174d25ac.png">
on mobile
<img width="408" alt="截屏2023-03-17 17 51 15"
src="https://user-images.githubusercontent.com/17645053/225873554-1b8c8999-1dfc-4251-a7fc-20ecd3444cb0.png">


2. Texts in labels  
## Before
<img width="1219" alt="截屏2023-03-17 17 49 24"
src="https://user-images.githubusercontent.com/17645053/225873369-812b1b52-c104-4e32-988f-c3e55ad2f844.png">

## After
<img width="1259" alt="截屏2023-03-17 17 51 31"
src="https://user-images.githubusercontent.com/17645053/225873317-9717fd2c-e9e1-4a00-a27d-6bdc5933c3ca.png">
with two labels
<img width="1258" alt="截屏2023-03-17 17 51 53"
src="https://user-images.githubusercontent.com/17645053/225873323-13198192-71de-472d-8e78-6fd86ddba3d9.png">
In explore and star pages
<img width="896" alt="截屏2023-03-17 18 25 00"
src="https://user-images.githubusercontent.com/17645053/225878962-9e26e3aa-cff0-451c-9133-19f4ad1507a4.png">

<img width="913" alt="截屏2023-03-17 18 25 09"
src="https://user-images.githubusercontent.com/17645053/225878967-6adaa414-136e-43c2-87d0-7e46a0da112e.png">

3. Long name repository on creating new fork page
## Before
<img width="919" alt="截屏2023-03-17 17 50 01"
src="https://user-images.githubusercontent.com/17645053/225873723-5c4ea137-3b51-4074-a458-ef442e330ddf.png">

## After
<img width="907" alt="截屏2023-03-17 17 50 37"
src="https://user-images.githubusercontent.com/17645053/225873772-fc4a52c3-49c6-4ca6-903d-a13707f2a98b.png">

<img width="383" alt="截屏2023-03-17 17 50 48"
src="https://user-images.githubusercontent.com/17645053/225873779-6de1dfde-5c05-4ae9-89e1-85c25b3a1682.png">

Closes 
Closes 
2023-03-18 17:07:59 +01:00
silverwind
202803fc69
Replace Less with CSS ()
Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.

The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.

Fixes: https://github.com/go-gitea/gitea/issues/15565
2023-03-14 22:20:19 -04:00