Fix label styles affecting shabox (#13734)

* Fix label styles affecting shabox

Add common parent .labels-list to issue labels lists to prevent
affecting other elements.

Fixes: https://github.com/go-gitea/gitea/issues/13704

* Update templates/shared/issuelist.tmpl

* Update templates/shared/issuelist.tmpl

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind 2020-11-29 04:26:03 +01:00 committed by GitHub
parent b2435af9be
commit da4bb6fc4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 35 deletions

View file

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

View file

@ -1,9 +1,11 @@
<div class="ui labels list"> <div class="ui labels list">
<span class="no-select item {{if .ctx.HasSelectedLabel}}hide{{end}}">{{.ctx.i18n.Tr "repo.issues.new.no_label"}}</span> <span class="no-select item {{if .ctx.HasSelectedLabel}}hide{{end}}">{{.ctx.i18n.Tr "repo.issues.new.no_label"}}</span>
<span class="labels-list">
{{range .ctx.Labels}} {{range .ctx.Labels}}
{{template "repo/issue/labels/label" dict "root" $ "label" .}} {{template "repo/issue/labels/label" dict "root" $ "label" .}}
{{end}} {{end}}
{{range .ctx.OrgLabels}} {{range .ctx.OrgLabels}}
{{template "repo/issue/labels/label" dict "root" $ "label" .}} {{template "repo/issue/labels/label" dict "root" $ "label" .}}
{{end}} {{end}}
</span>
</div> </div>

View file

@ -37,9 +37,11 @@
{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}} {{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
{{end}} {{end}}
{{end}} {{end}}
<span class="labels-list">
{{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}}
</span>
</div> </div>
<div class="desc issue-item-bottom-row df ac fw my-1"> <div class="desc issue-item-bottom-row df ac fw my-1">
<a class="index ml-0 mr-2" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="index ml-0 mr-2" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">

View file

@ -2856,35 +2856,20 @@
} }
} }
.labels.list { .labels-list {
display: flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.labels.list .item, .labels-list .label {
.timeline-item .label {
padding: .3em .5em !important;
margin-left: 0;
margin-right: 0;
margin-bottom: 3px;
}
.issue-item-top-row .label {
margin-left: 0;
margin-right: 0;
margin-top: 1.5px; margin-top: 1.5px;
margin-bottom: 1.5px; margin-bottom: 1.5px;
}
.labels.list .item,
.timeline-item .label,
.issue-item-top-row .label {
margin-right: 3px; margin-right: 3px;
display: inline !important; margin-left: 0;
display: inline-block !important;
} }
.timeline-item .label:last-of-type, .labels-list .label:last-of-type {
.issue-item-top-row .label:last-of-type {
margin-right: 0; margin-right: 0;
} }