From 64bf9160891850331273e1d6ac62d0edfdc88db4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 24 Jun 2025 19:51:18 +0200 Subject: [PATCH 01/31] Unify gap in issue sidebar labels-list --- templates/repo/issue/sidebar/label_list.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl index ed514f6725c8c..44095a20a6755 100644 --- a/templates/repo/issue/sidebar/label_list.tmpl +++ b/templates/repo/issue/sidebar/label_list.tmpl @@ -43,7 +43,7 @@ -
+
{{ctx.Locale.Tr "repo.issues.new.no_label"}} {{range $data.AllLabels}} {{if .IsChecked}} From dff919f72f43cc342f1ddbda6f30af8e3d6f5d2f Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 07:39:03 +0200 Subject: [PATCH 02/31] enhancements --- templates/repo/issue/sidebar/label_list.tmpl | 2 +- templates/shared/issuelist.tmpl | 2 +- web_src/css/repo.css | 19 +++++++++++++++---- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl index 44095a20a6755..24ab7ac30a825 100644 --- a/templates/repo/issue/sidebar/label_list.tmpl +++ b/templates/repo/issue/sidebar/label_list.tmpl @@ -43,7 +43,7 @@
-
+
{{ctx.Locale.Tr "repo.issues.new.no_label"}} {{range $data.AllLabels}} {{if .IsChecked}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 30670c3b0fc74..d1aa24e4bac4f 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -19,7 +19,7 @@ {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}} {{end}} {{end}} - + {{range .Labels}} {{ctx.RenderUtils.RenderLabel .}} {{end}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 1a05b68dd4ec2..192f5f02ecfa5 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1545,10 +1545,21 @@ td .commit-summary { } .labels-list { - display: inline-flex; - flex-wrap: wrap; - gap: 2.5px; - align-items: center; + display: contents; /* enable the list to break across multiple lines */ + line-height: 16px; +} + +.labels-list > * { + margin-right: .25rem; + margin-bottom: .25rem; +} + +.labels-list > :last-child { + margin-right: 0; +} + +#issue-list .labels-list > * { + margin: 0; } .labels-list .label, .scope-parent > .label { From 41f37c1ec978f4a43ec0b8c6495987e6629a34f2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 07:43:01 +0200 Subject: [PATCH 03/31] add comment --- web_src/css/repo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 192f5f02ecfa5..0ca96c4b8c645 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1559,7 +1559,7 @@ td .commit-summary { } #issue-list .labels-list > * { - margin: 0; + margin: 0; /* gap from `.flex-item .flex-item-title` is in effect */ } .labels-list .label, .scope-parent > .label { From b616c25a8fb8ff43bad9930c4a5d2a75f7cc7ae3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 07:57:58 +0200 Subject: [PATCH 04/31] fix bug --- web_src/css/repo/issue-card.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 27f3c2d554e60..d5f77a4e958cd 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -28,8 +28,7 @@ .issue-card-bottom { display: flex; width: 100%; - justify-content: space-between; - gap: 0.25em; + flex-wrap: wrap; } .issue-card-assignees { @@ -37,5 +36,5 @@ align-items: center; gap: 0.25em; justify-content: end; - flex-wrap: wrap; + margin-left: auto; } From 5c3e8ba2d82a9819960506c31a09474fda17e312 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 25 Jun 2025 16:17:36 +0800 Subject: [PATCH 05/31] fix --- templates/repo/issue/card.tmpl | 1 + templates/repo/issue/sidebar/label_list.tmpl | 2 +- web_src/css/repo.css | 23 +++++++------------- web_src/css/repo/issue-card.css | 1 + 4 files changed, 11 insertions(+), 16 deletions(-) diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index 9a8341dccaf88..d8e3a8dc9fce8 100644 --- a/templates/repo/issue/card.tmpl +++ b/templates/repo/issue/card.tmpl @@ -68,6 +68,7 @@ {{ctx.RenderUtils.RenderLabel .}} {{end}}
+
{{range .Assignees}} {{ctx.AvatarUtils.Avatar . 28}} diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl index 24ab7ac30a825..15c8760d1a208 100644 --- a/templates/repo/issue/sidebar/label_list.tmpl +++ b/templates/repo/issue/sidebar/label_list.tmpl @@ -43,7 +43,7 @@
-
+
{{ctx.Locale.Tr "repo.issues.new.no_label"}} {{range $data.AllLabels}} {{if .IsChecked}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0ca96c4b8c645..165e90204375c 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -77,6 +77,13 @@ visibility: hidden; } +.issue-sidebar-combo > .ui.list.labels-list { + display: flex; + flex-wrap: wrap; + overflow: hidden; + gap: 0.25em; +} + @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { @@ -1545,21 +1552,7 @@ td .commit-summary { } .labels-list { - display: contents; /* enable the list to break across multiple lines */ - line-height: 16px; -} - -.labels-list > * { - margin-right: .25rem; - margin-bottom: .25rem; -} - -.labels-list > :last-child { - margin-right: 0; -} - -#issue-list .labels-list > * { - margin: 0; /* gap from `.flex-item .flex-item-title` is in effect */ + display: contents; /* let parent to layout, recommended to use flex gap */ } .labels-list .label, .scope-parent > .label { diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index d5f77a4e958cd..ee5fc3e8c3b75 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -29,6 +29,7 @@ display: flex; width: 100%; flex-wrap: wrap; + gap: 0.25em; } .issue-card-assignees { From e470d00068ae5a96695452c0fbed49e8479dbef6 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 25 Jun 2025 17:08:29 +0800 Subject: [PATCH 06/31] unify issue content right lists --- templates/repo/issue/sidebar/assignee_list.tmpl | 2 +- templates/repo/issue/sidebar/reviewer_list.tmpl | 2 +- web_src/css/repo.css | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/templates/repo/issue/sidebar/assignee_list.tmpl b/templates/repo/issue/sidebar/assignee_list.tmpl index 95105dd184236..1d2279a45d39f 100644 --- a/templates/repo/issue/sidebar/assignee_list.tmpl +++ b/templates/repo/issue/sidebar/assignee_list.tmpl @@ -27,7 +27,7 @@
-
+
{{ctx.Locale.Tr "repo.issues.new.no_assignees"}} {{range $issueAssignees}} diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl index 9cb11ec7eeae5..2b5ca80fe7a7d 100644 --- a/templates/repo/issue/sidebar/reviewer_list.tmpl +++ b/templates/repo/issue/sidebar/reviewer_list.tmpl @@ -43,7 +43,7 @@
-
+
{{ctx.Locale.Tr "repo.issues.new.no_reviewers"}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 165e90204375c..6c9628e98fe69 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -73,6 +73,10 @@ overflow: hidden; } +.issue-content-right .ui.list { + margin: 0.5em 0; +} + .issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark { visibility: hidden; } From d9c97d9bfb8b6befccfa512e2b6be97a500d1674 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 25 Jun 2025 17:45:17 +0800 Subject: [PATCH 07/31] adjust card avatar size --- templates/repo/issue/card.tmpl | 2 +- web_src/css/repo/issue-card.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index d8e3a8dc9fce8..69b5533eb5398 100644 --- a/templates/repo/issue/card.tmpl +++ b/templates/repo/issue/card.tmpl @@ -71,7 +71,7 @@
{{range .Assignees}} - {{ctx.AvatarUtils.Avatar . 28}} + {{ctx.AvatarUtils.Avatar . 24}} {{end}}
diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index ee5fc3e8c3b75..658c0b20afddb 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -29,7 +29,8 @@ display: flex; width: 100%; flex-wrap: wrap; - gap: 0.25em; + gap: 0.5em 0.25em; + align-items: center; } .issue-card-assignees { From 039cdfe774530aa8df2b893af825c1b03b8f6b8c Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 17:55:33 +0200 Subject: [PATCH 08/31] fix issues --- templates/repo/issue/card.tmpl | 1 - web_src/css/repo.css | 27 +++++++++++++++++---------- web_src/css/repo/issue-card.css | 4 +--- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index 69b5533eb5398..8dc14a5f0a1b4 100644 --- a/templates/repo/issue/card.tmpl +++ b/templates/repo/issue/card.tmpl @@ -68,7 +68,6 @@ {{ctx.RenderUtils.RenderLabel .}} {{end}}
-
{{range .Assignees}} {{ctx.AvatarUtils.Avatar . 24}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 6c9628e98fe69..6e277c2da0774 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -81,13 +81,6 @@ visibility: hidden; } -.issue-sidebar-combo > .ui.list.labels-list { - display: flex; - flex-wrap: wrap; - overflow: hidden; - gap: 0.25em; -} - @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { @@ -1556,13 +1549,27 @@ td .commit-summary { } .labels-list { - display: contents; /* let parent to layout, recommended to use flex gap */ + display: inline-flex; + flex-wrap: wrap; + overflow: hidden; + gap: 0.25rem; + line-height: 1; +} + +/* To let labels break up and wrap across multiple line, we use display: contents here. The parent + element (.flex-item .flex-item-title) must have 0.25rem gap for consistent label gap. */ +.flex-list .labels-list { + display: contents; +} + +.issue-content-right .labels-list { + max-width: 100%; } -.labels-list .label, .scope-parent > .label { +.labels-list .label, +.scope-parent > .label { padding: 0 6px; min-height: 20px; - line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */ } /* Scoped labels with different colors on left and right */ diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 658c0b20afddb..9a0ece4946e32 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -28,9 +28,7 @@ .issue-card-bottom { display: flex; width: 100%; - flex-wrap: wrap; - gap: 0.5em 0.25em; - align-items: center; + gap: 0.25em; } .issue-card-assignees { From 3bd9cbd08fdd50f5c599231fe335c95cbb67617f Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 17:57:20 +0200 Subject: [PATCH 09/31] cleanup --- web_src/css/repo.css | 5 +---- web_src/css/repo/issue-card.css | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 6e277c2da0774..99bc1cda18b17 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -75,6 +75,7 @@ .issue-content-right .ui.list { margin: 0.5em 0; + max-width: 100%; } .issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark { @@ -1562,10 +1563,6 @@ td .commit-summary { display: contents; } -.issue-content-right .labels-list { - max-width: 100%; -} - .labels-list .label, .scope-parent > .label { padding: 0 6px; diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 9a0ece4946e32..07ac104e9e3b3 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -28,6 +28,7 @@ .issue-card-bottom { display: flex; width: 100%; + justify-content: space-between; gap: 0.25em; } @@ -36,5 +37,4 @@ align-items: center; gap: 0.25em; justify-content: end; - margin-left: auto; } From a2a60c6450a7fe9a02a16d1644d4e80e765455f6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 18:06:18 +0200 Subject: [PATCH 10/31] update comment --- web_src/css/repo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 99bc1cda18b17..42e111b9c47e1 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1557,8 +1557,8 @@ td .commit-summary { line-height: 1; } -/* To let labels break up and wrap across multiple line, we use display: contents here. The parent - element (.flex-item .flex-item-title) must have 0.25rem gap for consistent label gap. */ +/* To let labels break up and wrap across multiple lines, we use display: contents here. The parent + element (.flex-item-title) must have 0.25rem gap for consistent label gap. */ .flex-list .labels-list { display: contents; } From d7b255a8e5cc928baf100d75075d9678b027e718 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 18:07:26 +0200 Subject: [PATCH 11/31] restore flex-wrap --- web_src/css/repo/issue-card.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 07ac104e9e3b3..27f3c2d554e60 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -37,4 +37,5 @@ align-items: center; gap: 0.25em; justify-content: end; + flex-wrap: wrap; } From 53941195fbe26d235e79d8d5b7d2ba22d7132cfd Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 18:39:14 +0200 Subject: [PATCH 12/31] use contain:paint instead of overflow:hidden, remove line-height --- web_src/css/repo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 42e111b9c47e1..521c315582484 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1552,9 +1552,9 @@ td .commit-summary { .labels-list { display: inline-flex; flex-wrap: wrap; - overflow: hidden; gap: 0.25rem; - line-height: 1; + align-content: center; + contain: paint; } /* To let labels break up and wrap across multiple lines, we use display: contents here. The parent From 5a4841ab42b2060f94505e5b1a30e09021f1515c Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 25 Jun 2025 18:42:48 +0200 Subject: [PATCH 13/31] use different vertical gap --- web_src/css/repo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 521c315582484..2b6a6f82b9d23 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1552,7 +1552,7 @@ td .commit-summary { .labels-list { display: inline-flex; flex-wrap: wrap; - gap: 0.25rem; + gap: 2px 0.25rem; /* 2px to make vertical gap look equal */ align-content: center; contain: paint; } From 46a6987d63454883eb45940e710c16e4adb31931 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 09:24:56 +0800 Subject: [PATCH 14/31] fix alignment and ellipsis --- modules/templates/util_render.go | 2 +- templates/repo/issue/card.tmpl | 4 +++- web_src/css/base.css | 2 ++ web_src/css/modules/label.css | 4 ++-- web_src/css/repo.css | 24 ++++++++++++++---------- 5 files changed, 22 insertions(+), 14 deletions(-) diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go index 14655a53c3c5c..8a9bd2a8befe2 100644 --- a/modules/templates/util_render.go +++ b/modules/templates/util_render.go @@ -137,7 +137,7 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML { if labelScope == "" { // Regular label - return htmlutil.HTMLFormat(`
%s
`, + return htmlutil.HTMLFormat(`
%s
`, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name)) } diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index 8dc14a5f0a1b4..592d5e8cb5606 100644 --- a/templates/repo/issue/card.tmpl +++ b/templates/repo/issue/card.tmpl @@ -63,10 +63,12 @@ {{if or .Labels .Assignees}}
-
+
+
{{range .Labels}} {{ctx.RenderUtils.RenderLabel .}} {{end}} +
{{range .Assignees}} diff --git a/web_src/css/base.css b/web_src/css/base.css index dc58fb850a134..ce1d09c744d0a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -34,6 +34,8 @@ /* z-index */ --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */ --z-index-toast: 1002; /* should be larger than modal */ + + --font-size-label: 14px; } @media (min-width: 768px) and (max-width: 1200px) { diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 1e42668aa1a2c..b52354ba7409b 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -6,12 +6,12 @@ align-items: center; gap: .25rem; min-width: 0; - vertical-align: middle; + max-width: 100%; line-height: 1; background: var(--color-label-bg); color: var(--color-label-text); padding: 0.3em 0.5em; - font-size: 0.85714286rem; + font-size: var(--font-size-label); font-weight: var(--font-weight-medium); border: 0 solid transparent; border-radius: 0.28571429rem; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 2b6a6f82b9d23..d3efe94d974fa 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -82,6 +82,17 @@ visibility: hidden; } +.issue-content-right .ui.list.labels-list { + display: flex; + gap: 0.25em; + flex-wrap: wrap; +} + +.issue-content-right .ui.list.labels-list .item { + display: inline-flex; + min-width: 0; +} + @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { @@ -1549,18 +1560,11 @@ td .commit-summary { border-bottom-right-radius: 4px; } +/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout. +If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */ .labels-list { - display: inline-flex; - flex-wrap: wrap; - gap: 2px 0.25rem; /* 2px to make vertical gap look equal */ - align-content: center; - contain: paint; -} - -/* To let labels break up and wrap across multiple lines, we use display: contents here. The parent - element (.flex-item-title) must have 0.25rem gap for consistent label gap. */ -.flex-list .labels-list { display: contents; + font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */ } .labels-list .label, From f74c64330285691a553dba4f8d324f98fa7665ff Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 09:59:38 +0800 Subject: [PATCH 15/31] fine tune --- web_src/css/repo.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index d3efe94d974fa..46e4014eb1cd1 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -88,11 +88,6 @@ flex-wrap: wrap; } -.issue-content-right .ui.list.labels-list .item { - display: inline-flex; - min-width: 0; -} - @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { @@ -1567,6 +1562,10 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */ } +.labels-list a { + max-width: 100%; /* for ellipsis */ +} + .labels-list .label, .scope-parent > .label { padding: 0 6px; From a7ddce1b10bbb75cbd5a2fba8f2c54deedd2835a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 10:15:56 +0800 Subject: [PATCH 16/31] fix card --- templates/repo/issue/card.tmpl | 8 ++++---- web_src/css/repo/issue-card.css | 9 ++++++--- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index 592d5e8cb5606..50900b1c6f390 100644 --- a/templates/repo/issue/card.tmpl +++ b/templates/repo/issue/card.tmpl @@ -63,18 +63,18 @@ {{if or .Labels .Assignees}}
-
-
+
{{range .Labels}} {{ctx.RenderUtils.RenderLabel .}} {{end}} -
-
+ {{if .Assignees}} +
{{range .Assignees}} {{ctx.AvatarUtils.Avatar . 24}} {{end}}
+ {{end}}
{{end}} {{end}} diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 27f3c2d554e60..327919b1fe697 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -29,13 +29,16 @@ display: flex; width: 100%; justify-content: space-between; - gap: 0.25em; + gap: 1em; } -.issue-card-assignees { +.issue-card-bottom-part { display: flex; + flex: 1; align-items: center; gap: 0.25em; - justify-content: end; flex-wrap: wrap; + overflow: hidden; + max-width: fit-content; + max-height: fit-content; } From 1466310b4bc0dbbcb39930605ddeb00d7a06aabd Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 10:41:00 +0800 Subject: [PATCH 17/31] fix comment label list --- templates/repo/issue/view_content/comments.tmpl | 2 +- web_src/css/modules/label.css | 7 ------- web_src/css/repo.css | 4 ++++ 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 6f61d88d3bfea..45cfc4d17444f 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -169,7 +169,7 @@
{{else if eq .Type 7}} {{if or .AddedLabels .RemovedLabels}} -
+
{{svg "octicon-tag"}} {{template "shared/user/avatarlink" dict "user" .Poster}} diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index b52354ba7409b..cc5189a960c10 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -18,13 +18,6 @@ white-space: nowrap; } -.ui.label:first-child { - margin-left: 0; -} -.ui.label:last-child { - margin-right: 0; -} - a.ui.label { cursor: pointer; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 46e4014eb1cd1..4005f7a515e68 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -629,6 +629,10 @@ td .commit-summary { border: 1px solid var(--color-light-border); } +.repository.view.issue .comment-list .timeline-item.with-labels-list .ui.label { + margin: 0 2px; +} + @media (max-width: 767.98px) { .repository.view.issue .comment-list .timeline-item .ui.segments { margin-left: -2rem; From b890ad0e5ed7d8c69087c6cd7b5773b2d775eb3c Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 11:05:22 +0800 Subject: [PATCH 18/31] fix labels list page --- templates/repo/issue/labels/label_list.tmpl | 6 ++---- web_src/css/modules/label.css | 2 ++ web_src/css/repo/issue-label.css | 24 ++++++++++++--------- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl index cc231971e05e3..c8a6b46cc459a 100644 --- a/templates/repo/issue/labels/label_list.tmpl +++ b/templates/repo/issue/labels/label_list.tmpl @@ -26,7 +26,7 @@
{{end}} -
-
+
{{template "repo/issue/labels/label_archived" .}} -
{{if $canEditLabel}} {{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}} {{end}} -
{{end}} diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index cc5189a960c10..6cd4eb81cc982 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -16,6 +16,8 @@ border: 0 solid transparent; border-radius: 0.28571429rem; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } a.ui.label { diff --git a/web_src/css/repo/issue-label.css b/web_src/css/repo/issue-label.css index 0a25d31da9e05..8e19cfb079101 100644 --- a/web_src/css/repo/issue-label.css +++ b/web_src/css/repo/issue-label.css @@ -4,41 +4,45 @@ margin: 0; } -.issue-label-list .item { +.issue-label-list > .item { border-bottom: 1px solid var(--color-secondary); display: flex; padding: 1em 0; margin: 0; } -.issue-label-list .item:first-child { +.issue-label-list > .item:first-child { padding-top: 0; } -.issue-label-list .item:last-child { +.issue-label-list > .item:last-child { border-bottom: none; padding-bottom: 0; } -.issue-label-list .item .label-title { +.issue-label-list > .item .label-title { width: 33%; + padding-right: 1em; } -.issue-label-list .item .label-issues { +.issue-label-list > .item .label-issues { width: 33%; + padding-right: 1em; } -.issue-label-list .item .label-operation { +.issue-label-list > .item .label-operation { width: 33%; + display: flex; + flex-wrap: wrap; + gap: 0.5em; + justify-content: end; } -.issue-label-list .item a { +.issue-label-list > .item .label-operation a { font-size: 12px; - padding-right: 10px; - color: var(--color-text-light); } -.issue-label-list .item.org-label { +.issue-label-list > .item.org-label { opacity: 0.7; } From ef76480fbffe172c49ab43650227bb64aefd0c22 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 11:15:14 +0800 Subject: [PATCH 19/31] add comment --- templates/repo/issue/card.tmpl | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index 50900b1c6f390..5638f9aa293dc 100644 --- a/templates/repo/issue/card.tmpl +++ b/templates/repo/issue/card.tmpl @@ -63,6 +63,7 @@ {{if or .Labels .Assignees}}
+ {{/* the labels container must always be present, to help the assignees list right-aligned */}}
{{range .Labels}} {{ctx.RenderUtils.RenderLabel .}} From f8836e2dddb887b339f3a6386d95bfc95f9c7e34 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 11:32:58 +0800 Subject: [PATCH 20/31] fine tune --- web_src/css/modules/label.css | 3 +-- web_src/css/repo.css | 7 ++++--- web_src/css/repo/issue-label.css | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 6cd4eb81cc982..d861758a01aba 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -7,10 +7,9 @@ gap: .25rem; min-width: 0; max-width: 100%; - line-height: 1; background: var(--color-label-bg); color: var(--color-label-text); - padding: 0.3em 0.5em; + padding: 2px 6px; font-size: var(--font-size-label); font-weight: var(--font-weight-medium); border: 0 solid transparent; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4005f7a515e68..15814a5e89d5c 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -631,6 +631,7 @@ td .commit-summary { .repository.view.issue .comment-list .timeline-item.with-labels-list .ui.label { margin: 0 2px; + line-height: var(--line-height-default); } @media (max-width: 767.98px) { @@ -1570,10 +1571,10 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. max-width: 100%; /* for ellipsis */ } -.labels-list .label, -.scope-parent > .label { - padding: 0 6px; +.labels-list .ui.label { min-height: 20px; + padding-top: 0; + padding-bottom: 0; } /* Scoped labels with different colors on left and right */ diff --git a/web_src/css/repo/issue-label.css b/web_src/css/repo/issue-label.css index 8e19cfb079101..f75c73b50f0eb 100644 --- a/web_src/css/repo/issue-label.css +++ b/web_src/css/repo/issue-label.css @@ -36,6 +36,7 @@ flex-wrap: wrap; gap: 0.5em; justify-content: end; + align-items: center; } .issue-label-list > .item .label-operation a { From 16b5f3e5b528abc7db9f6d093694396b07541ad2 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 11:58:31 +0800 Subject: [PATCH 21/31] align issue list checkbox --- templates/repo/home_sidebar_bottom.tmpl | 4 ++-- templates/shared/issuelist.tmpl | 15 +++++++++------ web_src/css/shared/flex-list.css | 8 -------- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/templates/repo/home_sidebar_bottom.tmpl b/templates/repo/home_sidebar_bottom.tmpl index f66faf6d10f76..01e630ccbfb2a 100644 --- a/templates/repo/home_sidebar_bottom.tmpl +++ b/templates/repo/home_sidebar_bottom.tmpl @@ -10,8 +10,8 @@
-
- {{svg "octicon-tag" 16}} +
+
{{svg "octicon-tag" 16}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index d1aa24e4bac4f..b25bcc14b940e 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -3,11 +3,14 @@ {{range .Issues}}
-
- {{if $.CanWriteIssuesOrPulls}} - - {{end}} - {{template "shared/issueicon" .}} +
+ {{/* using some tw helpers is the only way to align the checkbox */}} +
+ {{if $.CanWriteIssuesOrPulls}} + + {{end}} + {{template "shared/issueicon" .}} +
@@ -32,7 +35,7 @@
{{end}}
-
+
{{if eq $.listType "dashboard"}} {{.Repo.FullName}}#{{.Index}} diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index 0f54779252292..ede1e7d6de900 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -33,14 +33,6 @@ color: var(--color-primary) !important; } -.flex-item .flex-item-icon { - align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */ -} - -.flex-item .flex-item-icon + .flex-item-main { - align-self: baseline; -} - .flex-item .flex-item-trailing { display: flex; gap: 0.5rem; From 7f2be67a7263ccbbdd71f007f9995b406683283f Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 13:52:05 +0800 Subject: [PATCH 22/31] fix labels --- templates/repo/issue/view_content/comments.tmpl | 2 +- web_src/css/base.css | 2 +- web_src/css/repo.css | 14 +++++++++----- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 45cfc4d17444f..50b8f58fc330a 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -169,7 +169,7 @@
{{else if eq .Type 7}} {{if or .AddedLabels .RemovedLabels}} -
+
{{svg "octicon-tag"}} {{template "shared/user/avatarlink" dict "user" .Poster}} diff --git a/web_src/css/base.css b/web_src/css/base.css index ce1d09c744d0a..4473a3205ce95 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -35,7 +35,7 @@ --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */ --z-index-toast: 1002; /* should be larger than modal */ - --font-size-label: 14px; + --font-size-label: 12px; } @media (min-width: 768px) and (max-width: 1200px) { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 15814a5e89d5c..9d6ced292b5b5 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -629,11 +629,6 @@ td .commit-summary { border: 1px solid var(--color-light-border); } -.repository.view.issue .comment-list .timeline-item.with-labels-list .ui.label { - margin: 0 2px; - line-height: var(--line-height-default); -} - @media (max-width: 767.98px) { .repository.view.issue .comment-list .timeline-item .ui.segments { margin-left: -2rem; @@ -1577,6 +1572,15 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. padding-bottom: 0; } +.with-labels-list-inline .labels-list a > .ui.label { + margin-left: 0.25em; +} + +.with-labels-list-inline .labels-list .ui.label { + line-height: var(--line-height-default); +} + + /* Scoped labels with different colors on left and right */ .ui.label.scope-parent { background: none !important; From b918300a93dcad92373f6095e70966488830e5f5 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 13:58:04 +0800 Subject: [PATCH 23/31] fix label margin --- web_src/css/repo.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 9d6ced292b5b5..cc6ba3b96fc87 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1572,7 +1572,8 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. padding-bottom: 0; } -.with-labels-list-inline .labels-list a > .ui.label { +.with-labels-list-inline .labels-list .ui.label + .ui.label, +.with-labels-list-inline .labels-list a + a { margin-left: 0.25em; } @@ -1588,6 +1589,10 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. gap: 0 !important; } +.ui.label.scope-parent > .ui.label { + margin: 0 !important; /* scoped label's margin is handled by the parent */ +} + .archived-label { filter: grayscale(0.5); opacity: 0.5; @@ -1596,19 +1601,16 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. .ui.label.scope-left { border-bottom-right-radius: 0; border-top-right-radius: 0; - margin-right: 0; } .ui.label.scope-middle { border-radius: 0; margin-left: 0; - margin-right: 0; } .ui.label.scope-right { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: 0; } .repo-button-row { From 2efd951dfe6249e26e242cfc94358ff098c26856 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 14:01:17 +0800 Subject: [PATCH 24/31] move label code to "label.css" --- web_src/css/modules/label.css | 57 ++++++++++++++++++++++++++++++++++ web_src/css/repo.css | 58 ----------------------------------- 2 files changed, 57 insertions(+), 58 deletions(-) diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index d861758a01aba..6cd7b316d4379 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -286,3 +286,60 @@ a.ui.ui.ui.basic.grey.label:hover { .ui.large.label { font-size: 1rem; } + +/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout. +If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */ +.labels-list { + display: contents; + font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */ +} + +.labels-list a { + max-width: 100%; /* for ellipsis */ +} + +.labels-list .ui.label { + min-height: 20px; + padding-top: 0; + padding-bottom: 0; +} + +.with-labels-list-inline .labels-list .ui.label + .ui.label, +.with-labels-list-inline .labels-list a + a { + margin-left: 0.25em; +} + +.with-labels-list-inline .labels-list .ui.label { + line-height: var(--line-height-default); +} + +/* Scoped labels with different colors on left and right */ +.ui.label.scope-parent { + background: none !important; + padding: 0 !important; + gap: 0 !important; +} + +.ui.label.scope-parent > .ui.label { + margin: 0 !important; /* scoped label's margin is handled by the parent */ +} + +.ui.label.scope-left { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.ui.label.scope-middle { + border-radius: 0; + margin-left: 0; +} + +.ui.label.scope-right { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.ui.label.archived-label { + filter: grayscale(0.5); + opacity: 0.5; +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index cc6ba3b96fc87..f8830555d49af 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1555,64 +1555,6 @@ td .commit-summary { border-bottom-right-radius: 4px; } -/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout. -If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */ -.labels-list { - display: contents; - font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */ -} - -.labels-list a { - max-width: 100%; /* for ellipsis */ -} - -.labels-list .ui.label { - min-height: 20px; - padding-top: 0; - padding-bottom: 0; -} - -.with-labels-list-inline .labels-list .ui.label + .ui.label, -.with-labels-list-inline .labels-list a + a { - margin-left: 0.25em; -} - -.with-labels-list-inline .labels-list .ui.label { - line-height: var(--line-height-default); -} - - -/* Scoped labels with different colors on left and right */ -.ui.label.scope-parent { - background: none !important; - padding: 0 !important; - gap: 0 !important; -} - -.ui.label.scope-parent > .ui.label { - margin: 0 !important; /* scoped label's margin is handled by the parent */ -} - -.archived-label { - filter: grayscale(0.5); - opacity: 0.5; -} - -.ui.label.scope-left { - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} - -.ui.label.scope-middle { - border-radius: 0; - margin-left: 0; -} - -.ui.label.scope-right { - border-bottom-left-radius: 0; - border-top-left-radius: 0; -} - .repo-button-row { margin: 8px 0; display: flex; From 4085d026c5568299d0ed6437bc01af9a9d5e5e94 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 14:13:33 +0800 Subject: [PATCH 25/31] clean up border radius --- web_src/css/modules/label.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 6cd7b316d4379..3de0df5303e8f 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -13,7 +13,7 @@ font-size: var(--font-size-label); font-weight: var(--font-weight-medium); border: 0 solid transparent; - border-radius: 0.28571429rem; + border-radius: var(--border-radius); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -331,7 +331,6 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers. .ui.label.scope-middle { border-radius: 0; - margin-left: 0; } .ui.label.scope-right { From 4adf1e33ae45a651a87229bfd8f033b3f03e5fda Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 26 Jun 2025 18:11:47 +0800 Subject: [PATCH 26/31] use "a" tag for label directly when render --- modules/htmlutil/html.go | 2 ++ modules/htmlutil/html_test.go | 9 +++++++ modules/templates/util_render.go | 39 ++++++++++++++++++++------- modules/templates/util_render_test.go | 4 +++ templates/repo/issue/card.tmpl | 6 +++-- web_src/css/modules/label.css | 3 +-- 6 files changed, 49 insertions(+), 14 deletions(-) diff --git a/modules/htmlutil/html.go b/modules/htmlutil/html.go index 194135ba18ed8..efbc174b2ea02 100644 --- a/modules/htmlutil/html.go +++ b/modules/htmlutil/html.go @@ -42,6 +42,8 @@ func HTMLFormat(s template.HTML, rawArgs ...any) template.HTML { // for most basic types (including template.HTML which is safe), just do nothing and use it case string: args[i] = template.HTMLEscapeString(v) + case template.URL: + args[i] = template.HTMLEscapeString(string(v)) case fmt.Stringer: args[i] = template.HTMLEscapeString(v.String()) default: diff --git a/modules/htmlutil/html_test.go b/modules/htmlutil/html_test.go index 5ff05d75b36cc..626a835b7b6b0 100644 --- a/modules/htmlutil/html_test.go +++ b/modules/htmlutil/html_test.go @@ -10,6 +10,15 @@ import ( "github.com/stretchr/testify/assert" ) +type testStringer struct { +} + +func (t testStringer) String() string { + return "FromStringMethod" +} func TestHTMLFormat(t *testing.T) { assert.Equal(t, template.HTML("< < 1"), HTMLFormat("%s %s %d", "<", template.HTML("<"), 1)) + assert.Equal(t, template.HTML("%!s()"), HTMLFormat("%s", nil)) + assert.Equal(t, template.HTML("<>"), HTMLFormat("%s", template.URL("<>"))) + assert.Equal(t, template.HTML("FromStringMethod FromStringMethod"), HTMLFormat("%s %s", testStringer{}, &testStringer{})) } diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go index 8a9bd2a8befe2..15a2c5fbda872 100644 --- a/modules/templates/util_render.go +++ b/modules/templates/util_render.go @@ -122,8 +122,23 @@ func (ut *RenderUtils) RenderIssueSimpleTitle(text string) template.HTML { return ret } -// RenderLabel renders a label +func (ut *RenderUtils) RenderLabelWithLink(label *issues_model.Label, link any) template.HTML { + var attrHref template.HTML + switch link.(type) { + case template.URL, string: + attrHref = htmlutil.HTMLFormat(`href="%s"`, link) + default: + panic(fmt.Sprintf("unexpected type %T for link", link)) + } + return ut.renderLabelWithTag(label, "a", attrHref) +} + func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML { + return ut.renderLabelWithTag(label, "span", "") +} + +// RenderLabel renders a label +func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, tagAttrs template.HTML) template.HTML { locale := ut.ctx.Value(translation.ContextKey).(translation.Locale) var extraCSSClasses string textColor := util.ContrastColor(label.Color) @@ -137,8 +152,8 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML { if labelScope == "" { // Regular label - return htmlutil.HTMLFormat(`
%s
`, - extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name)) + return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s">%s`, + tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName) } // Scoped label @@ -152,7 +167,7 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML { // Ensure we add the same amount of contrast also near 0 and 1. darken := contrast + math.Max(luminance+contrast-1.0, 0.0) lighten := contrast + math.Max(contrast-luminance, 0.0) - // Compute factor to keep RGB values proportional. + // Compute the factor to keep RGB values proportional. darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0) lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0) @@ -173,26 +188,29 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML { if label.ExclusiveOrder > 0 { // |