Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve flex ellipsis #30479

Merged
merged 6 commits into from
Apr 14, 2024
Merged

Improve flex ellipsis #30479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a3cbeb9
fix
wxiaoguang Apr 14, 2024
8279af0
Update templates/devtest/label.tmpl
silverwind Apr 14, 2024
c6875f8
fix
wxiaoguang Apr 14, 2024
473c353
more example
wxiaoguang Apr 14, 2024
91d5e7e
add max-width to label
wxiaoguang Apr 14, 2024
12c3daf
Merge branch 'main' into fix-flex-width
wxiaoguang Apr 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions templates/devtest/label.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -1357,11 +1358,13 @@ 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 */
.ui.dropdown .menu.flex-items-menu > .item {
display: flex !important;
align-items: center;
gap: .5rem;
min-width: 0;
}
2 changes: 2 additions & 0 deletions web_src/css/modules/label.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down