diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 7b59ed2..8755275 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -3951,6 +3951,65 @@ table td:nth-child(4) { .dashboard-sidebar .sidebar-content { display: block; + padding-top: 1rem; + } + + /* Mobile sidebar interior styling */ + .dashboard-sidebar .ascii-frame-inner { + padding: 1rem !important; + border: 2px solid var(--terminal-green) !important; + background: var(--bg-secondary) !important; + } + + .dashboard-sidebar .ascii-subsection-header { + font-size: 1.1rem; + margin-bottom: 1rem; + padding-bottom: 0.5rem; + } + + .dashboard-sidebar .filter-group { + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid rgba(0, 255, 65, 0.3); + } + + .dashboard-sidebar .filter-group:last-of-type { + border-bottom: none; + } + + .dashboard-sidebar .filter-group h4 { + font-size: 0.95rem; + margin-bottom: 0.75rem; + color: var(--terminal-amber); + } + + .dashboard-sidebar .filter-group label { + display: flex; + align-items: center; + padding: 0.75rem 0.5rem; + margin: 0.25rem 0; + min-height: 44px; + font-size: 0.95rem; + background: rgba(0, 255, 65, 0.05); + border-radius: 4px; + } + + .dashboard-sidebar .filter-group label:active { + background: rgba(0, 255, 65, 0.15); + } + + .dashboard-sidebar .filter-group input[type="checkbox"] { + width: 22px; + height: 22px; + margin-right: 0.75rem; + flex-shrink: 0; + } + + .dashboard-sidebar .btn { + width: 100%; + min-height: 48px; + margin-top: 0.5rem; + font-size: 1rem; } /* Mobile sidebar overlay */ diff --git a/assets/css/ticket.css b/assets/css/ticket.css index 981f7c1..e87c002 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -1620,66 +1620,141 @@ body.dark-mode .editable { font-size: 16px !important; } + /* Add padding at bottom for potential mobile nav */ + body { + padding-bottom: 70px; + } + + /* Better header on mobile */ + .user-header { + position: sticky; + top: 0; + z-index: 100; + padding: 0.5rem 0.75rem; + } + + .user-header-right .user-name { + display: none; + } + + .back-link { + font-size: 0.9rem; + padding: 0.5rem 0; + min-height: 44px; + display: inline-flex; + align-items: center; + } + + /* Ticket container */ + .ticket-container { + margin: 0.5rem; + border-width: 2px; + } + + .ascii-section-header { + font-size: 0.9rem; + padding: 0.5rem 0.75rem; + } + + .ascii-content { + padding: 0.5rem; + } + + .ascii-frame-inner { + padding: 0.75rem; + } + /* Better ticket header layout */ .ticket-header { flex-direction: column; align-items: flex-start; - gap: 1rem; - } - - .ticket-header-left { - width: 100%; - } - - .ticket-header-right { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - } - - .ticket-header-right .btn { - flex: 1; - min-width: 100px; - text-align: center; - min-height: 44px; - } - - /* Stack ticket metadata vertically */ - .ticket-meta-grid { - display: flex; - flex-direction: column; gap: 0.75rem; } - .ticket-meta-item { + .ticket-header h2 { + font-size: 1.1rem; + line-height: 1.3; + word-break: break-word; + } + + .ticket-subheader { + width: 100%; + } + + /* Ticket metadata fields - stack on mobile */ + .ticket-metadata-fields { + grid-template-columns: 1fr !important; + gap: 0.75rem !important; + } + + .metadata-field { display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid var(--border-color); + flex-direction: column; + gap: 0.25rem; } - .ticket-meta-label { - font-weight: bold; - min-width: 100px; + .metadata-field label { + font-size: 0.85rem !important; } - .ticket-meta-value { - text-align: right; - flex: 1; + .metadata-field select, + .metadata-select { + width: 100% !important; + min-height: 48px !important; + padding: 0.75rem !important; + font-size: 16px !important; } - /* Better select dropdowns */ - .ticket-meta-item select { - min-height: 44px; - padding: 0.5rem; - max-width: 60%; + /* Assignment select */ + .ticket-assignment { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-top: 0.75rem !important; + } + + .ticket-assignment label { + font-size: 0.85rem; + } + + .assignment-select, + #assignedToSelect { + width: 100% !important; + min-height: 48px !important; + padding: 0.75rem !important; + font-size: 16px !important; + } + + /* Ticket user info */ + .ticket-user-info { + font-size: 0.8rem !important; + line-height: 1.4; + } + + .ticket-id { + font-size: 0.85rem; + word-break: break-all; + } + + /* Status display and select */ + .status-display, + #statusDisplay { + display: block; + width: 100%; + text-align: center; + margin: 0.5rem 0; + } + + #statusSelect { + width: 100%; + min-height: 48px; + font-size: 16px !important; } /* Full width title on mobile */ - .ticket-title { - font-size: 1.1rem; + .ticket-title, + .title-input { + font-size: 1rem; word-break: break-word; } diff --git a/views/CreateTicketView.php b/views/CreateTicketView.php index 18068dc..430f1bc 100644 --- a/views/CreateTicketView.php +++ b/views/CreateTicketView.php @@ -8,9 +8,9 @@