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>
release/v1.15
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,6 +7,30 @@
{{ $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">
<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 <span class="type-icon text {{if eq .Type 1}}green
{{- else if eq .Type 2}}grey {{- else if eq .Type 2}}grey
{{- else if eq .Type 3}}red {{- else if eq .Type 3}}red
@ -31,27 +55,7 @@
{{end}} {{end}}
{{svg (printf "octicon-%s" .Type.Icon) 16}} {{svg (printf "octicon-%s" .Type.Icon) 16}}
</span> </span>
{{if .Stale}} </div>
<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>
</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 {