Fix issue label rendering (#13570)

* Fix issue label rendering

Prevent rendering of inactive labels and make them wrap inline.

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

* also don't render the placeholder

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2020-11-15 19:11:58 +01:00 committed by GitHub
parent f0ed71251e
commit 50cbb20481
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 10 deletions

View file

@ -73,10 +73,14 @@
<div class="ui labels list">
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
{{range .Labels}}
<a class="{{if not .IsChecked}}hide{{end}} item" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text">{{.Name | RenderEmoji}}</span></a>
{{if .IsChecked}}
<a class="item" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text">{{.Name | RenderEmoji}}</span></a>
{{end}}
{{end}}
{{range .OrgLabels}}
<a class="{{if not .IsChecked}}hide{{end}} item" id="label_{{.ID}}" href="/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text">{{.Name | RenderEmoji}}</span></a>
{{if .IsChecked}}
<a class="item" id="label_{{.ID}}" href="/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text">{{.Name | RenderEmoji}}</span></a>
{{end}}
{{end}}
</div>

View file

@ -126,17 +126,22 @@
</div>
</div>
<div class="ui labels list">
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
{{if not .HasSelectedLabel}}
<span class="no-select item">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
{{end}}
{{range .Labels}}
<div class="item">
<a class="ui label {{if not .IsChecked}}hide{{end}}" id="label_{{.ID}}" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
</div>
{{if .IsChecked}}
<div class="item">
<a class="ui label" id="label_{{.ID}}" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
</div>
{{end}}
{{end}}
{{range .OrgLabels}}
<div class="item">
<a class="ui label {{if not .IsChecked}}hide{{end}}" id="label_{{.ID}}" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
</div>
{{if .IsChecked}}
<div class="item">
<a class="ui label" id="label_{{.ID}}" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
</div>
{{end}}
{{end}}
</div>

View file

@ -2983,6 +2983,20 @@
}
}
.labels.list {
display: flex;
flex-wrap: wrap;
}
.labels.list .item {
padding: 0 !important;
margin-bottom: 2px;
}
.labels.list .item + .item {
margin-left: 2px;
}
tbody.commit-list {
vertical-align: baseline;
}