From 8e5aea88c7095014741f753d5eca14f8f3b6fe2f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 30 Dec 2020 00:48:28 +0100
Subject: [PATCH] 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>
---
modules/templates/helper.go | 2 +-
templates/repo/issue/labels/label.tmpl | 2 +-
templates/shared/issuelist.tmpl | 6 +++---
web_src/less/_base.less | 1 +
web_src/less/_repository.less | 16 ++--------------
web_src/less/shared/issuelist.less | 4 ++++
6 files changed, 12 insertions(+), 19 deletions(-)
diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 97d3029839..4e767ad44d 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -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>"
diff --git a/templates/repo/issue/labels/label.tmpl b/templates/repo/issue/labels/label.tmpl
index d76dc6af73..a6d52fe544 100644
--- a/templates/repo/issue/labels/label.tmpl
+++ b/templates/repo/issue/labels/label.tmpl
@@ -5,5 +5,5 @@
style="color: {{.label.ForegroundColor}}; background-color: {{.label.Color}}"
title="{{.label.Description | RenderEmojiPlain}}"
>
- {{.label.Name | RenderEmoji}}
+ {{.label.Name | RenderEmoji}}
</a>
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 131de83f5e..dcaa2474fb 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -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}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 23a289a8f3..9ae13b8c01 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -176,6 +176,7 @@ body {
overflow-y: auto;
display: flex;
flex-direction: column;
+ overflow-wrap: break-word;
}
img {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f0764067f2..f0e180019e 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -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 {
diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
index dec99e135a..b1f688e362 100644
--- a/web_src/less/shared/issuelist.less
+++ b/web_src/less/shared/issuelist.less
@@ -29,6 +29,10 @@
font-size: 16px;
min-width: 0;
font-weight: 600;
+
+ > * {
+ vertical-align: middle;
+ }
}
.issue-item-bottom-row {