diff options
| author | 0ko <0ko@noreply.codeberg.org> | 2025-01-13 18:28:36 +0100 |
|---|---|---|
| committer | Otto <otto@codeberg.org> | 2025-01-13 18:28:36 +0100 |
| commit | 30c7a0b94787123afc80906b4040f2c73a44d6e9 (patch) | |
| tree | 0ca9e6526ae21b0a3e8c95d9c28a446f3f1c1a08 | |
| parent | Use redesigned switch on commit graph page (#6545) (diff) | |
| download | forgejo-30c7a0b94787123afc80906b4040f2c73a44d6e9.tar.xz forgejo-30c7a0b94787123afc80906b4040f2c73a44d6e9.zip | |
Make switch larger on touchscreen devices (#6546)
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|
|-|-|
|||
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>
| -rw-r--r-- | web_src/css/modules/switch.css | 6 |
1 files changed, 4 insertions, 2 deletions
diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css index 265c2ed45a..a9499a84aa 100644 --- a/web_src/css/modules/switch.css +++ b/web_src/css/modules/switch.css @@ -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 { |