Fix styling for commiter on diff view (#11715) (#11744)

* Fix styling for commiter on diff view

* Update options/locale/locale_en-US.ini

* Update templates/repo/commit_page.tmpl

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

* Update templates/repo/commit_page.tmpl

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

* Apply suggestions from code review

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

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
(cherry picked from commit 8e035f81c0)

options/locale/locale_en-US.ini

@@ -1647,6 +1647,7 @@ diff.review.placeholder = Review comment
 diff.review.comment = Comment
 diff.review.approve = Approve
 diff.review.reject = Request changes
+diff.committed_by = committed by
 
 releases.desc = Track project versions and downloads.
 release.releases = Releases

templates/repo/commit_page.tmpl

@@ -31,7 +31,7 @@
 		</div>
 		<div class="ui attached info segment {{$class}}">
 			<div class="ui stackable grid">
-				<div class="ten wide column">
+				<div class="nine wide column">
 					{{if .Author}}
 						<img class="ui avatar image" src="{{.Author.RelAvatarLink}}" />
 					{{if .Author.FullName}}
@@ -43,19 +43,22 @@
 						<img class="ui avatar image" src="{{AvatarLink .Commit.Author.Email}}" />
 						<strong>{{.Commit.Author.Name}}</strong>
 					{{end}}
+					<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
 					{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
-						<span> </span>
-						{{if ne .Verification.CommittingUser.ID 0}}
-							<img class="ui avatar image" src="{{.Verification.CommittingUser.RelAvatarLink}}" />
-							<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong> &lt;{{.Commit.Committer.Email}}&gt;</a>
-						{{else}}
-							<img class="ui avatar image" src="{{AvatarLink .Commit.Committer.Email}}" />
-							<strong>{{.Commit.Committer.Name}}</strong>
-						{{end}}
+						<div class="committed-by">
+							<span class="text grey">{{svg "octicon-git-commit" 16}}{{.i18n.Tr "repo.diff.committed_by"}}</span>
+							{{if ne .Verification.CommittingUser.ID 0}}
+								<img class="ui avatar image" src="{{.Verification.CommittingUser.RelAvatarLink}}" />
+								<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong> &lt;{{.Commit.Committer.Email}}&gt;</a>
+							{{else}}
+								<img class="ui avatar image" src="{{AvatarLink .Commit.Committer.Email}}" />
+								<strong>{{.Commit.Committer.Name}}</strong>
+							{{end}}
+						</div>
 					{{end}}
-					<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
+
 				</div>
-				<div class="six wide right aligned column">
+				<div class="seven wide right aligned column">
 					<div class="ui horizontal list">
 						{{if .Parents}}
 							<div class="item">

web_src/less/_repository.less

@@ -2293,6 +2293,24 @@
             }
         }
     }
+
+    &.diff .committed-by {
+        padding-top: .5rem;
+
+        .ui.avatar {
+            width: 20px;
+            height: 20px;
+        }
+
+        span {
+            margin-right: .25rem;
+
+            svg {
+                vertical-align: text-bottom;
+                margin-right: 2px;
+            }
+        }
+    }
 }
 
 // End of .repository