fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(helpdesk): redesign risk cards with dominant score and clear hierarchy

Browse Source 
Stripe-style layout: large colored score circle on the left, customer
name + risk level label on the right. One-line key facts below
separated by middot (e.g. '5 open · 2 critical · 1 SLA · ↑3').
Removed border-left color accent, pill list, and metric row.
Three visual levels: score (eye-catching), name+level (context),
facts (detail). Clean scannable layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-06 00:52:23 +02:00
parent 1128197022
commit 4d23feb555
2 changed files with 60 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
modules/helpdesk/web/css/helpdesk.css
View File

@@ -544,7 +544,7 @@
.helpdesk-risk-card {
border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem);
padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 0.75);
padding: calc(var(--app-spacing) * 0.65) calc(var(--app-spacing) * 0.75);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
@@ -554,47 +554,30 @@
box-shadow: 0 1px 4px color-mix(in srgb, var(--app-primary, #0d6efd) 15%, transparent);
}
.helpdesk-risk-card.helpdesk-risk-level-high {
border-left: 3px solid var(--app-danger, #dc3545);
}
.helpdesk-risk-card.helpdesk-risk-level-medium {
border-left: 3px solid var(--app-warning, #f59e0b);
}
.helpdesk-risk-card.helpdesk-risk-level-low {
border-left: 3px solid var(--app-success, #198754);
.helpdesk-risk-card:focus-visible {
outline: 2px solid var(--app-primary, #0d6efd);
outline-offset: -2px;
}
.helpdesk-risk-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--app-spacing) * 0.5);
margin-bottom: calc(var(--app-spacing) * 0.3);
}
.helpdesk-risk-card-name {
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
align-items: flex-start;
gap: calc(var(--app-spacing) * 0.6);
}
.helpdesk-risk-card-score {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.8rem;
min-width: 2.2rem;
height: 2.2rem;
font-size: 1.25rem;
min-width: 2.6rem;
height: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
color: #fff;
line-height: 1;
}
.helpdesk-risk-card-score.helpdesk-risk-level-high {
@@ -609,28 +592,41 @@
background: var(--app-success, #198754);
}
.helpdesk-risk-card-info {
flex: 1;
min-width: 0;
}
.helpdesk-risk-card-reasons {
list-style: none;
margin: calc(var(--app-spacing) * 0.25) 0 0;
padding: 0;
.helpdesk-risk-card-name {
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.helpdesk-risk-card-level {
font-size: var(--text-xs, 0.75rem);
font-weight: 500;
}
.helpdesk-risk-card-level.helpdesk-risk-level-high {
color: var(--app-danger, #dc3545);
}
.helpdesk-risk-card-level.helpdesk-risk-level-medium {
color: var(--app-warning, #f59e0b);
}
.helpdesk-risk-card-level.helpdesk-risk-level-low {
color: var(--app-success, #198754);
}
.helpdesk-risk-card-facts {
margin: calc(var(--app-spacing) * 0.35) 0 0;
font-size: var(--text-xs, 0.75rem);
color: var(--app-muted-color);
display: flex;
flex-wrap: wrap;
gap: calc(var(--app-spacing) * 0.25);
}
.helpdesk-risk-card-reasons li {
padding: 0.1em 0.4em;
border-radius: var(--app-border-radius, 0.25rem);
background: color-mix(in srgb, var(--app-muted-border-color) 30%, transparent);
}
.helpdesk-risk-card-reason-warn {
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
color: var(--app-warning, #f59e0b);
font-weight: 600;
}
.helpdesk-risk-card-driver-bar {