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>