From 5f47835f4cc2d6c2305830cf1052150633d05797 Mon Sep 17 00:00:00 2001
From: Cirno the Strongest <1447794+CirnoT@users.noreply.github.com>
Date: Mon, 15 Jun 2020 09:37:00 +0200
Subject: [PATCH] Better align items using flex within review request box
 (#11879)

* Better align items using flex within review request box

* use justify-content

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
---
 templates/repo/issue/view_content/pull.tmpl | 88 +++++++++++----------
 web_src/less/_repository.less               | 20 +++--
 2 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index c66e7734a6..aacbb0c395 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -7,51 +7,55 @@
 					{{ $createdStr:= TimeSinceUnix .UpdatedUnix $.Lang }}
 					<div class="ui divider"></div>
 					<div class="review-item">
-						<span class="type-icon text {{if eq .Type 1}}green
-							{{- else if eq .Type 2}}grey
-							{{- else if eq .Type 3}}red
-							{{- else if eq .Type 4}}yellow
-							{{else}}grey{{end}}">
-
-							{{$canChoose := false}}
-							{{if eq .Type 4}}
-								{{if or (eq .ReviewerID $.SignedUserID) $.Permission.IsAdmin}}
-									{{$canChoose = true}}
-								{{end}}
-							{{else}}
-								{{if and (or $.IsIssuePoster $.CanChooseReviewer) (not (eq $.SignedUserID .ReviewerID))}}
-									{{$canChoose = true}}
+						<div class="review-item-left">
+							<a class="ui avatar image" href="{{.Reviewer.HomeLink}}">
+								<img src="{{.Reviewer.RelAvatarLink}}">
+							</a>
+							<span class="text grey"><a href="{{.Reviewer.HomeLink}}">{{.Reviewer.Name}}</a>
+								{{if eq .Type 1}}
+									{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
+								{{else if eq .Type 2}}
+									{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
+								{{else if eq .Type 3}}
+									{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
+								{{else if eq .Type 4}}
+									{{$.i18n.Tr "repo.issues.review.wait" $createdStr | Safe}}
+								{{else}}
+									{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
 								{{end}}
+							</span>
+						</div>
+						<div class="review-item-right">
+							{{if .Stale}}
+							<span class="type-icon text grey">
+								<i class="octicon icon fa-hourglass-end"></i>
+							</span>
 							{{end}}
+							<span class="type-icon text {{if eq .Type 1}}green
+								{{- else if eq .Type 2}}grey
+								{{- else if eq .Type 3}}red
+								{{- else if eq .Type 4}}yellow
+								{{else}}grey{{end}}">
 
-							{{if $canChoose }}
-								<a href="#" class="ui poping up icon re-request-review" data-is-checked="{{if  eq .Type 4}}remove{{else}}add{{end}}" data-issue-id="{{$.Issue.ID}}" data-content="{{ if eq .Type 4 }} {{$.i18n.Tr "repo.issues.remove_request_review"}} {{else}} {{$.i18n.Tr "repo.issues.re_request_review"}} {{end}}"  data-id="{{.ReviewerID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
-									{{svg "octicon-sync" 16}}
-								</a>
-							{{end}}
-							{{svg (printf "octicon-%s" .Type.Icon) 16}}
-						</span>
-						{{if .Stale}}
-						<span class="type-icon text grey">
-							<i class="octicon icon fa-hourglass-end"></i>
-						</span>
-						{{end}}
-						<a class="ui avatar image" href="{{.Reviewer.HomeLink}}">
-							<img src="{{.Reviewer.RelAvatarLink}}">
-						</a>
-						<span class="text grey"><a href="{{.Reviewer.HomeLink}}">{{.Reviewer.Name}}</a>
-							{{if eq .Type 1}}
-								{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
-							{{else if eq .Type 2}}
-								{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
-							{{else if eq .Type 3}}
-								{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
-							{{else if eq .Type 4}}
-								{{$.i18n.Tr "repo.issues.review.wait" $createdStr | Safe}}
-							{{else}}
-								{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
-							{{end}}
-						</span>
+								{{$canChoose := false}}
+								{{if eq .Type 4}}
+									{{if or (eq .ReviewerID $.SignedUserID) $.Permission.IsAdmin}}
+										{{$canChoose = true}}
+									{{end}}
+								{{else}}
+									{{if and (or $.IsIssuePoster $.CanChooseReviewer) (not (eq $.SignedUserID .ReviewerID))}}
+										{{$canChoose = true}}
+									{{end}}
+								{{end}}
+
+								{{if $canChoose }}
+									<a href="#" class="ui poping up icon re-request-review" data-is-checked="{{if  eq .Type 4}}remove{{else}}add{{end}}" data-issue-id="{{$.Issue.ID}}" data-content="{{ if eq .Type 4 }} {{$.i18n.Tr "repo.issues.remove_request_review"}} {{else}} {{$.i18n.Tr "repo.issues.re_request_review"}} {{end}}"  data-id="{{.ReviewerID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
+										{{svg "octicon-sync" 16}}
+									</a>
+								{{end}}
+								{{svg (printf "octicon-%s" .Type.Icon) 16}}
+							</span>
+						</div>
 					</div>
 				{{end}}
 			</div>
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 0687347efd..69568c8584 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -657,14 +657,18 @@
             }
 
             .review-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .review-item-left,
+                .review-item-right {
+                    display: flex;
+                    align-items: center;
+                }
 
                 .avatar,
                 .type-icon {
-                    float: none;
-                    display: inline-block;
-                    text-align: center;
-                    vertical-align: middle;
-
                     .svg {
                         width: 23px;
                         height: 23px;
@@ -676,8 +680,12 @@
                 }
 
                 .type-icon {
-                    float: right;
+                    align-self: flex-start;
                     margin-right: 1em;
+
+                    i {
+                        line-height: 1.8em;
+                    }
                 }
 
                 .divider {