git724/forgejo
1
0
Fork 0
Code Issues Pull requests 3 Projects 1 Releases Packages Wiki 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
commit 7990bcf333
2 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
templates/repo/home.tmpl
View file

@ -56,8 +56,8 @@
{{$l := Eval $n "-" 1}}
{{$isHomepage := (eq $n 0)}}
<div class="repo-button-row">
<div class="tw-flex tw-items-center tw-gap-y-2">
{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
<div class="tw-gap-y-2 button-sequence">
{{template "repo/branch_dropdown" dict "root" .}}
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
{{$cmpBranch := ""}}
{{if ne .Repository.ID .BaseRepo.ID}}
@ -141,7 +141,7 @@
{{template "repo/cite/cite_modal" .}}
{{end}}
{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
<div class="button-row folder-actions">
<div class="button-sequence folder-actions">
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
</a>

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 {