Sidebar with no hamburger menu
This commit is contained in:
@@ -28,158 +28,195 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ASCII Banner Container -->
|
||||
<div id="ascii-banner-container" style="margin: 2rem auto; text-align: center; max-width: 1200px;"></div>
|
||||
<!-- Collapsible ASCII Banner -->
|
||||
<div class="ascii-banner-wrapper collapsed">
|
||||
<button class="banner-toggle" onclick="toggleBanner()">
|
||||
<span class="toggle-icon">▼</span> ASCII Banner
|
||||
</button>
|
||||
<div id="ascii-banner-container" class="banner-content"></div>
|
||||
</div>
|
||||
<script>
|
||||
// Render ASCII banner on page load with typewriter effect
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderResponsiveBanner('#ascii-banner-container', 3);
|
||||
});
|
||||
function toggleBanner() {
|
||||
const wrapper = document.querySelector('.ascii-banner-wrapper');
|
||||
const icon = document.querySelector('.toggle-icon');
|
||||
wrapper.classList.toggle('collapsed');
|
||||
icon.textContent = wrapper.classList.contains('collapsed') ? '▼' : '▲';
|
||||
|
||||
// Render banner on first expand (no animation for instant display)
|
||||
if (!wrapper.classList.contains('collapsed') && !wrapper.dataset.rendered) {
|
||||
renderResponsiveBanner('#ascii-banner-container', 0); // Speed 0 = no animation
|
||||
wrapper.dataset.rendered = 'true';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- OUTER FRAME: Dashboard Container -->
|
||||
<!-- Dashboard Layout with Sidebar -->
|
||||
<div class="dashboard-layout">
|
||||
<!-- Left Sidebar with Filters -->
|
||||
<aside class="dashboard-sidebar">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="ascii-subsection-header">Filters</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<div class="filter-group">
|
||||
<h4>Status</h4>
|
||||
<?php
|
||||
$currentStatus = isset($_GET['status']) ? explode(',', $_GET['status']) : ['Open', 'In Progress'];
|
||||
$allStatuses = ['Open', 'In Progress', 'Closed'];
|
||||
foreach ($allStatuses as $status):
|
||||
?>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
name="status"
|
||||
value="<?php echo $status; ?>"
|
||||
<?php echo in_array($status, $currentStatus) ? 'checked' : ''; ?>>
|
||||
<?php echo $status; ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Category Filter -->
|
||||
<div class="filter-group">
|
||||
<h4>Category</h4>
|
||||
<?php
|
||||
$currentCategories = isset($_GET['category']) ? explode(',', $_GET['category']) : [];
|
||||
foreach ($categories as $cat):
|
||||
?>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
name="category"
|
||||
value="<?php echo $cat; ?>"
|
||||
<?php echo in_array($cat, $currentCategories) ? 'checked' : ''; ?>>
|
||||
<?php echo htmlspecialchars($cat); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Type Filter -->
|
||||
<div class="filter-group">
|
||||
<h4>Type</h4>
|
||||
<?php
|
||||
$currentTypes = isset($_GET['type']) ? explode(',', $_GET['type']) : [];
|
||||
foreach ($types as $type):
|
||||
?>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
name="type"
|
||||
value="<?php echo $type; ?>"
|
||||
<?php echo in_array($type, $currentTypes) ? 'checked' : ''; ?>>
|
||||
<?php echo htmlspecialchars($type); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<button id="apply-filters-btn" class="btn">Apply Filters</button>
|
||||
<button id="clear-filters-btn" class="btn btn-secondary">Clear All</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="dashboard-main">
|
||||
|
||||
<!-- CONDENSED TOOLBAR: Combined Header, Search, Actions, Pagination -->
|
||||
<div class="dashboard-toolbar">
|
||||
<!-- Left: Title + Search -->
|
||||
<div class="toolbar-left">
|
||||
<h1 class="dashboard-title">🎫 Tickets</h1>
|
||||
<form method="GET" action="" class="toolbar-search">
|
||||
<!-- Preserve existing parameters -->
|
||||
<?php if (isset($_GET['status'])): ?>
|
||||
<input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['category'])): ?>
|
||||
<input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['type'])): ?>
|
||||
<input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['sort'])): ?>
|
||||
<input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['dir'])): ?>
|
||||
<input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<input type="text"
|
||||
name="search"
|
||||
placeholder="🔍 Search tickets..."
|
||||
class="search-box"
|
||||
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
|
||||
<button type="submit" class="btn search-btn">Search</button>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<a href="?" class="clear-search-btn">✗</a>
|
||||
<?php endif; ?>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Center: Actions + Count -->
|
||||
<div class="toolbar-center">
|
||||
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">+ New Ticket</button>
|
||||
<span class="ticket-count">Total: <?php echo $totalTickets; ?></span>
|
||||
</div>
|
||||
|
||||
<!-- Right: Pagination -->
|
||||
<div class="toolbar-right">
|
||||
<div class="pagination">
|
||||
<?php
|
||||
$currentParams = $_GET;
|
||||
|
||||
// Previous page button
|
||||
if ($page > 1) {
|
||||
$currentParams['page'] = $page - 1;
|
||||
$prevUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
|
||||
}
|
||||
|
||||
// Page number buttons
|
||||
for ($i = 1; $i <= $totalPages; $i++) {
|
||||
$activeClass = ($i === $page) ? 'active' : '';
|
||||
$currentParams['page'] = $i;
|
||||
$pageUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
|
||||
}
|
||||
|
||||
// Next page button
|
||||
if ($page < $totalPages) {
|
||||
$currentParams['page'] = $page + 1;
|
||||
$nextUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<div class="search-results-info">
|
||||
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
||||
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- TICKET TABLE WITH INLINE BULK ACTIONS -->
|
||||
<div class="ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<!-- SECTION 1: Dashboard Header & Actions -->
|
||||
<div class="ascii-section-header">Dashboard Control Center</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="dashboard-header">
|
||||
<h1>Ticket Dashboard</h1>
|
||||
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 2: Search & Filter -->
|
||||
<div class="ascii-section-header">Search & Filter</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<form method="GET" action="" class="search-form">
|
||||
<!-- Preserve existing parameters -->
|
||||
<?php if (isset($_GET['status'])): ?>
|
||||
<input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['show_all'])): ?>
|
||||
<input type="hidden" name="show_all" value="<?php echo htmlspecialchars($_GET['show_all']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['category'])): ?>
|
||||
<input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['type'])): ?>
|
||||
<input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['sort'])): ?>
|
||||
<input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['dir'])): ?>
|
||||
<input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<input type="text"
|
||||
name="search"
|
||||
placeholder="Search tickets..."
|
||||
class="search-box"
|
||||
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
|
||||
<button type="submit" class="search-btn">Search</button>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<a href="?" class="clear-search-btn">Clear</a>
|
||||
<?php endif; ?>
|
||||
</form>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<div class="search-results-info">
|
||||
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
||||
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 3: Table Controls -->
|
||||
<div class="ascii-section-header">Table Controls</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="table-controls">
|
||||
<div class="ticket-count">
|
||||
Total Tickets: <?php echo $totalTickets; ?>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div class="pagination">
|
||||
<?php
|
||||
$currentParams = $_GET;
|
||||
|
||||
// Previous page button
|
||||
if ($page > 1) {
|
||||
$currentParams['page'] = $page - 1;
|
||||
$prevUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
|
||||
}
|
||||
|
||||
// Page number buttons
|
||||
for ($i = 1; $i <= $totalPages; $i++) {
|
||||
$activeClass = ($i === $page) ? 'active' : '';
|
||||
$currentParams['page'] = $i;
|
||||
$pageUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
|
||||
}
|
||||
|
||||
// Next page button
|
||||
if ($page < $totalPages) {
|
||||
$currentParams['page'] = $page + 1;
|
||||
$nextUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="settings-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 4: Bulk Actions (if admin) -->
|
||||
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
||||
<div class="ascii-section-header">Bulk Operations</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="bulk-actions-toolbar" style="display: none;">
|
||||
<div class="bulk-actions-info">
|
||||
<span id="selected-count">0</span> tickets selected
|
||||
</div>
|
||||
<div class="bulk-actions-buttons">
|
||||
<button onclick="bulkClose()" class="btn btn-bulk">Close Selected</button>
|
||||
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign Selected</button>
|
||||
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Change Priority</button>
|
||||
<button onclick="clearSelection()" class="btn btn-secondary">Clear Selection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- SECTION 5: Ticket Table -->
|
||||
<div class="ascii-section-header">Ticket List</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<!-- Inline Bulk Actions (appears above table when items selected) -->
|
||||
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
||||
<div class="bulk-actions-inline" style="display: none;">
|
||||
<span id="selected-count">0</span> tickets selected
|
||||
<button onclick="bulkClose()" class="btn btn-bulk">Close</button>
|
||||
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign</button>
|
||||
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Priority</button>
|
||||
<button onclick="clearSelection()" class="btn btn-secondary">Clear</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Table -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
Reference in New Issue
Block a user