Improve label and text wrapping (#14113)
* Improve label wrapping - Adjust issue list styles so labels can wrap on the same line as the text. This relies on `display: inline` with the HTML whitespace being used as the separator. - Add global word-break: break-word. This should generally avoid text overflows in various places. * add whitespace to history labels * use overflow-wrap * restore word-break rules * use correct pre * use better selector for middle align Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
cfc3916b3f
commit
8e5aea88c7
6 changed files with 12 additions and 19 deletions
|
@ -371,7 +371,7 @@ func NewFuncMap() []template.FuncMap {
|
|||
"RenderLabels": func(labels []*models.Label) template.HTML {
|
||||
html := `<span class="labels-list">`
|
||||
for _, label := range labels {
|
||||
html += fmt.Sprintf("<div class='ui label' style='color: %s; background-color: %s'>%s</div>",
|
||||
html += fmt.Sprintf("<div class='ui label' style='color: %s; background-color: %s'>%s</div> ",
|
||||
label.ForegroundColor(), label.Color, RenderEmoji(label.Name))
|
||||
}
|
||||
html += "</span>"
|
||||
|
|
|
@ -5,5 +5,5 @@
|
|||
style="color: {{.label.ForegroundColor}}; background-color: {{.label.Color}}"
|
||||
title="{{.label.Description | RenderEmojiPlain}}"
|
||||
>
|
||||
{{.label.Name | RenderEmoji}}
|
||||
{{.label.Name | RenderEmoji}}
|
||||
</a>
|
||||
|
|
|
@ -30,8 +30,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="issue-item-main f1 fc df">
|
||||
<div class="issue-item-top-row df ac fw">
|
||||
<a class="title mr-3" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
|
||||
<div class="issue-item-top-row">
|
||||
<a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
|
||||
{{RenderEmoji .Title}}
|
||||
{{if .IsPull }}
|
||||
{{if (index $.CommitStatus .PullRequest.ID)}}
|
||||
|
@ -39,7 +39,7 @@
|
|||
{{end}}
|
||||
{{end}}
|
||||
</a>
|
||||
<span class="labels-list">
|
||||
<span class="labels-list ml-2">
|
||||
{{range .Labels}}
|
||||
<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
|
||||
{{end}}
|
||||
|
|
|
@ -176,6 +176,7 @@ body {
|
|||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
@ -2620,23 +2620,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.labels-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.labels-list .label {
|
||||
margin-top: 1.5px;
|
||||
margin-bottom: 1.5px;
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
margin: 2px 0;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.labels-list .label:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
tbody.commit-list {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
@ -2777,7 +2765,7 @@ tbody.commit-list {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.repo-buttons {
|
||||
|
|
|
@ -29,6 +29,10 @@
|
|||
font-size: 16px;
|
||||
min-width: 0;
|
||||
font-weight: 600;
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.issue-item-bottom-row {
|
||||
|
|
Reference in a new issue