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

Switch to responsive card layout below 1400px for dashboard

Browse Source 
Major improvements:
- Replace table with card-based layout below 1400px width
- Cards show ticket ID, title, category, assignee, status, and actions
- Priority indicated by left border color
- Fully responsive from 1400px down to mobile

Mobile improvements (768px and below):
- Cards stack vertically with touch-friendly sizing
- Action buttons are full-width with 44px touch targets
- Meta info displayed in a clean row format
- Removed old table-based mobile styles

Sidebar collapse improvements:
- Collapsed state now truly saves space (0 width, no gap)
- Expand button is compact vertical text

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-31 11:33:40 -05:00
parent 99a96544cf
commit 79706f790d
2 changed files with 275 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
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=20260131b">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131c">
<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=20260131b"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131c"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131c"></script>
<script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
@@ -489,6 +489,48 @@ $nonce = SecurityHeadersMiddleware::getNonce();
?>
</tbody>
</table>
<!-- Responsive Card View (shown on smaller screens via CSS) -->
<div class="ticket-cards">
<?php
if (count($tickets) > 0) {
foreach($tickets as $row) {
$creator = $row['creator_display_name'] ?? $row['creator_username'] ?? 'System';
$assignedTo = $row['assigned_display_name'] ?? $row['assigned_username'] ?? 'Unassigned';
$statusClass = 'status-' . str_replace(' ', '-', $row['status']);
?>
<div class="ticket-card-row priority-<?php echo $row['priority']; ?>">
<div class="ticket-card-id">
<a href="/ticket/<?php echo $row['ticket_id']; ?>">#<?php echo $row['ticket_id']; ?></a>
</div>
<div class="ticket-card-main">
<div class="ticket-card-title"><?php echo htmlspecialchars($row['title']); ?></div>
<div class="ticket-card-meta">
<span>📁 <?php echo htmlspecialchars($row['category']); ?></span>
<span>👤 <?php echo htmlspecialchars($assignedTo); ?></span>
<span>📅 <?php echo date('M j', strtotime($row['updated_at'])); ?></span>
</div>
</div>
<div class="ticket-card-status <?php echo $statusClass; ?>">
<?php echo $row['status']; ?>
</div>
<div class="ticket-card-actions">
<button data-action="view-ticket" data-ticket-id="<?php echo $row['ticket_id']; ?>" title="View">👁</button>
<button data-action="quick-status" data-ticket-id="<?php echo $row['ticket_id']; ?>" data-status="<?php echo $row['status']; ?>" title="Status">🔄</button>
</div>
</div>
<?php
}
} else {
?>
<div class="ticket-card-empty">
<span>No tickets found</span>
</div>
<?php
}
?>
</div>
</div><!-- End table-wrapper -->
</div>
</div>