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

@@ -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>

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 {