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>
This commit is contained in:
		
							parent
							
								
									d1c547468a
								
							
						
					
					
						commit
						5f47835f4c
					
				
					 2 changed files with 60 additions and 48 deletions
				
			
		|  | @ -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> | ||||
|  |  | |||
|  | @ -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 { | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue