Mirrors/gitea
0
0 Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-07 23:09:32 +02:00
Code Issues Activity

fix: PR status layout on mobile (#21547)

Browse Source 
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>
This commit is contained in:
kolaenteandLunny Xiao authored and GitHub committed 2022-10-28 09:49:42 -04:00
1 parent 5f0cbb3e80
commit cd5c067abe
2 files changed
+48 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/repo/pulls/status.tmpl
+10 -8
View File
@@ -18,14 +18,16 @@
{{end}} {{end}}
{{range $.LatestCommitStatuses}} {{range $.LatestCommitStatuses}}
<div class="ui attached segment"> <div class="ui attached segment pr-status">
<span>{{template "repo/commit_status" .}}</span> {{template "repo/commit_status" .}}
<span class="ui">{{.Context}} <span class="text grey">{{.Description}}</span></span> <div class="status-context">
<div class="ui right"> <span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
{{if $.is_context_required}} <div class="ui status-details">
{{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}} {{if $.is_context_required}}
{{end}} {{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span> {{end}}
<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
</div>
</div> </div>
</div> </div>
{{end}} {{end}}
web_src/less/_repository.less
+38
View File
@@ -3477,3 +3477,41 @@ td.blob-excerpt {
max-width: 165px; 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
}
}
}