forked from gitea/gitea
Backport #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: kolaente <k@knt.li> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
93e907de41
commit
265d438a6e
|
@ -18,15 +18,17 @@
|
|||
{{end}}
|
||||
|
||||
{{range $.LatestCommitStatuses}}
|
||||
<div class="ui attached segment">
|
||||
<span>{{template "repo/commit_status" .}}</span>
|
||||
<span class="ui">{{.Context}} <span class="text grey">{{.Description}}</span></span>
|
||||
<div class="ui right">
|
||||
<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}}
|
||||
|
|
|
@ -3494,3 +3494,41 @@ td.blob-excerpt {
|
|||
max-width: 165px;
|
||||
}
|
||||
}
|
||||
|
||||
.pr-status {
|
||||
padding: 0 !important; // To clear fomantic's padding on .ui.segment elements
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.commit-status {
|
||||
margin: 1em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-context {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
> span {
|
||||
padding: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-details {
|
||||
display: flex;
|
||||
padding-right: .5em;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media @mediaSm {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> span {
|
||||
padding-right: .5em; // To match the alignment with the "required" label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue