diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index c1e90e2..7b59ed2 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -3850,32 +3850,107 @@ table td:nth-child(4) { } } -/* ===== COMPREHENSIVE MOBILE IMPROVEMENTS ===== */ +/* ===== MOBILE STYLES - PHONES (max 768px) ===== */ @media (max-width: 768px) { + /* ===== BASE RESETS ===== */ + * { + -webkit-tap-highlight-color: transparent; + } + + body { + padding-bottom: 70px; /* Space for mobile nav */ + } + /* Prevent iOS zoom on input focus */ - input, select, textarea { + input, select, textarea, button { font-size: 16px !important; } - /* Make sidebar a slide-out drawer */ + /* ===== HEADER - Simplified for mobile ===== */ + .user-header { + position: sticky; + top: 0; + z-index: 100; + padding: 0.5rem 0.75rem; + flex-wrap: nowrap; + gap: 0.5rem; + background: var(--bg-primary); + border-bottom: 2px solid var(--terminal-green); + } + + .user-header-left { + flex: 1; + min-width: 0; + } + + .user-header-left .app-title { + font-size: 1rem; + white-space: nowrap; + } + + .user-header-right { + display: flex; + align-items: center; + gap: 0.25rem; + flex-shrink: 0; + } + + .user-header-right .user-name { + display: none; /* Hide username on mobile */ + } + + .user-header-right .settings-icon { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; + border: none; + background: transparent; + } + + .admin-badge { + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + min-height: 44px; + } + + /* ===== HIDE DESKTOP ELEMENTS ===== */ + .ascii-banner-wrapper, + .sidebar-collapse-btn, + .sidebar-expand-btn { + display: none !important; + } + + /* ===== SIDEBAR AS SLIDE-OUT DRAWER ===== */ + .dashboard-layout { + flex-direction: column; + padding: 0; + } + .dashboard-sidebar { position: fixed; top: 0; - left: -100%; - width: 85%; + left: 0; + width: 85vw; max-width: 320px; height: 100vh; - max-height: 100vh; - z-index: 1000; + z-index: 1001; background: var(--bg-primary); - transition: left 0.3s ease; - padding: 1rem; + transform: translateX(-100%); + transition: transform 0.3s ease; + padding: 60px 1rem 1rem 1rem; overflow-y: auto; - box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); + box-shadow: 4px 0 20px rgba(0, 0, 0, 0.8); } .dashboard-sidebar.mobile-open { - left: 0; + transform: translateX(0); + } + + .dashboard-sidebar .sidebar-content { + display: block; } /* Mobile sidebar overlay */ @@ -3887,27 +3962,52 @@ table td:nth-child(4) { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); - z-index: 999; + z-index: 1000; } .mobile-sidebar-overlay.active { display: block; } - /* Mobile filter toggle button */ + /* Close button in sidebar */ + .mobile-sidebar-close { + display: flex !important; + position: absolute; + top: 10px; + right: 10px; + width: 44px; + height: 44px; + background: var(--bg-secondary); + border: 2px solid var(--terminal-green); + color: var(--terminal-green); + font-size: 1.5rem; + cursor: pointer; + align-items: center; + justify-content: center; + z-index: 10; + } + + /* ===== MAIN CONTENT AREA ===== */ + .dashboard-main { + width: 100%; + padding: 0 0.5rem; + } + + /* ===== MOBILE FILTER TOGGLE ===== */ .mobile-filter-toggle { display: flex !important; - align-items: center; - gap: 0.5rem; + width: 100%; padding: 0.75rem 1rem; + margin: 0.5rem 0; background: var(--bg-secondary); border: 2px solid var(--terminal-green); color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.9rem; + align-items: center; + justify-content: center; + gap: 0.5rem; cursor: pointer; - margin-bottom: 1rem; - width: 100%; } .mobile-filter-toggle:active { @@ -3915,233 +4015,323 @@ table td:nth-child(4) { color: var(--bg-primary); } - /* Close button in mobile sidebar */ - .mobile-sidebar-close { - display: block !important; - position: absolute; - top: 0.5rem; - right: 0.5rem; - width: 44px; - height: 44px; - background: transparent; - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-size: 1.5rem; - cursor: pointer; - z-index: 10; + /* ===== STATS WIDGETS ===== */ + .stats-widgets { + margin: 0.5rem 0; } - /* Better header on mobile */ - .user-header { - flex-wrap: wrap; - padding: 0.5rem; - gap: 0.5rem; - } - - .header-left { - flex: 1; - min-width: 0; - } - - .header-right { - width: 100%; - justify-content: space-between; - flex-wrap: wrap; - gap: 0.5rem; - } - - .app-title { - font-size: 1rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - /* Compact header buttons */ - .header-btn, .settings-btn, .new-ticket-btn { - padding: 0.5rem 0.75rem; - font-size: 0.85rem; - min-height: 44px; - } - - /* Table wrapper for horizontal scroll */ - .table-wrapper { - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - margin-bottom: 1rem; - } - - .table-wrapper table { - min-width: 600px; - } - - /* Larger touch targets for table rows */ - table td, table th { - padding: 12px 8px; - } - - table td a { - display: inline-block; - padding: 4px 0; - } - - /* Stats widgets - 2 per row */ .stats-row { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .stat-card { padding: 0.75rem; - min-height: 70px; + min-height: auto; } .stat-value { - font-size: 1.5rem; + font-size: 1.25rem; } .stat-label { - font-size: 0.7rem; + font-size: 0.65rem; } - /* Better toolbar on mobile */ - .toolbar { + /* ===== TOOLBAR - Stack vertically ===== */ + .dashboard-toolbar { flex-direction: column; - gap: 0.75rem; - } - - .toolbar-search { - width: 100%; - order: -1; - } - - .toolbar-actions { - width: 100%; - flex-wrap: wrap; gap: 0.5rem; - } - - .toolbar-actions .btn { - flex: 1; - min-width: 100px; - text-align: center; - } - - /* Full width modals on mobile */ - .modal-overlay { padding: 0.5rem; - align-items: flex-start; - padding-top: 2rem; - } - - .modal-content { - width: 100% !important; - max-width: 100% !important; - max-height: calc(100vh - 4rem); margin: 0; } - .modal-body { - max-height: calc(100vh - 12rem); - overflow-y: auto; - } - - /* Better form elements */ - .modal-body input, - .modal-body select, - .modal-body textarea { + .toolbar-left { width: 100%; - min-height: 44px; - padding: 0.75rem; - margin-bottom: 0.75rem; - } - - .modal-footer { flex-direction: column; gap: 0.5rem; } - .modal-footer button { + .toolbar-left .dashboard-title { + display: none; /* Hide title, it's in header */ + } + + .toolbar-left .toolbar-search { width: 100%; - min-height: 48px; - } - - /* Settings modal improvements */ - .settings-content { - width: 100% !important; - max-width: 100% !important; - height: auto; - max-height: 90vh; - } - - /* Better pagination */ - .pagination { + display: flex; flex-wrap: wrap; - justify-content: center; - gap: 0.25rem; + gap: 0.5rem; } - .pagination button, - .pagination a { + .toolbar-search .search-box { + flex: 1; + min-width: 0; + min-height: 44px; + padding: 0.5rem 0.75rem; + } + + .toolbar-search .btn { + min-height: 44px; + padding: 0.5rem 0.75rem; + } + + .toolbar-search .btn-secondary { + display: none; /* Hide advanced search button */ + } + + .clear-search-btn { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + } + + .toolbar-center { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: space-between; + align-items: center; + } + + .toolbar-center .view-toggle { + order: 1; + } + + .toolbar-center .create-ticket { + order: 2; + flex: 1; + min-height: 44px; + } + + .toolbar-center .ticket-count { + order: 3; + width: 100%; + text-align: center; + font-size: 0.8rem; + padding: 0.25rem; + } + + .toolbar-center .export-dropdown { + display: none; /* Hide export on mobile */ + } + + .view-toggle { + display: flex; + } + + .view-btn { min-width: 44px; min-height: 44px; padding: 0.5rem; } - /* Admin dropdown improvements */ - .admin-dropdown { - position: static; + .toolbar-right { + display: none; /* Hide pagination in toolbar - show at bottom */ } + /* ===== TABLE WRAPPER ===== */ + .ascii-frame-outer { + margin: 0.5rem 0; + border-width: 2px; + } + + .ascii-section-header { + font-size: 0.9rem; + padding: 0.5rem; + } + + .ascii-content { + padding: 0; + } + + .ascii-frame-inner { + padding: 0; + border: none; + } + + .table-wrapper { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + .table-wrapper table { + min-width: 700px; + } + + table { + font-size: 0.8rem; + } + + table th, + table td { + padding: 0.75rem 0.5rem; + white-space: nowrap; + } + + /* Make ticket ID and title columns wider */ + table th:nth-child(1), + table td:nth-child(1) { + min-width: 100px; + } + + table th:nth-child(3), + table td:nth-child(3) { + min-width: 200px; + white-space: normal; + } + + /* Link touch targets */ + table td a { + display: inline-block; + padding: 0.5rem 0; + min-height: 44px; + line-height: 1.5; + } + + /* ===== BULK ACTIONS ===== */ + .bulk-actions-inline { + position: fixed; + bottom: 70px; /* Above mobile nav */ + left: 0; + right: 0; + background: var(--bg-secondary); + border-top: 2px solid var(--terminal-green); + padding: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + z-index: 99; + } + + .bulk-actions-inline button { + flex: 1 1 calc(50% - 0.5rem); + min-height: 44px; + font-size: 0.8rem; + } + + /* ===== PAGINATION - Bottom of page ===== */ + .pagination { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.25rem; + padding: 1rem 0.5rem; + margin-bottom: 1rem; + } + + .pagination button { + min-width: 40px; + min-height: 44px; + padding: 0.5rem; + font-size: 0.9rem; + } + + /* ===== MODALS ===== */ + .modal-overlay { + padding: 0; + align-items: flex-end; + } + + .modal-content { + width: 100% !important; + max-width: 100% !important; + max-height: 90vh; + border-radius: 12px 12px 0 0; + margin: 0; + } + + .modal-body { + max-height: 60vh; + overflow-y: auto; + padding: 1rem; + } + + .modal-body input, + .modal-body select, + .modal-body textarea { + width: 100%; + min-height: 48px; + padding: 0.75rem; + margin-bottom: 0.75rem; + font-size: 16px; + } + + .modal-footer { + flex-direction: column; + gap: 0.5rem; + padding: 1rem; + border-top: 1px solid var(--border-color); + } + + .modal-footer button { + width: 100%; + min-height: 50px; + font-size: 1rem; + } + + /* ===== SETTINGS MODAL ===== */ + .settings-modal { + align-items: flex-end; + } + + .settings-content { + width: 100% !important; + max-width: 100% !important; + max-height: 85vh; + border-radius: 12px 12px 0 0; + } + + /* ===== ADMIN DROPDOWN ===== */ .admin-dropdown-content { position: fixed; left: 0; right: 0; - top: auto; bottom: 0; + top: auto; width: 100%; - max-height: 50vh; + max-height: 60vh; overflow-y: auto; - border-radius: 0; + border-radius: 12px 12px 0 0; + z-index: 1002; } .admin-dropdown-content a { - padding: 1rem; - min-height: 48px; + padding: 1rem 1.5rem; + min-height: 50px; + display: flex; + align-items: center; + font-size: 1rem; } - /* Bulk action bar on mobile */ - .bulk-action-bar { - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 100; - flex-wrap: wrap; + /* ===== KANBAN VIEW ===== */ + .kanban-board { + grid-template-columns: 1fr; + gap: 1rem; + } + + .kanban-column { + min-height: auto; + } + + .kanban-column-header { padding: 0.75rem; - gap: 0.5rem; - max-height: 50vh; - overflow-y: auto; + font-size: 0.9rem; } - .bulk-action-bar button { - flex: 1 1 calc(50% - 0.5rem); - min-height: 44px; + .kanban-cards { + padding: 0.5rem; + max-height: none; } - /* View toggle more accessible */ - .view-toggle { - margin-bottom: 1rem; + .ticket-card { + padding: 0.75rem; } - .view-btn { - flex: 1; - min-height: 48px; - } - - /* Better quick actions */ + /* ===== QUICK ACTIONS ===== */ .quick-actions { display: flex; gap: 0.25rem; @@ -4151,45 +4341,117 @@ table td:nth-child(4) { min-width: 36px; min-height: 36px; padding: 0.25rem; + font-size: 0.9rem; + } + + /* ===== MOBILE BOTTOM NAV ===== */ + .mobile-bottom-nav { + display: flex !important; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 60px; + background: var(--bg-primary); + border-top: 2px solid var(--terminal-green); + z-index: 100; + padding: 0; + } + + .mobile-bottom-nav a, + .mobile-bottom-nav button { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.25rem; + background: transparent; + border: none; + color: var(--terminal-green); + text-decoration: none; + font-size: 0.65rem; + font-family: var(--font-mono); + padding: 0.5rem; + } + + .mobile-bottom-nav .nav-icon { + font-size: 1.25rem; + } + + .mobile-bottom-nav a:active, + .mobile-bottom-nav button:active { + background: rgba(0, 255, 65, 0.2); + } + + /* ===== HIDE PREVIEW POPUP ON MOBILE ===== */ + .ticket-preview-popup { + display: none !important; } } -/* Extra small screens */ +/* ===== EXTRA SMALL PHONES (max 480px) ===== */ @media (max-width: 480px) { - .app-title { + .user-header-left .app-title { font-size: 0.9rem; } .stats-row { - grid-template-columns: 1fr; + grid-template-columns: 1fr 1fr; } - .stat-card { - padding: 1rem; + .stat-value { + font-size: 1.1rem; + } + + .stat-label { + font-size: 0.6rem; + } + + /* Hide more table columns on very small screens */ + .table-wrapper table { + min-width: 500px; } - /* Hide certain table columns */ table th:nth-child(4), table td:nth-child(4), - table th:nth-child(6), - table td:nth-child(6) { + table th:nth-child(7), + table td:nth-child(7), + table th:nth-child(8), + table td:nth-child(8) { display: none; } - .toolbar-actions .btn span { - display: none; - } - - .header-right { - justify-content: flex-end; - } - - .new-ticket-btn span { - display: none; - } - - .new-ticket-btn::before { - content: '+'; - font-size: 1.2rem; + .toolbar-center .create-ticket { + font-size: 0.8rem; + padding: 0.5rem; + } +} + +/* ===== LANDSCAPE PHONE ===== */ +@media (max-width: 768px) and (orientation: landscape) { + body { + padding-bottom: 50px; + } + + .mobile-bottom-nav { + height: 50px; + } + + .mobile-bottom-nav .nav-icon { + font-size: 1rem; + } + + .mobile-bottom-nav a, + .mobile-bottom-nav button { + font-size: 0.6rem; + } + + .modal-content { + max-height: 80vh; + } + + .modal-body { + max-height: 50vh; } } diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js index cfec4ad..62c7905 100644 --- a/assets/js/dashboard.js +++ b/assets/js/dashboard.js @@ -54,13 +54,11 @@ function closeMobileSidebar() { document.body.style.overflow = ''; } -// Initialize mobile sidebar elements +// Initialize mobile elements function initMobileSidebar() { const sidebar = document.getElementById('dashboardSidebar'); const dashboardMain = document.querySelector('.dashboard-main'); - if (!sidebar || !dashboardMain) return; - // Create overlay if it doesn't exist if (!document.getElementById('mobileSidebarOverlay')) { const overlay = document.createElement('div'); @@ -70,26 +68,50 @@ function initMobileSidebar() { document.body.appendChild(overlay); } - // Create mobile filter toggle button if it doesn't exist - if (!document.getElementById('mobileFilterToggle')) { + // Create mobile filter toggle button + if (dashboardMain && !document.getElementById('mobileFilterToggle')) { const toggleBtn = document.createElement('button'); toggleBtn.id = 'mobileFilterToggle'; toggleBtn.className = 'mobile-filter-toggle'; - toggleBtn.innerHTML = ' Filters & Options'; + toggleBtn.innerHTML = '☰ Filters & Search Options'; toggleBtn.onclick = openMobileSidebar; - toggleBtn.style.display = 'none'; // Hidden by default, shown via CSS media query dashboardMain.insertBefore(toggleBtn, dashboardMain.firstChild); } - // Create close button inside sidebar if it doesn't exist - if (!sidebar.querySelector('.mobile-sidebar-close')) { + // Create close button inside sidebar + if (sidebar && !sidebar.querySelector('.mobile-sidebar-close')) { const closeBtn = document.createElement('button'); closeBtn.className = 'mobile-sidebar-close'; closeBtn.innerHTML = '×'; closeBtn.onclick = closeMobileSidebar; - closeBtn.style.display = 'none'; // Hidden by default, shown via CSS media query sidebar.insertBefore(closeBtn, sidebar.firstChild); } + + // Create mobile bottom navigation + if (!document.getElementById('mobileBottomNav')) { + const nav = document.createElement('nav'); + nav.id = 'mobileBottomNav'; + nav.className = 'mobile-bottom-nav'; + nav.innerHTML = ` + + 🏠 + Home + + + + + New + + + `; + document.body.appendChild(nav); + } } // Restore sidebar state on page load diff --git a/views/CreateTicketView.php b/views/CreateTicketView.php index 604ebb1..18068dc 100644 --- a/views/CreateTicketView.php +++ b/views/CreateTicketView.php @@ -8,9 +8,9 @@ Create New Ticket - - - + + + - - + + - - - + + +