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.

<img width="371" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9c5902fb-2b89-4a7d-a152-60e74c3b2c56">
<img width="306" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/c8d92e2a-91c9-4f4a-a7de-6ae1a6bc0479">

---------

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

diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index 5bc159de8178665cf59010857f28932ecb2dc4dc..900d853601aa5f592ca7d0eedf59a50ad71de255 100644 (file)
--- 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)}}
 
-               <span class="ui float right shabox">
+               <span class="ui float right shabox gt-df gt-ac">
                        {{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}}
-                       <a href="{{$commitLink}}" rel="nofollow" class="{{$class}}">
+                       <a href="{{$commitLink}}" rel="nofollow" class="gt-ml-3 {{$class}}">
                                <span class="shortsha">{{ShortSha .ID.String}}</span>
                                {{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 e9a82425ba72a282ac6eb2b49a0ddd04838dec20..c54b29dcd648c340b79223bc44eb251721df063a 100644 (file)
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -11,10 +11,12 @@
                <div class="ui timeline">
                        <div id="{{.Issue.HashTag}}" class="timeline-item comment first">
                                {{if .Issue.OriginalAuthor}}
-                               <span class="timeline-avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
+                               <span class="timeline-avatar">
+                                       <img src="{{AppSubUrl}}/assets/img/avatar_default.png" width="40" height="40">
+                               </span>
                                {{else}}
                                <a class="timeline-avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
-                                       {{avatar $.Context .Issue.Poster}}
+                                       {{avatar $.Context .Issue.Poster 40}}
                                </a>
                                {{end}}
                                <div class="content comment-container">
@@ -33,7 +35,7 @@
                                                                </span>
                                                        {{else}}
                                                                <a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
-                                                                       {{avatar $.Context .Issue.Poster}}
+                                                                       {{avatar $.Context .Issue.Poster 24}}
                                                                </a>
                                                                <span class="text grey">
                                                                        {{template "shared/user/authorlink" .Issue.Poster}}
@@ -93,7 +95,7 @@
                                {{if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived)}}
                                <div class="timeline-item comment form">
                                        <a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
-                                               {{avatar $.Context .SignedUser}}
+                                               {{avatar $.Context .SignedUser 40}}
                                        </a>
                                        <div class="content">
                                                <form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index ab499f346afdb17b309629b0efbbb6f679978c8b..32ce8bad947626c2f94a2b1f37b5db97ccdd96eb 100644 (file)
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -15,10 +15,12 @@
                {{if eq .Type 0}}
                        <div class="timeline-item comment" id="{{.HashTag}}">
                        {{if .OriginalAuthor}}
-                               <span class="timeline-avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
+                               <span class="timeline-avatar">
+                                       <img src="{{AppSubUrl}}/assets/img/avatar_default.png" width="40" height="40">
+                               </span>
                        {{else}}
                                <a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
-                                       {{avatar $.Context .Poster}}
+                                       {{avatar $.Context .Poster 40}}
                                </a>
                        {{end}}
                                <div class="content comment-container">
@@ -38,7 +40,7 @@
                                                        {{else}}
                                                                {{if gt .Poster.ID 0}}
                                                                        <a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
-                                                                               {{avatar $.Context .Poster}}
+                                                                               {{avatar $.Context .Poster 24}}
                                                                        </a>
                                                                {{end}}
                                                                <span class="text grey muted-links">
@@ -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 */}}
-                                       <a class="timeline-avatar{{if or (and (eq .Review.Type 1) (or .Content .Attachments)) (eq .Review.Type 2) (eq .Review.Type 3)}} timeline-avatar-offset{{end}}"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
-                                               {{avatar $.Context .Poster}}
+                                       <a class="timeline-avatar{{if or (and (eq .Review.Type 1) (or .Content .Attachments)) (and (eq .Review.Type 2) (or .Content .Attachments)) (eq .Review.Type 3)}} timeline-avatar-offset{{end}}"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
+                                               {{avatar $.Context .Poster 40}}
                                        </a>
                                        {{end}}
                                        <span class="badge{{if eq .Review.Type 1}} gt-bg-green gt-text-white{{else if eq .Review.Type 3}} gt-bg-red gt-text-white{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
@@ -413,7 +415,7 @@
                                                        <div class="comment-header-left gt-df gt-ac">
                                                                {{if gt .Poster.ID 0}}
                                                                        <a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
-                                                                               {{avatar $.Context .Poster}}
+                                                                               {{avatar $.Context .Poster 24}}
                                                                        </a>
                                                                {{end}}
                                                                <span class="text grey muted-links">
@@ -482,7 +484,7 @@
                                        {{range $filename, $lines := .Review.CodeComments}}
                                                {{range $line, $comms := $lines}}
                                                                <div class="ui segments">
-                                                                       <div class="ui segment gt-py-3 gt-df gt-ac gt-sb">
+                                                                       <div class="ui segment collapsible-comment-box gt-py-3 gt-df gt-ac gt-sb">
                                                                                {{$invalid := (index $comms 0).Invalidated}}
                                                                                {{$resolved := (index $comms 0).IsResolved}}
                                                                                {{$resolveDoer := (index $comms 0).ResolveDoer}}
@@ -541,7 +543,7 @@
                                                                                                                        <div class="comment-header-left gt-df gt-ac">
                                                                                                                                {{if not .OriginalAuthor}}
                                                                                                                                        <a class="avatar">
-                                                                                                                                               {{avatar $.Context .Poster}}
+                                                                                                                                               {{avatar $.Context .Poster 20}}
                                                                                                                                        </a>
                                                                                                                                {{end}}
                                                                                                                                <span class="text grey muted-links">
@@ -768,7 +770,7 @@
                        <div class="timeline-item-group">
                                <div class="timeline-item event" id="{{.HashTag}}">
                                        <a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
-                                               <img src="{{.Poster.AvatarLink $.Context}}">
+                                               <img src="{{.Poster.AvatarLink $.Context}}" width="40" height="40">
                                        </a>
                                        <span class="badge grey">{{svg "octicon-x" 16}}</span>
                                        {{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}}
@@ -789,7 +791,7 @@
                                                        <div class="ui top attached header comment-header-left gt-df gt-ac arrow-top">
                                                                {{if gt .Poster.ID 0}}
                                                                        <a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
-                                                                               {{avatar $.Context .Poster}}
+                                                                               {{avatar $.Context .Poster 24}}
                                                                        </a>
                                                                {{end}}
                                                                <span class="text grey muted-links">

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 907ee1985755dc6b5a249fdcbbc2ecd5246653b1..5325c710b4a86d22b15727232a80c9c17a3a8ef8 100644 (file)
--- 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}}</a>
+       {{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}</a>
        <div class="content">
                {{template "repo/pulls/status" .}}
                {{$showGeneralMergeForm := false}}

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 3b354710817c827223a399a8868fc88da72ef8c3..71d9059c1e18cb10d66360ca6c141f2cd695730f 100644 (file)
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -153,7 +153,7 @@
                                <div class="issue-item-icon-right text grey">
                                        {{range .Assignees}}
                                                <a class="ui assignee gt-tdn" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
-                                                       {{avatar $.Context .}}
+                                                       {{avatar $.Context . 20}}
                                                </a>
                                        {{end}}
                                </div>

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4c8d30c1b4b11cc25b108abd08b9da408f2d0613..ed00b1a2952282be6fb9aef81a23ccb337a8deac 100644 (file)
--- 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 1593c39b7f034da6aef1b824e4e9215a55ac7c17..5a90c0852f68f7c902bcb3768559a2a2217890fd 100644 (file)
--- 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 1b10ba157e3d59581c9356573a818f9ba426be48..eb2dd8a4d960529f0a9f417dfe613e578f0b3030 100644 (file)
--- 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 0d81d651106891df52f1940c0535730db1ebdf38..eafe022cee66eb8a7e969b4ac9a04ce5899bf2be 100644 (file)
--- 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 c214406752cccfe7da30c4dedef0dc8f24f86d8b..db0d4cfbb9ad06fa7f9f4a8f5e02e3e53c05333e 100644 (file)
--- 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;
 }