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 }} {{ $createdStr:= TimeSinceUnix .UpdatedUnix $.Lang }}
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="review-item"> <div class="review-item">
<span class="type-icon text {{if eq .Type 1}}green <div class="review-item-left">
{{- else if eq .Type 2}}grey <a class="ui avatar image" href="{{.Reviewer.HomeLink}}">
{{- else if eq .Type 3}}red <img src="{{.Reviewer.RelAvatarLink}}">
{{- else if eq .Type 4}}yellow </a>
{{else}}grey{{end}}"> <span class="text grey"><a href="{{.Reviewer.HomeLink}}">{{.Reviewer.Name}}</a>
{{if eq .Type 1}}
{{$canChoose := false}} {{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
{{if eq .Type 4}} {{else if eq .Type 2}}
{{if or (eq .ReviewerID $.SignedUserID) $.Permission.IsAdmin}} {{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
{{$canChoose = true}} {{else if eq .Type 3}}
{{end}} {{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
{{else}} {{else if eq .Type 4}}
{{if and (or $.IsIssuePoster $.CanChooseReviewer) (not (eq $.SignedUserID .ReviewerID))}} {{$.i18n.Tr "repo.issues.review.wait" $createdStr | Safe}}
{{$canChoose = true}} {{else}}
{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
{{end}} {{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}} {{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 }} {{$canChoose := false}}
<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"> {{if eq .Type 4}}
{{svg "octicon-sync" 16}} {{if or (eq .ReviewerID $.SignedUserID) $.Permission.IsAdmin}}
</a> {{$canChoose = true}}
{{end}} {{end}}
{{svg (printf "octicon-%s" .Type.Icon) 16}} {{else}}
</span> {{if and (or $.IsIssuePoster $.CanChooseReviewer) (not (eq $.SignedUserID .ReviewerID))}}
{{if .Stale}} {{$canChoose = true}}
<span class="type-icon text grey"> {{end}}
<i class="octicon icon fa-hourglass-end"></i> {{end}}
</span>
{{end}} {{if $canChoose }}
<a class="ui avatar image" href="{{.Reviewer.HomeLink}}"> <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">
<img src="{{.Reviewer.RelAvatarLink}}"> {{svg "octicon-sync" 16}}
</a> </a>
<span class="text grey"><a href="{{.Reviewer.HomeLink}}">{{.Reviewer.Name}}</a> {{end}}
{{if eq .Type 1}} {{svg (printf "octicon-%s" .Type.Icon) 16}}
{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}} </span>
{{else if eq .Type 2}} </div>
{{$.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>
{{end}} {{end}}
</div> </div>

View file

@ -657,14 +657,18 @@
} }
.review-item { .review-item {
display: flex;
justify-content: space-between;
align-items: center;
.review-item-left,
.review-item-right {
display: flex;
align-items: center;
}
.avatar, .avatar,
.type-icon { .type-icon {
float: none;
display: inline-block;
text-align: center;
vertical-align: middle;
.svg { .svg {
width: 23px; width: 23px;
height: 23px; height: 23px;
@ -676,8 +680,12 @@
} }
.type-icon { .type-icon {
float: right; align-self: flex-start;
margin-right: 1em; margin-right: 1em;
i {
line-height: 1.8em;
}
} }
.divider { .divider {