diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2024-04-15 03:43:30 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-14 21:43:30 +0200 |
| commit | b84baf21fa19521e1ab303a60918c74f85fcad1c (patch) | |
| tree | 8fc5c1fc8b92782f12a6f3ecbd6d4c104cc7697f | |
| parent | 99463532820d7a88cdea88e66e0606b996cc9fc7 (diff) | |
| download | gitea-b84baf21fa19521e1ab303a60918c74f85fcad1c.tar.gz gitea-b84baf21fa19521e1ab303a60918c74f85fcad1c.zip | |
Improve flex ellipsis (#30479)
---------
Co-authored-by: silverwind <me@silverwind.io>
| -rw-r--r-- | templates/devtest/label.tmpl | 27 | ||||
| -rw-r--r-- | web_src/css/base.css | 3 | ||||
| -rw-r--r-- | web_src/css/modules/label.css | 2 |
3 files changed, 32 insertions, 0 deletions
diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl new file mode 100644 index 0000000000..77590715a1 --- /dev/null +++ b/templates/devtest/label.tmpl @@ -0,0 +1,27 @@ +{{template "base/head" .}} +<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> +<div class="page-content devtest ui container"> + <div> + <h1>Label</h1> + <div class="flex-text-block tw-my-2"> + <span class="ui label">simple label</span> + <span class="ui red label">red label</span> + <span class="ui green label">green label</span> + </div> + <div class="flex-text-block tw-my-2"> + <span class="ui basic label">basic label</span> + <span class="ui basic red label">basic red label</span> + <span class="ui basic green label">basic green label</span> + </div> + <div class="flex-text-block tw-my-2"> + <span class="ui label">long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span> + </div> + <div class="flex-text-block tw-my-2"> + <span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span> + </div> + <div class="tw-my-2"> + <span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span> + </div> + </div> +</div> +{{template "base/footer" .}} diff --git a/web_src/css/base.css b/web_src/css/base.css index b3f87044e0..8ded4aa883 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1341,6 +1341,7 @@ table th[data-sortt-desc] .svg { align-items: center; gap: .25rem; vertical-align: middle; + min-width: 0; } .ui.dropdown .ui.label .svg { @@ -1357,6 +1358,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 */ @@ -1364,4 +1366,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 32e772ea5b..696080b667 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -5,6 +5,8 @@ display: inline-flex; 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); |