bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Issues Pull requests Activity

feat(ui): improve button gap consistency, make it variable, larger on touchscreens (#7271)

Browse source 
* home buttons: use `button-sequence` for consistency of gaps with other ui
* folder-actions: use `button-sequence` for better overflowing and so gap actually works instead of relying on whitespace, because currently it doesn't due to lack of flex
* introduce variable `--button-spacing` for `button-row` and `button-sequence`
    * it's `0.33rem` on desktop for more pleasant hovering over button rows
    * it's `0.5rem` on touchscreens for worrying less about misstapping

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7271
Reviewed-by: Gusted <gusted@noreply.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-03-27 21:01:29 +00:00 • committed by Gusted
parent 2457f5ff22
commit 7990bcf333
2 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web_src/css/base.css
View file

@ -27,6 +27,7 @@
--checkbox-size: 15px; /* height and width of checkbox and radio inputs */
--page-spacing: 16px; /* space between page elements */
--page-margin-x: 32px; /* minimum space on left and right side of page */
--button-spacing: 0.33rem;
}
@media (min-width: 768px) and (max-width: 1200px) {
@ -41,6 +42,12 @@
}
}
@media (pointer: coarse) {
:root {
--button-spacing: 0.5rem;
}
}
:root * {
--fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
}
@ -247,13 +254,13 @@ h1.error-code {
}
.button-row {
gap: 0.5rem;
gap: var(--button-spacing);
}
.button-sequence {
display: flex;
flex-flow: wrap;
gap: 0.5em;
gap: var(--button-spacing);
}
.button-sequence.right {