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:
Cirno the Strongest 2020-06-15 09:37:00 +02:00 committed by GitHub
parent d1c547468a
commit 5f47835f4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 48 deletions

View file

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

View file

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