From a3cbeb991174a08f01e2f55997cd9634bbf60898 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 15 Apr 2024 01:34:29 +0800 Subject: [PATCH 1/5] fix --- templates/devtest/label.tmpl | 26 ++++++++++++++++++++++++++ web_src/css/base.css | 3 +++ web_src/css/modules/label.css | 1 + 3 files changed, 30 insertions(+) create mode 100644 templates/devtest/label.tmpl diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl new file mode 100644 index 000000000000..a35a3dc5dece --- /dev/null +++ b/templates/devtest/label.tmpl @@ -0,0 +1,26 @@ +{{template "base/head" .}} + +
+
+

Label

+
+
+ simple label + red label + green label +
+
+ basic label + basic red label + basic green label +
+
+ long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label +
+
+ very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label +
+
+
+
+{{template "base/footer" .}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 20f361617749..16f78bb7ace7 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1345,6 +1345,7 @@ table th[data-sortt-desc] .svg { align-items: center; gap: .25rem; vertical-align: middle; + min-width: 0; } .ui.ui.button { @@ -1365,6 +1366,7 @@ table th[data-sortt-desc] .svg { display: flex; align-items: center; gap: .25rem; + min-width: 0; } /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content */ @@ -1372,4 +1374,5 @@ table th[data-sortt-desc] .svg { display: flex !important; align-items: center; gap: .5rem; + min-width: 0; } diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 32e772ea5b0f..2032b2c84bbb 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -5,6 +5,7 @@ display: inline-flex; align-items: center; gap: .25rem; + min-width: 0; vertical-align: middle; line-height: 1; background: var(--color-label-bg); From 8279af0d48cc800642483a02a92ec3c9cccc7236 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 14 Apr 2024 19:43:28 +0200 Subject: [PATCH 2/5] Update templates/devtest/label.tmpl --- templates/devtest/label.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl index a35a3dc5dece..0d011549ca27 100644 --- a/templates/devtest/label.tmpl +++ b/templates/devtest/label.tmpl @@ -10,7 +10,7 @@ green label
- basic label + basic label basic red label basic green label
From c6875f8e2d4e93a5c4c5c838324f946debf96e41 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 15 Apr 2024 01:56:36 +0800 Subject: [PATCH 3/5] fix --- web_src/css/helpers.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 118c058b19a8..5ace3e20e182 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -13,6 +13,7 @@ Gitea's private styles use `g-` prefix. overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; + min-width: 0; } .g-table-auto-ellipsis td.auto-ellipsis { From 473c353bf76234d89a3a7242bb936cc36751a8e4 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 15 Apr 2024 01:59:38 +0800 Subject: [PATCH 4/5] more example --- templates/devtest/label.tmpl | 35 ++++++++++++++++++----------------- web_src/css/helpers.css | 1 - 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl index 0d011549ca27..661cb7f65eef 100644 --- a/templates/devtest/label.tmpl +++ b/templates/devtest/label.tmpl @@ -3,23 +3,24 @@

Label

-
-
- simple label - red label - green label -
-
- basic label - basic red label - basic green label -
-
- long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label -
-
- very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label -
+
+ simple label + red label + green label +
+
+ basic label + basic red label + basic green label +
+
+ long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label +
+
+ very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label +
+
+ very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 5ace3e20e182..118c058b19a8 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -13,7 +13,6 @@ Gitea's private styles use `g-` prefix. overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; - min-width: 0; } .g-table-auto-ellipsis td.auto-ellipsis { From 91d5e7e301b474f446bdaa0ff98d3d15057b9307 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 15 Apr 2024 02:09:36 +0800 Subject: [PATCH 5/5] add max-width to label --- templates/devtest/label.tmpl | 2 +- web_src/css/modules/label.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl index 661cb7f65eef..77590715a11c 100644 --- a/templates/devtest/label.tmpl +++ b/templates/devtest/label.tmpl @@ -20,7 +20,7 @@ very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label
- very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label + very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 2032b2c84bbb..696080b66704 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -6,6 +6,7 @@ align-items: center; gap: .25rem; min-width: 0; + max-width: 100%; /* since we are using "flex" to align label contents, we also need to limit the x-axis, a label shouldn't be wider than 100% */ vertical-align: middle; line-height: 1; background: var(--color-label-bg);