tyler.durden
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve flex ellipsis (#30479) 

![image](https://github.com/go-gitea/gitea/assets/2114189/857794d8-2170-42be-a5bf-47ebacbafebd)

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2024-04-15 03:43:30 +08:00 committed by GitHub
parent 9946353282
commit b84baf21fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/devtest/label.tmpl Normal file
View File

@ -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" .}}

3
web_src/css/base.css
View File

@ -1341,6 +1341,7 @@ table th[data-sortt-desc] .svg {
align-items: center; align-items: center;
gap: .25rem; gap: .25rem;
vertical-align: middle; vertical-align: middle;
min-width: 0;
} }
.ui.dropdown .ui.label .svg { .ui.dropdown .ui.label .svg {
@ -1357,6 +1358,7 @@ table th[data-sortt-desc] .svg {
display: flex; display: flex;
align-items: center; align-items: center;
gap: .25rem; 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 */ /* 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; display: flex !important;
align-items: center; align-items: center;
gap: .5rem; gap: .5rem;
min-width: 0;
} }

2
web_src/css/modules/label.css
View File

@ -5,6 +5,8 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: .25rem; 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; vertical-align: middle;
line-height: 1; line-height: 1;
background: var(--color-label-bg); background: var(--color-label-bg);