* 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>tags/v1.15.0-dev
@@ -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 { |