Always use HTML attributes for avatar size (#31509)

silverwind · web-flow · commit e82f3caa6bbf · 2024-06-28T21:29:15.000Z
Many avatars were rendered in HTML with certain width/height but then resized again in CSS. This was pointless so I removed all these cases and made the HTML size match the previous render size. Also did a few CSS cleanups in the tribute rendering: <img width="648" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/cb2fafb3-5e20-46e9-814f-07df20038beb">
diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl
@@ -1,5 +1,5 @@
 <div class="commit-form-wrapper">
-	{{ctx.AvatarUtils.Avatar .SignedUser 48 "commit-avatar"}}
+	{{ctx.AvatarUtils.Avatar .SignedUser 40 "commit-avatar"}}
 	<div class="commit-form">
 		<h3>{{- if .CanCommitToBranch.WillSign}}
 			<span title="{{ctx.Locale.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}">{{svg "octicon-lock" 24}}</span>
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
@@ -58,16 +58,16 @@
 							{{end}}
 						{{end}}
 					</span>
-					<span class="author tw-flex tw-items-center tw-mr-2">
+					<span class="author tw-flex tw-items-center tw-mr-2 tw-gap-[1px]">
 						{{$userName := $commit.Commit.Author.Name}}
 						{{if $commit.User}}
 							{{if and $commit.User.FullName DefaultShowFullName}}
 								{{$userName = $commit.User.FullName}}
 							{{end}}
-							<span class="tw-mr-1">{{ctx.AvatarUtils.Avatar $commit.User}}</span>
+							{{ctx.AvatarUtils.Avatar $commit.User 18}}
 							<a href="{{$commit.User.HomeLink}}">{{$userName}}</a>
 						{{else}}
-							<span class="tw-mr-1">{{ctx.AvatarUtils.AvatarByEmail $commit.Commit.Author.Email $userName}}</span>
+							{{ctx.AvatarUtils.AvatarByEmail $commit.Commit.Author.Email $userName 18}}
 							{{$userName}}
 						{{end}}
 					</span>
diff --git a/templates/repo/shabox_badge.tmpl b/templates/repo/shabox_badge.tmpl
@@ -3,10 +3,10 @@
 		<div title="{{if eq .verification.TrustStatus "trusted"}}{{else if eq .verification.TrustStatus "untrusted"}}{{ctx.Locale.Tr "repo.commits.signed_by_untrusted_user"}}: {{else}}{{ctx.Locale.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}: {{end}}{{.verification.Reason}}">
 		{{if ne .verification.SigningUser.ID 0}}
 			{{svg "gitea-lock"}}
-			{{ctx.AvatarUtils.Avatar .verification.SigningUser 28 "signature"}}
+			{{ctx.AvatarUtils.Avatar .verification.SigningUser 16 "signature"}}
 		{{else}}
 			<span title="{{ctx.Locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
-			{{ctx.AvatarUtils.AvatarByEmail .verification.SigningEmail "" 28 "signature"}}
+			{{ctx.AvatarUtils.AvatarByEmail .verification.SigningEmail "" 16 "signature"}}
 		{{end}}
 		</div>
 	{{else}}
diff --git a/templates/repo/user_cards.tmpl b/templates/repo/user_cards.tmpl
@@ -8,7 +8,7 @@
 		{{range .Cards}}
 			<li class="item ui segment">
 				<a href="{{.HomeLink}}">
-					{{ctx.AvatarUtils.Avatar .}}
+					{{ctx.AvatarUtils.Avatar . 48}}
 				</a>
 				<h3 class="name"><a href="{{.HomeLink}}">{{.DisplayName}}</a></h3>
 
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
@@ -123,12 +123,6 @@
   padding-bottom: 1px;
 }
 
-#git-graph-container #rev-list .author img.ui.avatar {
-  width: auto;
-  height: 18px;
-  max-width: none;
-}
-
 #git-graph-container #graph-raw-list {
   margin: 0;
 }
diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css
@@ -17,7 +17,6 @@
 .tribute-container li span.fullname {
   font-weight: var(--font-weight-normal);
   font-size: 0.8rem;
-  margin-left: 3px;
 }
 
 .tribute-container li.highlight,
@@ -29,14 +28,5 @@
 .tribute-item {
   display: flex;
   align-items: center;
-}
-
-.tribute-item .emoji,
-.tribute-item img[src*="/avatar/"] {
-  margin-right: 0.5rem;
-}
-
-.tribute-container img {
-  width: 1.5rem !important;
-  height: 1.5rem !important;
+  gap: 6px;
 }
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
@@ -50,10 +50,6 @@
   background: none;
 }
 
-.ui.comments .comment .avatar {
-  width: 30px;
-}
-
 .ui.comments .comment > .content {
   display: flex;
   flex-direction: column;
diff --git a/web_src/css/org.css b/web_src/css/org.css
@@ -127,8 +127,6 @@
 }
 
 .page-content.organization .members .ui.avatar {
-  width: 48px;
-  height: 48px;
   margin-right: 5px;
   margin-bottom: 5px;
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -460,14 +460,12 @@ td .commit-summary {
 }
 
 .repository.file.editor .commit-form-wrapper {
-  padding-left: 64px;
+  padding-left: 48px;
 }
 
 .repository.file.editor .commit-form-wrapper .commit-avatar {
   float: left;
-  margin-left: -64px;
-  width: 3em;
-  height: auto;
+  margin-left: -48px;
 }
 
 .repository.file.editor .commit-form-wrapper .commit-form {
@@ -535,10 +533,6 @@ td .commit-summary {
   min-width: 100px;
 }
 
-#new-issue .comment .avatar {
-  width: 3em;
-}
-
 .repository.new.issue .comment.form .content::before,
 .repository.new.issue .comment.form .content::after {
   right: 100%;
@@ -1216,16 +1210,6 @@ td .commit-summary {
   border: 1px solid var(--color-light-border);
 }
 
-.repository #commits-table td.sha .sha.label .ui.signature.avatar,
-.repository #repo-files-table .sha.label .ui.signature.avatar,
-.repository #repo-file-commit-box .sha.label .ui.signature.avatar,
-.repository #rev-list .sha.label .ui.signature.avatar,
-.repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar {
-  height: 16px;
-  margin-bottom: 0;
-  width: 16px;
-}
-
 .repository #commits-table td.sha .sha.label .detail.icon,
 .repository #repo-files-table .sha.label .detail.icon,
 .repository #repo-file-commit-box .sha.label .detail.icon,
@@ -1242,14 +1226,6 @@ td .commit-summary {
   border-bottom-left-radius: 0;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon img,
-.repository #repo-files-table .sha.label .detail.icon img,
-.repository #repo-file-commit-box .sha.label .detail.icon img,
-.repository #rev-list .sha.label .detail.icon img,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img {
-  margin-right: 0;
-}
-
 .repository #commits-table td.sha .sha.label .detail.icon .svg,
 .repository #repo-files-table .sha.label .detail.icon .svg,
 .repository #repo-file-commit-box .sha.label .detail.icon .svg,
@@ -1931,8 +1907,6 @@ td .commit-summary {
 }
 
 .user-cards .list .item .avatar {
-  width: 48px;
-  height: 48px;
   float: left;
   display: block;
   margin-right: 10px;
diff --git a/web_src/js/features/tribute.js b/web_src/js/features/tribute.js
@@ -36,7 +36,7 @@ function makeCollections({mentions, emoji}) {
       menuItemTemplate: (item) => {
         return `
           <div class="tribute-item">
-            <img src="${htmlEscape(item.original.avatar)}" class="tw-mr-2"/>
+            <img src="${htmlEscape(item.original.avatar)}" width="21" height="21"/>
             <span class="name">${htmlEscape(item.original.name)}</span>
             ${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${htmlEscape(item.original.fullname)}</span>` : ''}
           </div>

Original file line number	Diff line number	Diff line change
`@@ -123,12 +123,6 @@`
`123`	`123`	`padding-bottom: 1px;`
`124`	`124`	`}`
`125`	`125`
`126`		`-#git-graph-container #rev-list .author img.ui.avatar {`
`127`		`- width: auto;`
`128`		`- height: 18px;`
`129`		`- max-width: none;`
`130`		`-}`
`131`		`-`
`132`	`126`	`#git-graph-container #graph-raw-list {`
`133`	`127`	`margin: 0;`
`134`	`128`	`}`
Original file line number	Diff line number	Diff line change
`@@ -127,8 +127,6 @@`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`.page-content.organization .members .ui.avatar {`
`130`		`- width: 48px;`
`131`		`- height: 48px;`
`132`	`130`	`margin-right: 5px;`
`133`	`131`	`margin-bottom: 5px;`
`134`	`132`	`}`