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
Signed by: GitHub
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 35 deletions

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

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

@ -37,9 +37,11 @@
{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
{{end}}
{{end}}
{{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}}
<span class="labels-list">
{{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}}
</span>
</div>
<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}}">

@ -2856,35 +2856,20 @@
}
}
.labels.list {
display: flex;
.labels-list {
display: inline-flex;
flex-wrap: wrap;
}
.labels.list .item,
.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;
.labels-list .label {
margin-top: 1.5px;
margin-bottom: 1.5px;
}
.labels.list .item,
.timeline-item .label,
.issue-item-top-row .label {
margin-right: 3px;
display: inline !important;
margin-left: 0;
display: inline-block !important;
}
.timeline-item .label:last-of-type,
.issue-item-top-row .label:last-of-type {
.labels-list .label:last-of-type {
margin-right: 0;
}