tbh/breadcrumb-the-shire
1
0
Fork 0
forked from fa/breadcrumb-the-shire
Code Pull Requests Activity

fix(helpdesk): fix card coloring, dialog structure, search alignment

Browse Source 
- Remove role=button from cards (caused Core button styling). Keep
  tabindex + keydown for keyboard access.
- Restructure dialog to Core pattern: dialog > article.app-dialog-lg
  > header > .close (uses Core close icon and positioning).
- Stack search input below segment control, left-aligned, full width
  up to 20rem.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-06 00:30:13 +02:00
parent ba356d2d61
commit 23503049d1
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
modules/helpdesk/pages/helpdesk/risk-radar/index(default).phtml
View File

@@ -118,12 +118,14 @@ $periodLabels = [
<div id="radar-cards" class="helpdesk-risk-radar-grid"></div>
</div>
<dialog id="radar-detail-dialog" class="app-dialog-lg" aria-labelledby="radar-detail-title">
<div class="app-dialog-header">
<h2 id="radar-detail-title"></h2>
<button type="button" class="app-dialog-close" aria-label="<?php e(t('Close')); ?>">&times;</button>
</div>
<div id="radar-detail-body" class="app-dialog-body"></div>
<dialog id="radar-detail-dialog" aria-labelledby="radar-detail-title">
<article class="app-dialog-lg">
<header>
<h2 id="radar-detail-title"></h2>
<button type="button" class="close" aria-label="<?php e(t('Close')); ?>"></button>
</header>
<div id="radar-detail-body"></div>
</article>
</dialog>
</div>
</section>

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

@@ -523,15 +523,14 @@
/* --- Risk Radar --- */
.helpdesk-risk-radar-toolbar {
display: flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.75);
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--app-spacing) * 0.5);
margin-bottom: calc(var(--app-spacing) * 0.75);
}
.helpdesk-risk-radar-search {
flex: 1;
min-width: 12rem;
width: 100%;
max-width: 20rem;
}

3
modules/helpdesk/web/js/helpdesk-risk-radar.js
View File

@@ -20,7 +20,7 @@ if (container) {
const dialog = document.getElementById('radar-detail-dialog');
const dialogTitle = document.getElementById('radar-detail-title');
const dialogBody = document.getElementById('radar-detail-body');
const dialogClose = dialog ? dialog.querySelector('.app-dialog-close') : null;
const dialogClose = dialog ? dialog.querySelector('.close') : null;
let currentPeriod = 90;
let lastData = null;
@@ -130,7 +130,6 @@ if (container) {
// Click/keyboard to open detail
card.tabIndex = 0;
card.setAttribute('role', 'button');
card.addEventListener('click', () => openDetail(customer));
card.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(customer); } });