From 8e035f81c01ba6c1ccf8952ffad37bef063aad2d Mon Sep 17 00:00:00 2001
From: Cirno the Strongest <1447794+CirnoT@users.noreply.github.com>
Date: Wed, 3 Jun 2020 04:40:08 +0200
Subject: [PATCH] Fix styling for commiter on diff view (#11715)

* 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>
---
 options/locale/locale_en-US.ini |  1 +
 templates/repo/commit_page.tmpl | 25 ++++++++++++++-----------
 web_src/less/_repository.less   | 18 ++++++++++++++++++
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index f8548218279..534520d2d2e 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1651,6 +1651,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
diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index 7a91663ec83..7a967ee55e5 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -33,7 +33,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}}
@@ -45,19 +45,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">
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index b387d160796..96e381c163d 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2376,6 +2376,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