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.

Improve flex list UI (#26970)

1. There is already `gt-ac`, so no need to introduce `flex-item-center`
2. The `flex-item-baseline` and `.flex-item-icon svg { margin-top: 1px
}` seem to be a tricky patch, they don't resolve the root problem, and
still cause misalignment in some cases.
* The root problem is: the "icon" needs to align with the sibling
"title"
* So, make the "icon" and the "title" both have the same height
3. `flex-text-inline` could only be used if the element is really
"inline", otherwise its `vertical-align` would make the box size change.
In most cases, `flex-text-block` is good enough.


![image](https://github.com/go-gitea/gitea/assets/2114189/1b7acfc2-b1c7-4e9c-a983-2fa932026479)

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

authored by

wxiaoguang
silverwind
Giteabot and committed by
GitHub ffa4949e 4807f7be

+23 -26
+1 -1
templates/explore/user_list.tmpl
··· 1 1 <div class="flex-list"> 2 2 {{range .Users}} 3 - <div class="flex-item flex-item-center"> 3 + <div class="flex-item gt-ac"> 4 4 <div class="flex-item-leading"> 5 5 {{ctx.AvatarUtils.Avatar . 48}} 6 6 </div>
+1 -1
templates/org/member/members.tmpl
··· 7 7 <div class="flex-list"> 8 8 {{range .Members}} 9 9 {{$isPublic := index $.MembersIsPublicMember .ID}} 10 - <div class="flex-item {{if $.PublicOnly}}flex-item-center{{end}}"> 10 + <div class="flex-item {{if $.PublicOnly}}gt-ac{{end}}"> 11 11 <div class="flex-item-leading"> 12 12 <a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a> 13 13 </div>
+2 -2
templates/org/team/members.tmpl
··· 24 24 <div class="ui attached segment"> 25 25 <div class="flex-list"> 26 26 {{range .Team.Members}} 27 - <div class="flex-item flex-item-center"> 27 + <div class="flex-item gt-ac"> 28 28 <div class="flex-item-leading"> 29 29 <a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a> 30 30 </div> ··· 56 56 <div class="ui attached segment"> 57 57 <div class="flex-list"> 58 58 {{range .Invites}} 59 - <div class="flex-item flex-item-center"> 59 + <div class="flex-item gt-ac"> 60 60 <div class="flex-item-main"> 61 61 {{.Email}} 62 62 </div>
+1 -1
templates/org/team/repositories.tmpl
··· 28 28 <div class="ui attached segment"> 29 29 <div class="flex-list"> 30 30 {{range .Team.Repos}} 31 - <div class="flex-item flex-item-center"> 31 + <div class="flex-item gt-ac"> 32 32 <div class="flex-item-leading"> 33 33 {{template "repo/icon" .}} 34 34 </div>
+1 -1
templates/repo/actions/runs_list.tmpl
··· 6 6 </div> 7 7 {{end}} 8 8 {{range .Runs}} 9 - <div class="flex-item flex-item-center"> 9 + <div class="flex-item gt-ac"> 10 10 <div class="flex-item-leading"> 11 11 {{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}} 12 12 </div>
+1 -1
templates/repo/settings/branches.tmpl
··· 41 41 <div class="ui attached segment"> 42 42 <div class="flex-list"> 43 43 {{range .ProtectedBranches}} 44 - <div class="flex-item flex-item-center"> 44 + <div class="flex-item gt-ac"> 45 45 <div class="flex-item-main"> 46 46 <div class="flex-item-title"> 47 47 <div class="ui basic primary label">{{.RuleName}}</div>
+1 -1
templates/repo/settings/collaboration.tmpl
··· 7 7 <div class="ui attached segment"> 8 8 <div class="flex-list"> 9 9 {{range .Collaborators}} 10 - <div class="flex-item flex-item-center"> 10 + <div class="flex-item gt-ac"> 11 11 <div class="flex-item-leading"> 12 12 <a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a> 13 13 </div>
+1 -1
templates/repo/settings/options.tmpl
··· 774 774 </div> 775 775 </div> 776 776 {{if not .Repository.IsMirror}} 777 - <div class="flex-item flex-item-center"> 777 + <div class="flex-item gt-ac"> 778 778 <div class="flex-item-main"> 779 779 {{if .Repository.IsArchived}} 780 780 <div class="flex-item-title">{{.locale.Tr "repo.settings.unarchive.header"}}</div>
+5 -3
templates/shared/issuelist.tmpl
··· 1 1 <div id="issue-list" class="flex-list"> 2 2 {{$approvalCounts := .ApprovalCounts}} 3 3 {{range .Issues}} 4 - <div class="flex-item flex-item-baseline"> 5 - <div class="flex-item-leading gt-ac"> 4 + <div class="flex-item"> 5 + <div class="flex-item-leading"> 6 6 {{if $.CanWriteIssuesOrPulls}} 7 + <div class="flex-item-icon"> 7 8 <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;"> 9 + </div> 8 10 {{end}} 9 11 <div class="flex-item-icon"> 10 12 {{template "shared/issueicon" .}} ··· 44 46 {{end}} 45 47 {{if .NumComments}} 46 48 <div class="text grey"> 47 - <a class="gt-no-underline muted flex-text-inline" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> 49 + <a class="gt-no-underline muted flex-text-block" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> 48 50 {{svg "octicon-comment" 16}}{{.NumComments}} 49 51 </a> 50 52 </div>
+1 -1
templates/shared/secrets/add_list.tmpl
··· 14 14 {{if .Secrets}} 15 15 <div class="flex-list"> 16 16 {{range .Secrets}} 17 - <div class="flex-item flex-item-center"> 17 + <div class="flex-item gt-ac"> 18 18 <div class="flex-item-leading"> 19 19 {{svg "octicon-key" 32}} 20 20 </div>
+1 -1
templates/shared/variables/variable_list.tmpl
··· 16 16 {{if .Variables}} 17 17 <div class="flex-list"> 18 18 {{range .Variables}} 19 - <div class="flex-item flex-item-center"> 19 + <div class="flex-item gt-ac"> 20 20 <div class="flex-item-leading"> 21 21 {{svg "octicon-pencil" 32}} 22 22 </div>
+1 -1
templates/user/settings/applications_oauth2_list.tmpl
··· 4 4 {{.locale.Tr "settings.oauth2_application_create_description"}} 5 5 </div> 6 6 {{range .Applications}} 7 - <div class="flex-item flex-item-center"> 7 + <div class="flex-item gt-ac"> 8 8 <div class="flex-item-leading"> 9 9 {{svg "octicon-apps" 32}} 10 10 </div>
+1 -1
templates/user/settings/security/openid.tmpl
··· 7 7 {{.locale.Tr "settings.openid_desc"}} 8 8 </div> 9 9 {{range .OpenIDs}} 10 - <div class="flex-item flex-item-center"> 10 + <div class="flex-item gt-ac"> 11 11 <div class="flex-item-leading"> 12 12 {{svg "fontawesome-openid" 20}} 13 13 </div>
+5 -10
web_src/css/shared/flex-list.css
··· 9 9 padding: 1em 0; 10 10 } 11 11 12 - .flex-item-baseline { 13 - align-items: baseline; 14 - } 15 - 16 - .flex-item-center { 17 - align-items: center; 18 - } 19 - 20 12 .flex-item .flex-item-leading { 21 13 display: flex; 22 14 align-items: flex-start; ··· 41 33 color: var(--color-primary) !important; 42 34 } 43 35 44 - .flex-item .flex-item-icon svg { 45 - margin-top: 1px; 36 + .flex-item .flex-item-icon { 37 + display: flex; 38 + align-items: center; 39 + height: 20px; /* match the default flex-item-title height */ 46 40 } 47 41 48 42 .flex-item .flex-item-trailing { ··· 65 59 font-weight: var(--font-weight-semibold); 66 60 word-break: break-word; 67 61 min-width: 0; 62 + min-height: 20px; 68 63 } 69 64 70 65 .flex-item .flex-item-title a {