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>

diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 9540716e544e62b6e75166477ef46a9d80c7ebee..e585fc735955805d11d175dd17a2d4c5a5597b29 100644 (file)
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -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>
 

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 55884f3fa1a4fa128155edfff7c4ef83f83be687..21c7a9d36522ca2955fd492486c6df7991e3c11f 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -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>
 

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index de80004892d8f8e74e3f33eb87b40d43efb1e813..662a057715cac75bf4600aea3435995dc2074686 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -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;
 }