1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-23 12:59:11 -05:00
forgejo/templates/repo/pulls/status.tmpl
kolaente cd5c067abe
fix: PR status layout on mobile (#21547)
This PR fixes the layout of PR status layouts on mobile. For longer
status context names or on very small screens the text would overflow
and push the "Details" and "Required" badges out of the container.

Before:

![Screen Shot 2022-10-22 at 12 27
46](https://user-images.githubusercontent.com/13721712/197335454-e4decf09-4778-43e8-be88-9188fabbec23.png)

After:

![Screen Shot 2022-10-22 at 12 53
24](https://user-images.githubusercontent.com/13721712/197335449-2c731a6c-7fd6-4b97-be0e-704a99fd3d32.png)

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2022-10-28 09:49:42 -04:00

34 lines
1.3 KiB
Handlebars

{{if $.LatestCommitStatus}}
{{if not $.Issue.PullRequest.HasMerged}}
<div class="ui top attached header">
{{if eq .LatestCommitStatus.State "pending"}}
{{$.locale.Tr "repo.pulls.status_checking"}}
{{else if eq .LatestCommitStatus.State "success"}}
{{$.locale.Tr "repo.pulls.status_checks_success"}}
{{else if eq .LatestCommitStatus.State "warning"}}
{{$.locale.Tr "repo.pulls.status_checks_warning"}}
{{else if eq .LatestCommitStatus.State "failure"}}
{{$.locale.Tr "repo.pulls.status_checks_failure"}}
{{else if eq .LatestCommitStatus.State "error"}}
{{$.locale.Tr "repo.pulls.status_checks_error"}}
{{else}}
{{$.locale.Tr "repo.pulls.status_checking"}}
{{end}}
</div>
{{end}}
{{range $.LatestCommitStatuses}}
<div class="ui attached segment pr-status">
{{template "repo/commit_status" .}}
<div class="status-context">
<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
<div class="ui status-details">
{{if $.is_context_required}}
{{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
{{end}}
<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
</div>
</div>
</div>
{{end}}
{{end}}