From b92c142c97c3add1aed736a0a7c7ab044588662d Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 14 May 2023 16:15:59 +0200 Subject: [PATCH] Clean up various avatar dimensions (#24701) Clean up a few cases where avatar dimensions were overwritten via CSS, which were no longer needed or were possible to set via HTML width. Also included are two small fixes: - Fix one more case of incorrect avatar offset on review timeline - Vertically center avatars in review sidebar There is more to be done here, but some of the work depends on Fomantic `comment` module removal, or in the case of org member lists, a refactor of the `avatarlink` template to accept a size. image image --------- Co-authored-by: Giteabot --- templates/repo/commits_list_small.tmpl | 4 +-- templates/repo/issue/view_content.tmpl | 10 +++--- .../repo/issue/view_content/comments.tmpl | 22 ++++++------ templates/repo/issue/view_content/pull.tmpl | 2 +- templates/shared/issuelist.tmpl | 2 +- web_src/css/base.css | 5 --- web_src/css/modules/comment.css | 14 +------- web_src/css/organization.css | 2 +- web_src/css/repository.css | 36 +++---------------- web_src/css/shared/issuelist.css | 2 -- 10 files changed, 29 insertions(+), 70 deletions(-) diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 5bc159de8..900d85360 100644 --- a/templates/repo/commits_list_small.tmpl +++ b/templates/repo/commits_list_small.tmpl @@ -15,7 +15,7 @@ {{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}} - + {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}} {{$class := "ui sha label"}} {{if .Signature}} @@ -32,7 +32,7 @@ {{$class = (printf "%s%s" $class " isWarning")}} {{end}} {{end}} - + {{ShortSha .ID.String}} {{if .Signature}} {{template "repo/shabox_badge" dict "root" $.root "verification" .Verification}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index e9a82425b..c54b29dcd 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -11,10 +11,12 @@
{{if .Issue.OriginalAuthor}} - + + + {{else}} - {{avatar $.Context .Issue.Poster}} + {{avatar $.Context .Issue.Poster 40}} {{end}}
@@ -33,7 +35,7 @@ {{else}} - {{avatar $.Context .Issue.Poster}} + {{avatar $.Context .Issue.Poster 24}} {{template "shared/user/authorlink" .Issue.Poster}} @@ -93,7 +95,7 @@ {{if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived)}}
- {{avatar $.Context .SignedUser}} + {{avatar $.Context .SignedUser 40}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index ab499f346..32ce8bad9 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -15,10 +15,12 @@ {{if eq .Type 0}}
{{if .OriginalAuthor}} - + + + {{else}} - {{avatar $.Context .Poster}} + {{avatar $.Context .Poster 40}} {{end}}
@@ -38,7 +40,7 @@ {{else}} {{if gt .Poster.ID 0}} - {{avatar $.Context .Poster}} + {{avatar $.Context .Poster 24}} {{end}} @@ -375,8 +377,8 @@ {{/* Some timeline avatars need a offset to correctly allign with their speech bubble. The condition depends on review type and for positive reviews whether there is a comment element or not */}} - - {{avatar $.Context .Poster}} + + {{avatar $.Context .Poster 40}} {{end}} {{svg (printf "octicon-%s" .Review.Type.Icon)}} @@ -413,7 +415,7 @@
{{if gt .Poster.ID 0}} - {{avatar $.Context .Poster}} + {{avatar $.Context .Poster 24}} {{end}} @@ -482,7 +484,7 @@ {{range $filename, $lines := .Review.CodeComments}} {{range $line, $comms := $lines}}
-
+
{{$invalid := (index $comms 0).Invalidated}} {{$resolved := (index $comms 0).IsResolved}} {{$resolveDoer := (index $comms 0).ResolveDoer}} @@ -541,7 +543,7 @@
{{if not .OriginalAuthor}} - {{avatar $.Context .Poster}} + {{avatar $.Context .Poster 20}} {{end}} @@ -768,7 +770,7 @@
- + {{svg "octicon-x" 16}} {{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}} @@ -789,7 +791,7 @@
{{if gt .Poster.ID 0}} - {{avatar $.Context .Poster}} + {{avatar $.Context .Poster 24}} {{end}} diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl index 907ee1985..5325c710b 100644 --- a/templates/repo/issue/view_content/pull.tmpl +++ b/templates/repo/issue/view_content/pull.tmpl @@ -115,7 +115,7 @@ {{- else if .Issue.PullRequest.IsChecking}}yellow {{- else if .Issue.PullRequest.IsEmpty}}grey {{- else if .Issue.PullRequest.CanAutoMerge}}green - {{- else}}red{{end}}">{{svg "octicon-git-merge" 32}} + {{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}
{{template "repo/pulls/status" .}} {{$showGeneralMergeForm := false}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 3b3547108..71d9059c1 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -153,7 +153,7 @@
{{range .Assignees}} - {{avatar $.Context .}} + {{avatar $.Context . 20}} {{end}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index 4c8d30c1b..ed00b1a29 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1903,11 +1903,6 @@ img.ui.avatar, color: var(--color-text-light); } -.repo-title .avatar { - width: 32px !important; - height: 32px !important; -} - .repo-title .labels { margin-left: 0.5rem; } diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css index 1593c39b7..5a90c0852 100644 --- a/web_src/css/modules/comment.css +++ b/web_src/css/modules/comment.css @@ -47,20 +47,8 @@ } .ui.comments .comment .avatar { - display: block; - width: 2.5em; - height: auto; float: left; - margin: 0.2em 0 0; -} - -.ui.comments .comment img.avatar, -.ui.comments .comment .avatar img { - display: block; - margin: 0 auto; - width: 100%; - height: 100%; - border-radius: 0.25rem; + width: 2.5em; } .ui.comments .comment > .content { diff --git a/web_src/css/organization.css b/web_src/css/organization.css index 1b10ba157..eb2dd8a4d 100644 --- a/web_src/css/organization.css +++ b/web_src/css/organization.css @@ -170,7 +170,7 @@ .organization.members .list .item .ui.avatar { width: 48px; - height: auto; + height: 48px; margin-right: 1rem; align-self: flex-start; } diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 0d81d6511..eafe022ce 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -691,11 +691,6 @@ margin-right: 5px; } -.repository.view.issue .merge.box .timeline-avatar { - margin-top: 3px; - margin-left: 4px; -} - .repository.view.issue .merge.box .branch-update.grid .row { padding-bottom: 1rem; } @@ -788,23 +783,11 @@ left: -68px; } -.repository.view.issue .comment-list .timeline-item .timeline-avatar img { - width: 40px !important; - height: 40px !important; -} - /* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */ .repository.view.issue .comment-list .timeline-item .inline-timeline-avatar { display: none; } -.repository.view.issue .comment-list .timeline-item img.avatar, -.repository.view.issue .comment-list .timeline-item .avatar img { - width: 20px; - height: 20px; - vertical-align: middle; -} - .repository.view.issue .comment-list .timeline-item:first-child:not(.commit) { padding-top: 0 !important; } @@ -1063,12 +1046,12 @@ .repository.view.issue .comment-list .code-comment { border: 1px solid transparent; - padding: 0.25rem 0.5rem; margin: 0; } -.repository.view.issue .comment-list .code-comment .content { - border: none !important; +/* fix fomantic's border-radius via :first-child with hidden elements */ +.collapsible-comment-box:has(.gt-hidden) { + border-radius: var(--border-radius) !important; } .repository.view.issue .comment-list .code-comment .comment-header { @@ -1091,13 +1074,7 @@ } .repository.view.issue .comment-list .comment > .avatar ~ .content { - margin-left: 3em; -} - -.repository.view.issue .comment-code-cloud .comment-list .code-comment img.avatar, -.repository.view.issue .comment-code-cloud .comment-list .comment img.avatar { - width: 28px; - height: 28px; + margin-left: 42px; } .repository.view.issue .comment-list .comment-code-cloud .segment.reactions { @@ -3085,6 +3062,7 @@ td.blob-excerpt { } .sidebar-item-link { + display: inline-flex; align-items: center; word-break: break-all; } @@ -3260,10 +3238,6 @@ td.blob-excerpt { margin-left: 6px; margin-right: 2px; } - .repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar { - height: 24px; - width: 24px; - } .repository.view.issue .comment-list .timeline .comment-header { padding-left: 4px; } diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index c21440675..db0d4cfbb 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -69,8 +69,6 @@ } .issue.list > .item .assignee img { - width: 20px; - height: 20px; margin-right: 2px; }