feat(ui): refine fleet search/filter toolbar with status chips
Adopt Portainer/Beszel-style fleet controls: prominent search, status facet chips with counts, active filter chips, result count, and primary-row sort/select. Keep advanced filters collapsed for secondary facets. Tests and production dist rebuild for gateway 8788.
This commit is contained in:
chick
+226
-24
@@ -585,35 +585,216 @@ small {
|
||||
min-width: min(100%, 15rem);
|
||||
}
|
||||
.fleet-toolbar {
|
||||
display: block;
|
||||
}
|
||||
.fleet-toolbar-primary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 12rem);
|
||||
align-items: end;
|
||||
gap: 0.65rem;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 1rem 1rem;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 88%, #fff);
|
||||
box-shadow: 0 8px 24px rgba(121, 79, 39, 0.06);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 253, 245, 0.96), rgba(247, 243, 223, 0.92));
|
||||
}
|
||||
.fleet-toolbar-primary label:first-child {
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.fleet-search-row {
|
||||
min-width: 0;
|
||||
}
|
||||
.fleet-search-field {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-search-field input[type='search'] {
|
||||
width: 100%;
|
||||
min-height: 3rem;
|
||||
padding: 0.65rem 4.5rem 0.65rem 2.6rem;
|
||||
border-radius: 999px;
|
||||
border: 2px solid color-mix(in srgb, var(--border) 70%, #b7a88a);
|
||||
background: #fffdf8;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
transition:
|
||||
border-color 140ms var(--ease-out),
|
||||
box-shadow 140ms var(--ease-out);
|
||||
}
|
||||
.fleet-search-field input[type='search']::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.fleet-search-field input[type='search']:focus {
|
||||
border-color: color-mix(in srgb, var(--mint) 55%, #b7a88a);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(25, 200, 185, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.fleet-search-glyph {
|
||||
position: absolute;
|
||||
left: 0.95rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fleet-search-clear {
|
||||
position: absolute;
|
||||
right: 0.4rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
min-height: 2.15rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-width: 1px;
|
||||
border-color: transparent;
|
||||
background: rgba(121, 79, 39, 0.08);
|
||||
color: var(--brown);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.fleet-status-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.fleet-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.3rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 80%, #fff);
|
||||
background: rgba(255, 253, 245, 0.9);
|
||||
color: var(--brown);
|
||||
font-weight: 700;
|
||||
transition:
|
||||
transform 120ms var(--ease-out),
|
||||
background 140ms var(--ease-out),
|
||||
border-color 140ms var(--ease-out),
|
||||
box-shadow 140ms var(--ease-out);
|
||||
}
|
||||
.fleet-status-chip strong {
|
||||
min-width: 1.25rem;
|
||||
padding: 0.05rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(121, 79, 39, 0.08);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.fleet-status-chip:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--mint) 40%, var(--border));
|
||||
}
|
||||
.fleet-status-chip.is-active {
|
||||
color: #0c5f59;
|
||||
border-color: color-mix(in srgb, var(--mint) 55%, #9fd9d1);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(232, 250, 246, 0.98), rgba(214, 244, 238, 0.95));
|
||||
box-shadow: 0 6px 16px rgba(25, 200, 185, 0.16);
|
||||
}
|
||||
.fleet-status-chip.is-active strong {
|
||||
background: rgba(25, 200, 185, 0.18);
|
||||
color: #0c5f59;
|
||||
}
|
||||
.fleet-toolbar-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fleet-result-count {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fleet-result-count strong {
|
||||
color: var(--brown);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.fleet-toolbar-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fleet-sort-field {
|
||||
min-width: 10rem;
|
||||
}
|
||||
.fleet-sort-field select {
|
||||
min-width: 11rem;
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-active-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.fleet-active-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 2rem;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--mint) 35%, var(--border));
|
||||
background: rgba(25, 200, 185, 0.1);
|
||||
color: #0f6f68;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.fleet-clear-filters {
|
||||
min-height: 2rem;
|
||||
padding: 0.2rem 0.7rem;
|
||||
border-width: 1px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--brown);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.fleet-advanced-filters {
|
||||
margin-top: 0.65rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.fleet-advanced-filters > summary {
|
||||
width: fit-content;
|
||||
min-height: 2.75rem;
|
||||
display: flex;
|
||||
min-height: 2.35rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--brown);
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
.fleet-advanced-filters > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.fleet-advanced-count {
|
||||
min-width: 1.25rem;
|
||||
padding: 0.05rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(25, 200, 185, 0.16);
|
||||
color: #0c5f59;
|
||||
font-size: 0.78rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.fleet-advanced-filter-grid {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
align-items: end;
|
||||
gap: 0.65rem;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 0.65rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.column-picker {
|
||||
position: relative;
|
||||
@@ -1216,16 +1397,35 @@ main ul[aria-label='已配置实例'] {
|
||||
}
|
||||
.fleet-toolbar {
|
||||
margin: 0.55rem 0;
|
||||
padding: 0.65rem;
|
||||
padding: 0.7rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
.fleet-toolbar-primary {
|
||||
grid-template-columns: minmax(0, 1fr) 7.5rem;
|
||||
.fleet-search-field input[type='search'] {
|
||||
min-height: 2.85rem;
|
||||
padding-right: 4.1rem;
|
||||
}
|
||||
.fleet-toolbar-primary label {
|
||||
min-width: 0;
|
||||
.fleet-status-chips {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.fleet-toolbar-primary span {
|
||||
font-size: 0.75rem;
|
||||
.fleet-status-chip {
|
||||
min-height: 2.15rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.fleet-toolbar-meta {
|
||||
align-items: stretch;
|
||||
}
|
||||
.fleet-toolbar-controls,
|
||||
.fleet-sort-field,
|
||||
.fleet-select-all {
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-sort-field select {
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-select-all {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.fleet-advanced-filters > summary {
|
||||
min-height: 2.25rem;
|
||||
@@ -1424,13 +1624,15 @@ main ul[aria-label='已配置实例'] {
|
||||
}
|
||||
|
||||
.fleet-select-all {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: end;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
.fleet-select-all button {
|
||||
min-height: 2.5rem;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
.fleet-card-section + .pagination {
|
||||
margin-top: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user