mirror of
https://github.com/go-gitea/gitea
synced 2025-07-22 18:28:37 +00:00
Remove fomantic checkbox module (#30162)
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>
This commit is contained in:
@@ -41,24 +41,19 @@ The ideal checkboxes should be:
|
||||
<label><input type="checkbox"> ... </label>
|
||||
```
|
||||
|
||||
However, related CSS styles aren't supported (not implemented) yet, so at the moment,
|
||||
almost all the checkboxes are still using Fomantic UI checkbox.
|
||||
|
||||
## Fomantic UI Checkbox
|
||||
However, the templates still have the Fomantic-style HTML layout:
|
||||
|
||||
```html
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox"> <!-- class "hidden" will be added by $.checkbox() -->
|
||||
<input type="checkbox">
|
||||
<label>...</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
Then the JS `$.checkbox()` should be called to make it work with keyboard and label-clicking,
|
||||
then it works like the ideal checkboxes.
|
||||
|
||||
There is still a problem: Fomantic UI checkbox is not friendly to screen readers,
|
||||
so we add IDs to all the Fomantic UI checkboxes automatically by JS.
|
||||
If the `label` part is empty, then the checkbox needs to get the `aria-label` attribute manually.
|
||||
We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the
|
||||
label etc. work. There is still a problem: These checkboxes are not friendly to screen readers,
|
||||
so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty,
|
||||
then the checkbox needs to get the `aria-label` attribute manually.
|
||||
|
||||
# Fomantic Dropdown
|
||||
|
||||
|
Reference in New Issue
Block a user