foster/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-01-20 16:50:28 -05:00
Code Issues Wiki Activity

Make switch larger on touchscreen devices (#6546)

Browse source 
Followup to https://codeberg.org/forgejo/forgejo/pulls/6459.

Usually it's quite hard to have inputs with balanced size that works for both desktop and mobile: it's either too large or too small for one of them. I think this can be a solution for this new element.

I tried it locally, it feels good on a phone. There's likely one downside which is that the switch will still be larger on touch devices even when they're wide, like on tablets. I think it can be resolved separately at some point. It isn't a problem on small devices because usually these elements go on separate rows.

## Preview

This change only affects touch devices.

|Before|After|
|-|-|
|![](/attachments/75311c3f-2e19-4b03-9596-7f78c78f0a70)|![](/attachments/74f987af-57c1-417d-89ed-f96666cb9bad)|

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6546
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-01-13 17:28:36 +00:00 • committed by Otto
parent 4e6f8dd57a
commit 30c7a0b947
1 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web_src/css/modules/switch.css
View file

@ -23,8 +23,10 @@
outline: 1px solid var(--color-input-border);
}
.switch .item svg {
vertical-align: sub;
@media (pointer: coarse) {
.switch .item {
padding: .75em 1.125em;
}
}
.switch button.item {