LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance CSS/HTML with semantic elements, utility classes, and breakpoints

Browse Source 
- Move inline styles to CSS classes in ticket.css and dashboard.css
- Add intermediate responsive breakpoints (600px, 900px, 1200px)
- Convert HTML to semantic elements (header, section, article)
- Add ARIA attributes for modals and navigation
- Add utility classes for text styling and spacing
- Update cache-busting version numbers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-31 10:29:20 -05:00
parent 73162d9a9b
commit 2657e86d24
4 changed files with 461 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
views/DashboardView.php
View File

@@ -12,11 +12,11 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket Dashboard</title>
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260126c">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131a">
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124e"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124e"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131a"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131a"></script>
<script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
@@ -75,9 +75,9 @@ $nonce = SecurityHeadersMiddleware::getNonce();
document.getElementById('boot-sequence').remove();
}
</script>
<div class="user-header">
<header class="user-header" role="banner">
<div class="user-header-left">
<a href="/" class="app-title" style="text-decoration: none; color: inherit;">🎫 Tinker Tickets</a>
<a href="/" class="app-title">🎫 Tinker Tickets</a>
</div>
<div class="user-header-right">
<?php if (isset($GLOBALS['currentUser'])): ?>
@@ -99,7 +99,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<button class="settings-icon" title="Settings (Alt+S)" data-action="open-settings" aria-label="Settings">⚙</button>
<?php endif; ?>
</div>
</div>
</header>
<!-- Collapsible ASCII Banner -->
<div class="ascii-banner-wrapper collapsed">
@@ -126,8 +126,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<!-- Dashboard Layout with Sidebar -->
<div class="dashboard-layout" id="dashboardLayout">
<!-- Left Sidebar with Filters -->
<aside class="dashboard-sidebar" id="dashboardSidebar">
<button class="sidebar-collapse-btn" data-action="toggle-sidebar" title="Collapse Sidebar">◀ Hide</button>
<aside class="dashboard-sidebar" id="dashboardSidebar" role="complementary" aria-label="Filter options">
<button class="sidebar-collapse-btn" data-action="toggle-sidebar" title="Collapse Sidebar" aria-expanded="true" aria-controls="dashboardSidebar">◀ Hide</button>
<div class="sidebar-content">
<div class="ascii-frame-inner">
<div class="ascii-subsection-header">Filters</div>
@@ -190,7 +190,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
</aside>
<!-- Expand button shown when sidebar is collapsed -->
<button class="sidebar-expand-btn" id="sidebarExpandBtn" data-action="toggle-sidebar" title="Show Filters">▶ Filters</button>
<button class="sidebar-expand-btn" id="sidebarExpandBtn" data-action="toggle-sidebar" title="Show Filters" aria-expanded="false" aria-controls="dashboardSidebar">▶ Filters</button>
<!-- Main Content Area -->
<main class="dashboard-main">
@@ -338,7 +338,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<?php endif; ?>
<!-- TICKET TABLE WITH INLINE BULK ACTIONS -->
<div class="ascii-frame-outer">
<section class="ascii-frame-outer" aria-label="Ticket list">
<span class="bottom-left-corner">╚</span>
<span class="bottom-right-corner">╝</span>
@@ -492,11 +492,11 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div><!-- End table-wrapper -->
</div>
</div>
</div>
</section>
<!-- END OUTER FRAME -->
<!-- Kanban Card View -->
<div id="cardView" class="card-view-container" style="display: none;">
<section id="cardView" class="card-view-container" style="display: none;" aria-label="Kanban board view">
<div class="kanban-board">
<div class="kanban-column" data-status="Open">
<div class="kanban-column-header status-Open">
@@ -527,17 +527,17 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<div class="kanban-cards"></div>
</div>
</div>
</div>
</section>
<!-- Settings Modal -->
<div class="settings-modal" id="settingsModal" style="display: none;" data-action="close-settings-backdrop">
<div class="settings-modal" id="settingsModal" style="display: none;" data-action="close-settings-backdrop" role="dialog" aria-modal="true" aria-labelledby="settingsModalTitle">
<div class="settings-content">
<span class="bottom-left-corner">╚</span>
<span class="bottom-right-corner">╝</span>
<div class="settings-header">
<h3>⚙ System Preferences</h3>
<button class="close-settings" data-action="close-settings">✗</button>
<h3 id="settingsModalTitle">⚙ System Preferences</h3>
<button class="close-settings" data-action="close-settings" aria-label="Close settings">✗</button>
</div>
<div class="settings-body">
@@ -592,7 +592,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<option value="Asia/Kolkata">India (IST)</option>
<option value="Australia/Sydney">Sydney (AEST/AEDT)</option>
</select>
<small style="color: var(--text-muted); margin-top: 0.25rem; display: block;">
<small class="text-muted mt-sm display-block">
Current: <?php echo $GLOBALS['config']['TIMEZONE_ABBREV']; ?> (<?php echo $GLOBALS['config']['TIMEZONE']; ?>)
</small>
</div>
@@ -674,7 +674,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
endforeach;
if (empty(trim($GLOBALS['currentUser']['groups'] ?? ''))):
?>
<span style="color: var(--text-muted);">No groups assigned</span>
<span class="text-muted">No groups assigned</span>
<?php endif; ?>
</div>
</div>
@@ -689,11 +689,11 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<!-- Advanced Search Modal -->
<div class="settings-modal" id="advancedSearchModal" style="display: none;" data-action="close-advanced-search-backdrop">
<div class="settings-modal" id="advancedSearchModal" style="display: none;" data-action="close-advanced-search-backdrop" role="dialog" aria-modal="true" aria-labelledby="advancedSearchModalTitle">
<div class="settings-content">
<div class="settings-header">
<h3>🔍 Advanced Search</h3>
<button class="close-settings" data-action="close-advanced-search">✗</button>
<h3 id="advancedSearchModalTitle">🔍 Advanced Search</h3>
<button class="close-settings" data-action="close-advanced-search" aria-label="Close advanced search">✗</button>
</div>
<form id="advancedSearchForm">
@@ -703,13 +703,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<h4>╔══ Saved Filters ══╗</h4>
<div class="setting-row">
<label for="saved-filters-select">Load Filter:</label>
<select id="saved-filters-select" class="setting-select" style="max-width: 70%;" data-action="load-saved-filter">
<select id="saved-filters-select" class="setting-select setting-select-wide" data-action="load-saved-filter">
<option value="">-- Select a saved filter --</option>
</select>
</div>
<div class="setting-row" style="justify-content: flex-end; gap: 0.5rem;">
<button type="button" class="btn btn-secondary" data-action="save-filter" style="padding: 0.5rem 1rem;">💾 Save Current</button>
<button type="button" class="btn btn-secondary" data-action="delete-filter" style="padding: 0.5rem 1rem;">🗑 Delete Selected</button>
<div class="setting-row setting-row-right">
<button type="button" class="btn btn-secondary btn-setting" data-action="save-filter">💾 Save Current</button>
<button type="button" class="btn btn-secondary btn-setting" data-action="delete-filter">🗑 Delete Selected</button>
</div>
</div>
@@ -718,7 +718,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<h4>╔══ Search Criteria ══╗</h4>
<div class="setting-row">
<label for="adv-search-text">Search Text:</label>
<input type="text" id="adv-search-text" class="setting-select" style="max-width: 100%;" placeholder="Search in title, description...">
<input type="text" id="adv-search-text" class="setting-select setting-select-full" placeholder="Search in title, description...">
</div>
</div>
@@ -757,7 +757,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<div class="setting-row">
<label for="adv-priority-min">Priority Range:</label>
<select id="adv-priority-min" class="setting-select" style="max-width: 90px;">
<select id="adv-priority-min" class="setting-select setting-select-narrow">
<option value="">Any</option>
<option value="1">P1</option>
<option value="2">P2</option>
@@ -765,8 +765,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<option value="4">P4</option>
<option value="5">P5</option>
</select>
<span style="color: var(--terminal-green);">to</span>
<select id="adv-priority-max" class="setting-select" style="max-width: 90px;">
<span class="separator-text">to</span>
<select id="adv-priority-max" class="setting-select setting-select-narrow">
<option value="">Any</option>
<option value="1">P1</option>
<option value="2">P2</option>

94
views/TicketView.php
View File

@@ -50,12 +50,12 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket #<?php echo $ticket['ticket_id']; ?></title>
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260126c">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260124e">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131a">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260131a">
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124e"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124e"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260124e"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131a"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131a"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260131a"></script>
<script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
@@ -77,7 +77,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</script>
</head>
<body>
<div class="user-header">
<header class="user-header">
<div class="user-header-left">
<a href="/" class="back-link">← Dashboard</a>
</div>
@@ -90,8 +90,10 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<button class="settings-icon" title="Settings (Alt+S)" id="settingsBtn" aria-label="Settings">⚙</button>
<?php endif; ?>
</div>
</div>
<div class="ticket-container ascii-frame-outer" data-priority="<?php echo $ticket["priority"]; ?>">
</header>
<main>
<h1 class="sr-only">Ticket: <?php echo htmlspecialchars($ticket["title"]); ?></h1>
<article class="ticket-container ascii-frame-outer" data-priority="<?php echo $ticket["priority"]; ?>">
<span class="bottom-left-corner">╚</span>
<span class="bottom-right-corner">╝</span>
@@ -132,7 +134,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<span class="age-icon"><?php echo $ageClass === 'age-critical' ? '⚠️' : ($ageClass === 'age-warning' ? '⏰' : '📅'); ?></span>
<span class="age-text">Last activity: <?php echo $ageStr; ?> ago</span>
</div>
<div class="ticket-user-info" style="font-size: 0.85rem; color: #666; margin-top: 0.25rem;">
<div class="ticket-user-info">
<?php
$creator = $ticket['creator_display_name'] ?? $ticket['creator_username'] ?? 'System';
echo "Created by: <strong>" . htmlspecialchars($creator) . "</strong>";
@@ -148,9 +150,9 @@ $nonce = SecurityHeadersMiddleware::getNonce();
}
?>
</div>
<div class="ticket-assignment" style="margin-top: 0.5rem;">
<label style="font-weight: 500; margin-right: 0.5rem;">Assigned to:</label>
<select id="assignedToSelect" class="assignment-select" style="padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green);">
<div class="ticket-assignment">
<label class="ticket-assignment-label">Assigned to:</label>
<select id="assignedToSelect" class="assignment-select">
<option value="">Unassigned</option>
<?php foreach ($allUsers as $user): ?>
<option value="<?php echo $user['user_id']; ?>"
@@ -162,10 +164,10 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<!-- Metadata Fields: Priority, Category, Type -->
<div class="ticket-metadata-fields" style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
<div class="ticket-metadata-fields">
<div class="metadata-field">
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Priority:</label>
<select id="prioritySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<label class="metadata-label">Priority:</label>
<select id="prioritySelect" class="metadata-select editable-metadata" disabled>
<option value="1" <?php echo $ticket['priority'] == 1 ? 'selected' : ''; ?>>P1 - Critical</option>
<option value="2" <?php echo $ticket['priority'] == 2 ? 'selected' : ''; ?>>P2 - High</option>
<option value="3" <?php echo $ticket['priority'] == 3 ? 'selected' : ''; ?>>P3 - Medium</option>
@@ -175,8 +177,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<div class="metadata-field">
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Category:</label>
<select id="categorySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<label class="metadata-label">Category:</label>
<select id="categorySelect" class="metadata-select editable-metadata" disabled>
<option value="Hardware" <?php echo $ticket['category'] == 'Hardware' ? 'selected' : ''; ?>>Hardware</option>
<option value="Software" <?php echo $ticket['category'] == 'Software' ? 'selected' : ''; ?>>Software</option>
<option value="Network" <?php echo $ticket['category'] == 'Network' ? 'selected' : ''; ?>>Network</option>
@@ -186,8 +188,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<div class="metadata-field">
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Type:</label>
<select id="typeSelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<label class="metadata-label">Type:</label>
<select id="typeSelect" class="metadata-select editable-metadata" disabled>
<option value="Maintenance" <?php echo $ticket['type'] == 'Maintenance' ? 'selected' : ''; ?>>Maintenance</option>
<option value="Install" <?php echo $ticket['type'] == 'Install' ? 'selected' : ''; ?>>Install</option>
<option value="Task" <?php echo $ticket['type'] == 'Task' ? 'selected' : ''; ?>>Task</option>
@@ -206,31 +208,31 @@ $nonce = SecurityHeadersMiddleware::getNonce();
$visUserModel = new UserModel($conn);
$allAvailableGroups = $visUserModel->getAllGroups();
?>
<div class="ticket-visibility-settings" style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--terminal-green);">
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 0.75rem;">
<div class="ticket-visibility-settings">
<div class="visibility-settings-grid">
<div class="metadata-field">
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-cyan); font-family: var(--font-mono); font-size: 0.85rem;">Visibility:</label>
<select id="visibilitySelect" class="metadata-select editable-metadata" disabled data-action="toggle-visibility-groups" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<label class="metadata-label metadata-label-cyan">Visibility:</label>
<select id="visibilitySelect" class="metadata-select editable-metadata" disabled data-action="toggle-visibility-groups">
<option value="public" <?php echo $currentVisibility == 'public' ? 'selected' : ''; ?>>Public</option>
<option value="internal" <?php echo $currentVisibility == 'internal' ? 'selected' : ''; ?>>Internal</option>
<option value="confidential" <?php echo $currentVisibility == 'confidential' ? 'selected' : ''; ?>>Confidential</option>
</select>
</div>
<div class="metadata-field" id="visibilityGroupsField" style="<?php echo $currentVisibility !== 'internal' ? 'display: none;' : ''; ?>">
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-cyan); font-family: var(--font-mono); font-size: 0.85rem;">Allowed Groups:</label>
<div class="visibility-groups-edit" style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
<div class="metadata-field" id="visibilityGroupsField" <?php echo $currentVisibility !== 'internal' ? 'style="display: none;"' : ''; ?>>
<label class="metadata-label metadata-label-cyan">Allowed Groups:</label>
<div class="visibility-groups-edit">
<?php foreach ($allAvailableGroups as $group):
$isChecked = in_array($group, $currentVisibilityGroups);
?>
<label style="display: flex; align-items: center; gap: 0.3rem; cursor: pointer;">
<label class="visibility-group-label">
<input type="checkbox" class="visibility-group-checkbox editable-metadata" disabled
value="<?php echo htmlspecialchars($group); ?>"
<?php echo $isChecked ? 'checked' : ''; ?>>
<span class="group-badge" style="font-size: 0.7rem;"><?php echo htmlspecialchars($group); ?></span>
<span class="group-badge"><?php echo htmlspecialchars($group); ?></span>
</label>
<?php endforeach; ?>
<?php if (empty($allAvailableGroups)): ?>
<span style="color: var(--text-muted); font-size: 0.85rem;">No groups available</span>
<span class="no-groups-message">No groups available</span>
<?php endif; ?>
</div>
</div>
@@ -293,7 +295,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
</div>
<div id="comments-tab" class="tab-content" role="tabpanel" aria-labelledby="comments-tab-btn">
<section id="comments-tab" class="tab-content" role="tabpanel" aria-labelledby="comments-tab-btn">
<div class="ascii-subsection-header">Comments Section</div>
<div class="comments-section">
<div class="ascii-frame-inner">
@@ -413,22 +415,22 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<div class="ascii-subsection-header">File Attachments</div>
<div class="attachments-container">
<!-- Upload Form -->
<div class="ascii-frame-inner" style="margin-bottom: 1rem;">
<div class="ascii-frame-inner frame-inner-spacing">
<h3>Upload Files</h3>
<div class="upload-zone" id="uploadZone">
<div class="upload-zone-content">
<div class="upload-icon">📁</div>
<p>Drag and drop files here or click to browse</p>
<p class="upload-hint">Max file size: <?php echo $GLOBALS['config']['MAX_UPLOAD_SIZE'] ? number_format($GLOBALS['config']['MAX_UPLOAD_SIZE'] / 1048576, 0) . 'MB' : '10MB'; ?></p>
<input type="file" id="fileInput" multiple style="display: none;" aria-label="Upload files">
<button type="button" id="browseFilesBtn" class="btn" style="margin-top: 1rem;">Browse Files</button>
<input type="file" id="fileInput" multiple class="sr-only" aria-label="Upload files">
<button type="button" id="browseFilesBtn" class="btn upload-browse-btn">Browse Files</button>
</div>
</div>
<div id="uploadProgress" style="display: none; margin-top: 1rem;">
<div id="uploadProgress" class="upload-progress" style="display: none;">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<p id="uploadStatus" style="margin-top: 0.5rem; color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.85rem;"></p>
<p id="uploadStatus" class="upload-status-text"></p>
</div>
</div>
@@ -446,14 +448,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<div class="ascii-subsection-header">Ticket Dependencies</div>
<div class="dependencies-container">
<!-- Add Dependency Form -->
<div class="ascii-frame-inner" style="margin-bottom: 1rem;">
<div class="ascii-frame-inner frame-inner-spacing">
<h3>Add Dependency</h3>
<div class="add-dependency-form" style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<div class="add-dependency-form">
<label for="dependencyTicketId" class="sr-only">Ticket ID for dependency</label>
<input type="text" id="dependencyTicketId" placeholder="Ticket ID (e.g., 123456789)" aria-label="Ticket ID for dependency"
style="flex: 1; min-width: 150px; padding: 0.5rem; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<input type="text" id="dependencyTicketId" class="dependency-input" placeholder="Ticket ID (e.g., 123456789)" aria-label="Ticket ID for dependency">
<label for="dependencyType" class="sr-only">Dependency type</label>
<select id="dependencyType" aria-label="Dependency type" style="padding: 0.5rem; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<select id="dependencyType" class="dependency-type-select" aria-label="Dependency type">
<option value="blocks">Blocks</option>
<option value="blocked_by">Blocked By</option>
<option value="relates_to">Relates To</option>
@@ -472,7 +473,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<!-- Dependent Tickets -->
<div class="ascii-frame-inner" style="margin-top: 1rem;">
<div class="ascii-frame-inner frame-inner-spacing-top">
<h3>Tickets That Depend On This</h3>
<div id="dependentsList" class="dependencies-list">
<p class="loading-text">Loading dependents...</p>
@@ -510,7 +511,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
</div>
</div>
</div>
</article>
</main>
<!-- END OUTER FRAME -->
<script nonce="<?php echo $nonce; ?>">
// Initialize the ticket view and attach event listeners (CSP-compliant)
@@ -685,14 +687,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</script>
<!-- Settings Modal (same as dashboard) -->
<div class="settings-modal" id="settingsModal" style="display: none;">
<div class="settings-modal" id="settingsModal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="ticketSettingsTitle">
<div class="settings-content">
<span class="bottom-left-corner">╚</span>
<span class="bottom-right-corner">╝</span>
<div class="settings-header">
<h3>⚙ System Preferences</h3>
<button class="close-settings" id="closeSettingsBtn">✗</button>
<h3 id="ticketSettingsTitle">⚙ System Preferences</h3>
<button class="close-settings" id="closeSettingsBtn" aria-label="Close settings">✗</button>
</div>
<div class="settings-body">
@@ -806,7 +808,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
endforeach;
if (empty(trim($GLOBALS['currentUser']['groups'] ?? ''))):
?>
<span style="color: var(--text-muted);">No groups assigned</span>
<span class="text-muted">No groups assigned</span>
<?php endif; ?>
</div>
</div>