michael/webmin
1
0
Fork 0
mirror of https://github.com/webmin/webmin.git synced 2026-10-30 07:01:10 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix multi-select badge size and alignment
Some checks failed
Tests / prove (push) Has been cancelled
Details
Package and upload artifacts / build (push) Has been cancelled
Details
Close inactive / close-inactive (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ilia Ross
2026-10-25 02:27:12 +01:00
parent c73537864a
commit 60f980d832
2 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui-lib.pl
View File

@@ -6422,9 +6422,9 @@ foreach my $it (@items) {
# Keep plain tags compatible while allowing separate state badges.
my @badges = ref($it->{'badges'}) eq 'ARRAY' ?
grep { ref($_) eq 'ARRAY' && defined($_->[0]) } @{$it->{'badges'}} : ();
my $side = defined($it->{'tag'}) && $it->{'tag'} ne '' ?
&ui_chip($it->{'tag'}) : '';
$side .= join('', map { &ui_badge(@$_) } @badges);
# Badges and metadata come first, so the tag chip stays a fixed
# right-hand column across rows with and without badges.
my $side = join('', map { &ui_badge(@$_) } @badges);
# Several facts share one badge, with plain labels and accessible tooltips.
my @metadata = ref($it->{'metadata'}) eq 'ARRAY' ?
grep { ref($_) eq 'HASH' && defined($_->{'label'}) &&
@@ -6442,6 +6442,8 @@ foreach my $it (@items) {
{ 'class' => 'ui_badge ui_badge_neutral ui_badge_small '.
'ui_badge_rounded ui_multi_metadata' });
}
$side .= &ui_chip($it->{'tag'})
if (defined($it->{'tag'}) && $it->{'tag'} ne '');
$row .= &ui_tag('span', $side,
{ 'class' => &_ui_class('ui_multi_side', @badges ? 'ui_multi_badges' : undef) })
if (length($side));

13
unauthenticated/css/ui-lib.css
View File

@@ -1735,23 +1735,24 @@ a.ui_list_link:hover { color: var(--ui-accent) !important; }
white-space: nowrap;
}
.ui_multi_side { margin-left: auto; padding-left: 8px; flex-shrink: 0; }
/* Metadata stays secondary to the label, with room between rows and badges. */
.ui_multi_item:has(> .ui_multi_badges) { padding: 7px 10px; }
/* Badges share the chip's size and the row's normal padding, so rows with
* badges line up with rows without them. */
.ui_multi_badges {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 6px 8px;
gap: 6px;
flex-shrink: 1;
padding-left: 16px;
}
.ui_multi_badges .ui_badge {
padding: 3px 10px;
padding: 1px 8px;
font-size: 0.86em;
font-weight: 400;
line-height: 1.4;
line-height: 1.5;
border-color: color-mix(in srgb, currentColor 16%, transparent);
}
.ui_multi_badges .ui_badge .ui_svg_icon { width: 1em; height: 1em; }
.ui_multi_badges .ui_badge_neutral {
background: color-mix(in srgb, var(--ui-neutral-soft) 35%, transparent);
color: var(--ui-fg-muted);