Skip to content

Commit 99cb556

Browse files
steipetesteipete
committed
feat: redesign control overview dashboard
1 parent 123f7a6 commit 99cb556

2 files changed

Lines changed: 593 additions & 208 deletions

File tree

‎ui/src/styles/components.css‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5439,6 +5439,246 @@ td.data-table-key-col {
54395439
Overview Cards
54405440
=========================================== */
54415441

5442+
.ov-dashboard {
5443+
display: grid;
5444+
grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
5445+
align-items: start;
5446+
gap: 18px;
5447+
}
5448+
5449+
.ov-dashboard__main {
5450+
min-width: 0;
5451+
}
5452+
5453+
.ov-dashboard__rail {
5454+
position: sticky;
5455+
top: 18px;
5456+
display: grid;
5457+
gap: 12px;
5458+
min-width: 0;
5459+
}
5460+
5461+
.ov-rail-card {
5462+
display: grid;
5463+
gap: 12px;
5464+
padding: 14px;
5465+
border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
5466+
border-radius: var(--radius-lg);
5467+
background:
5468+
linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white 3%), var(--card)), var(--card);
5469+
box-shadow: var(--shadow-sm);
5470+
}
5471+
5472+
.ov-rail-card--stats {
5473+
grid-template-columns: repeat(3, minmax(0, 1fr));
5474+
gap: 8px;
5475+
}
5476+
5477+
.ov-rail-stat,
5478+
.ov-rail-mini-grid button,
5479+
.ov-rail-list-row {
5480+
border: 1px solid var(--border);
5481+
background: var(--bg-accent);
5482+
color: inherit;
5483+
cursor: pointer;
5484+
transition:
5485+
border-color var(--duration-fast) var(--ease-out),
5486+
background var(--duration-fast) var(--ease-out),
5487+
transform var(--duration-fast) var(--ease-out);
5488+
}
5489+
5490+
.ov-rail-stat:hover,
5491+
.ov-rail-mini-grid button:hover,
5492+
.ov-rail-list-row:hover {
5493+
border-color: var(--border-strong);
5494+
background: var(--card-highlight);
5495+
transform: translateY(-1px);
5496+
}
5497+
5498+
.ov-rail-stat {
5499+
display: grid;
5500+
justify-items: center;
5501+
gap: 3px;
5502+
min-width: 0;
5503+
padding: 10px 6px;
5504+
border-radius: var(--radius-md);
5505+
text-align: center;
5506+
}
5507+
5508+
.ov-rail-stat span,
5509+
.ov-rail-mini-grid span,
5510+
.ov-rail-list-row small,
5511+
.ov-rail-note {
5512+
color: var(--muted);
5513+
font-size: 10px;
5514+
font-weight: 700;
5515+
letter-spacing: 0.05em;
5516+
text-transform: uppercase;
5517+
}
5518+
5519+
.ov-rail-stat strong {
5520+
color: var(--text-strong);
5521+
font-size: 16px;
5522+
line-height: 1.1;
5523+
}
5524+
5525+
.ov-rail-heading {
5526+
display: flex;
5527+
align-items: center;
5528+
justify-content: space-between;
5529+
gap: 10px;
5530+
min-width: 0;
5531+
font-size: 12px;
5532+
font-weight: 700;
5533+
letter-spacing: 0.08em;
5534+
text-transform: uppercase;
5535+
color: var(--muted);
5536+
}
5537+
5538+
.ov-status-pill {
5539+
display: inline-flex;
5540+
align-items: center;
5541+
gap: 6px;
5542+
padding: 3px 8px;
5543+
border-radius: var(--radius-full);
5544+
font-size: 10px;
5545+
letter-spacing: 0.06em;
5546+
border: 1px solid var(--border);
5547+
}
5548+
5549+
.ov-status-pill::before,
5550+
.ov-status-dot {
5551+
content: "";
5552+
width: 7px;
5553+
height: 7px;
5554+
border-radius: var(--radius-full);
5555+
background: var(--muted);
5556+
}
5557+
5558+
.ov-status-pill.is-online,
5559+
.ov-status-dot.is-ok {
5560+
color: var(--ok);
5561+
}
5562+
5563+
.ov-status-pill.is-online::before,
5564+
.ov-status-dot.is-ok {
5565+
background: var(--ok);
5566+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
5567+
}
5568+
5569+
.ov-status-pill.is-offline,
5570+
.ov-status-dot.is-warn {
5571+
color: var(--warn);
5572+
}
5573+
5574+
.ov-status-pill.is-offline::before,
5575+
.ov-status-dot.is-warn {
5576+
background: var(--warn);
5577+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent);
5578+
}
5579+
5580+
.ov-rail-url {
5581+
min-width: 0;
5582+
overflow: hidden;
5583+
text-overflow: ellipsis;
5584+
white-space: nowrap;
5585+
padding: 8px 10px;
5586+
border: 1px solid var(--border);
5587+
border-radius: var(--radius-md);
5588+
background: var(--bg);
5589+
color: var(--muted);
5590+
font-size: 11px;
5591+
}
5592+
5593+
.ov-rail-mini-grid {
5594+
display: grid;
5595+
grid-template-columns: repeat(3, minmax(0, 1fr));
5596+
gap: 8px;
5597+
}
5598+
5599+
.ov-rail-mini-grid button {
5600+
display: grid;
5601+
justify-items: center;
5602+
gap: 2px;
5603+
min-width: 0;
5604+
padding: 10px 5px;
5605+
border-radius: var(--radius-md);
5606+
}
5607+
5608+
.ov-rail-mini-grid strong {
5609+
color: var(--text-strong);
5610+
font-size: 16px;
5611+
line-height: 1.1;
5612+
}
5613+
5614+
.ov-rail-link {
5615+
border: none;
5616+
background: transparent;
5617+
color: var(--accent);
5618+
font-size: 11px;
5619+
font-weight: 700;
5620+
cursor: pointer;
5621+
}
5622+
5623+
.ov-rail-link:hover {
5624+
text-decoration: underline;
5625+
}
5626+
5627+
.ov-rail-list {
5628+
display: grid;
5629+
gap: 7px;
5630+
}
5631+
5632+
.ov-rail-list-row {
5633+
display: grid;
5634+
grid-template-columns: 28px minmax(0, 1fr);
5635+
align-items: center;
5636+
gap: 9px;
5637+
min-width: 0;
5638+
padding: 8px;
5639+
border-radius: var(--radius-md);
5640+
text-align: left;
5641+
}
5642+
5643+
.ov-rail-list-icon {
5644+
display: inline-flex;
5645+
align-items: center;
5646+
justify-content: center;
5647+
width: 28px;
5648+
height: 28px;
5649+
border-radius: var(--radius-md);
5650+
background: color-mix(in srgb, var(--accent-subtle) 58%, transparent);
5651+
}
5652+
5653+
.ov-rail-list-row strong {
5654+
display: block;
5655+
min-width: 0;
5656+
overflow: hidden;
5657+
text-overflow: ellipsis;
5658+
white-space: nowrap;
5659+
color: var(--text-strong);
5660+
font-size: 12px;
5661+
line-height: 1.25;
5662+
}
5663+
5664+
.ov-rail-list-row small {
5665+
display: block;
5666+
margin-top: 2px;
5667+
}
5668+
5669+
.ov-automation-row {
5670+
display: flex;
5671+
align-items: center;
5672+
gap: 9px;
5673+
min-width: 0;
5674+
color: var(--text);
5675+
font-size: 12px;
5676+
}
5677+
5678+
.ov-status-dot {
5679+
flex: 0 0 auto;
5680+
}
5681+
54425682
.ov-cards {
54435683
display: grid;
54445684
gap: 12px;
@@ -5843,6 +6083,17 @@ details[open] > .ov-expandable-toggle::after {
58436083
background: var(--bg-muted);
58446084
}
58456085

6086+
@media (max-width: 1100px) {
6087+
.ov-dashboard {
6088+
grid-template-columns: 1fr;
6089+
}
6090+
6091+
.ov-dashboard__rail {
6092+
position: static;
6093+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
6094+
}
6095+
}
6096+
58466097
@media (max-width: 768px) {
58476098
.ov-bottom-grid {
58486099
grid-template-columns: 1fr;

0 commit comments

Comments
 (0)