feat(dashboard): add inbox and health views
This commit is contained in:
Eyejoker
@@ -523,63 +523,6 @@ dd,
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 20px;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 250, 240, 0.72);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
margin: 6px 0 0;
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.heartbeat-line {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.heartbeat-line span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 7px rgba(63, 127, 81, 0.13);
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl div {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--muted);
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(43, 55, 38, 0.1);
|
||||
@@ -837,6 +780,235 @@ progress::-moz-progress-bar {
|
||||
background: rgba(255, 250, 240, 0.45);
|
||||
}
|
||||
|
||||
.pill-info {
|
||||
color: #625d52;
|
||||
background: rgba(109, 115, 95, 0.16);
|
||||
}
|
||||
|
||||
.pill-error,
|
||||
.pill-down {
|
||||
color: #7c2518;
|
||||
background: rgba(183, 71, 52, 0.18);
|
||||
}
|
||||
|
||||
.pill-stale {
|
||||
color: #6e4a05;
|
||||
background: rgba(181, 138, 34, 0.2);
|
||||
}
|
||||
|
||||
.inbox-board,
|
||||
.health-board {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.inbox-summary,
|
||||
.health-signals {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inbox-summary div,
|
||||
.health-signals div,
|
||||
.health-overview,
|
||||
.inbox-card,
|
||||
.health-service {
|
||||
border: 1px solid rgba(43, 55, 38, 0.1);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 250, 240, 0.64);
|
||||
}
|
||||
|
||||
.inbox-summary div,
|
||||
.health-signals div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
.inbox-summary span,
|
||||
.health-signals span,
|
||||
.inbox-meta small,
|
||||
.health-service small,
|
||||
.health-service em {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.inbox-summary strong,
|
||||
.health-signals strong {
|
||||
font-size: clamp(18px, 2vw, 28px);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.inbox-filters {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.inbox-filters button {
|
||||
display: inline-flex;
|
||||
min-height: 38px;
|
||||
flex: none;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
color: var(--bg-ink);
|
||||
background: rgba(43, 55, 38, 0.08);
|
||||
box-shadow: none;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.inbox-filters button.is-active,
|
||||
.inbox-filters button[aria-pressed='true'] {
|
||||
color: #fffaf0;
|
||||
background: linear-gradient(135deg, #2b3726, #1c211c);
|
||||
}
|
||||
|
||||
.inbox-filters span {
|
||||
color: inherit;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.inbox-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.inbox-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.inbox-error {
|
||||
border-color: rgba(183, 71, 52, 0.26);
|
||||
background: rgba(255, 244, 238, 0.72);
|
||||
}
|
||||
|
||||
.inbox-warn {
|
||||
border-color: rgba(181, 138, 34, 0.24);
|
||||
}
|
||||
|
||||
.inbox-card-head,
|
||||
.health-service {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.inbox-card-head strong,
|
||||
.inbox-card p,
|
||||
.inbox-meta strong,
|
||||
.health-service strong,
|
||||
.health-service small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inbox-card p {
|
||||
margin: 0;
|
||||
color: var(--bg-ink);
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.inbox-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.inbox-meta span {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
background: rgba(43, 55, 38, 0.045);
|
||||
}
|
||||
|
||||
.inbox-meta small,
|
||||
.inbox-meta strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inbox-target {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--accent-strong);
|
||||
background: rgba(191, 95, 44, 0.11);
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.health-overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.health-overview strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: clamp(24px, 3vw, 40px);
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.health-overview p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.health-down {
|
||||
border-color: rgba(183, 71, 52, 0.32);
|
||||
}
|
||||
|
||||
.health-stale {
|
||||
border-color: rgba(181, 138, 34, 0.28);
|
||||
}
|
||||
|
||||
.health-service-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.health-service {
|
||||
grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.9fr) minmax(
|
||||
64px,
|
||||
0.35fr
|
||||
);
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.health-service > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.health-service strong,
|
||||
.health-service small,
|
||||
.health-service em {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.health-service em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.task-board {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -1370,6 +1542,37 @@ progress::-moz-progress-bar {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.inbox-summary,
|
||||
.health-signals {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.inbox-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.inbox-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.inbox-meta {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.health-overview {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.health-service {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.health-service > div:nth-of-type(2),
|
||||
.health-service > div:nth-of-type(3) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.task-group {
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -1440,6 +1643,11 @@ progress::-moz-progress-bar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.inbox-meta,
|
||||
.health-signals {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.task-time-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user