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:
silverwind 2020-12-30 00:48:28 +01:00 committed by GitHub
parent cfc3916b3f
commit 8e5aea88c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 19 deletions

View file

@ -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>"

View file

@ -5,5 +5,5 @@
style="color: {{.label.ForegroundColor}}; background-color: {{.label.Color}}"
title="{{.label.Description | RenderEmojiPlain}}"
>
{{.label.Name | RenderEmoji}}
{{.label.Name | RenderEmoji}}
</a>

View file

@ -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}}

View file

@ -176,6 +176,7 @@ body {
overflow-y: auto;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
}
img {

View file

@ -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 {

View file

@ -29,6 +29,10 @@
font-size: 16px;
min-width: 0;
font-weight: 600;
> * {
vertical-align: middle;
}
}
.issue-item-bottom-row {