oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

* 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>

authored by

0ko
0ko and committed by
Gusted 7990bcf3 2457f5ff

+12 -5
+3 -3
templates/repo/home.tmpl
··· 56 56 {{$l := Eval $n "-" 1}} 57 57 {{$isHomepage := (eq $n 0)}} 58 58 <div class="repo-button-row"> 59 - <div class="tw-flex tw-items-center tw-gap-y-2"> 60 - {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}} 59 + <div class="tw-gap-y-2 button-sequence"> 60 + {{template "repo/branch_dropdown" dict "root" .}} 61 61 {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} 62 62 {{$cmpBranch := ""}} 63 63 {{if ne .Repository.ID .BaseRepo.ID}} ··· 141 141 {{template "repo/cite/cite_modal" .}} 142 142 {{end}} 143 143 {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}} 144 - <div class="button-row folder-actions"> 144 + <div class="button-sequence folder-actions"> 145 145 <a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}"> 146 146 {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} 147 147 </a>
+9 -2
web_src/css/base.css
··· 27 27 --checkbox-size: 15px; /* height and width of checkbox and radio inputs */ 28 28 --page-spacing: 16px; /* space between page elements */ 29 29 --page-margin-x: 32px; /* minimum space on left and right side of page */ 30 + --button-spacing: 0.33rem; 30 31 } 31 32 32 33 @media (min-width: 768px) and (max-width: 1200px) { ··· 38 39 @media (max-width: 767.98px) { 39 40 :root { 40 41 --page-margin-x: 8px; 42 + } 43 + } 44 + 45 + @media (pointer: coarse) { 46 + :root { 47 + --button-spacing: 0.5rem; 41 48 } 42 49 } 43 50 ··· 247 254 } 248 255 249 256 .button-row { 250 - gap: 0.5rem; 257 + gap: var(--button-spacing); 251 258 } 252 259 253 260 .button-sequence { 254 261 display: flex; 255 262 flex-flow: wrap; 256 - gap: 0.5em; 263 + gap: var(--button-spacing); 257 264 } 258 265 259 266 .button-sequence.right {