MirrorHub/forgejo
0
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-07 02:39:31 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve label and text wrapping (#14113)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/templates/helper.go
View file

@ -371,7 +371,7 @@ func NewFuncMap() []template.FuncMap {
"RenderLabels": func(labels []*models.Label) template.HTML { "RenderLabels": func(labels []*models.Label) template.HTML {
html := `<span class="labels-list">` html := `<span class="labels-list">`
for _, label := range labels { 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)) label.ForegroundColor(), label.Color, RenderEmoji(label.Name))
} }
html += "</span>" html += "</span>"

2
templates/repo/issue/labels/label.tmpl
View file

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

6
templates/shared/issuelist.tmpl
View file

@ -30,8 +30,8 @@
</div> </div>
</div> </div>
<div class="issue-item-main f1 fc df"> <div class="issue-item-main f1 fc df">
<div class="issue-item-top-row df ac fw"> <div class="issue-item-top-row">
<a class="title mr-3" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{RenderEmoji .Title}} {{RenderEmoji .Title}}
{{if .IsPull }} {{if .IsPull }}
{{if (index $.CommitStatus .PullRequest.ID)}} {{if (index $.CommitStatus .PullRequest.ID)}}
@ -39,7 +39,7 @@
{{end}} {{end}}
{{end}} {{end}}
</a> </a>
<span class="labels-list"> <span class="labels-list ml-2">
{{range .Labels}} {{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> <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}} {{end}}

1
web_src/less/_base.less
View file

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

16
web_src/less/_repository.less
View file

@ -2620,23 +2620,11 @@
} }
} }
.labels-list {
display: inline-flex;
flex-wrap: wrap;
}
.labels-list .label { .labels-list .label {
margin-top: 1.5px; margin: 2px 0;
margin-bottom: 1.5px;
margin-right: 3px;
margin-left: 0;
display: inline-block !important; display: inline-block !important;
} }
.labels-list .label:last-of-type {
margin-right: 0;
}
tbody.commit-list { tbody.commit-list {
vertical-align: baseline; vertical-align: baseline;
} }
@ -2777,7 +2765,7 @@ tbody.commit-list {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
word-break: break-all; word-break: break-word;
} }
.repo-buttons { .repo-buttons {

4
web_src/less/shared/issuelist.less
View file

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