diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index b8a8dc8..d67212f 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -707,40 +707,188 @@ h1 { .ticket-card-row { grid-template-columns: auto 1fr auto auto; } + + .ticket-card-actions button { + min-width: 40px; + min-height: 40px; + } } /* Small tablet (600px - 899px) */ @media (min-width: 600px) and (max-width: 899px) { + .dashboard-layout { + gap: 0.75rem; + padding: 0 0.5rem; + } + .dashboard-sidebar { width: 180px; } .stats-widgets .stats-row { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); + gap: 0.5rem; + } + + .stat-card { + padding: 0.75rem; + } + + .ticket-cards { + gap: 0.5rem; } .ticket-card-row { - grid-template-columns: 1fr auto; - grid-template-rows: auto auto; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.75rem; } .ticket-card-id { - grid-column: 1; - grid-row: 1; + font-size: 0.9rem; + font-weight: bold; } .ticket-card-main { - grid-column: 1 / -1; - grid-row: 2; + flex: 1 1 100%; + order: 2; + } + + .ticket-card-title { + font-size: 1rem; + margin-bottom: 0.5rem; } .ticket-card-status { - grid-column: 2; - grid-row: 1; + order: 1; + margin-left: auto; } .ticket-card-actions { - display: none; /* Hide on small tablets, access via tap */ + flex: 1 1 100%; + order: 3; + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; + padding-top: 0.5rem; + border-top: 1px solid rgba(0, 255, 65, 0.2); + } + + .ticket-card-actions button { + flex: 1; + min-height: 44px; + font-size: 1rem; + } +} + +/* Large phone / Small tablet (480px - 599px) */ +@media (min-width: 480px) and (max-width: 599px) { + body { + padding: 0.5rem; + } + + .user-header { + padding: 0.5rem 0.75rem; + } + + .dashboard-layout { + flex-direction: column; + gap: 0.5rem; + padding: 0; + } + + .dashboard-sidebar { + display: none; + } + + .mobile-filter-toggle { + display: flex !important; + } + + .stats-widgets { + margin: 0.5rem 0; + } + + .stats-widgets .stats-row { + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; + } + + .stat-card { + padding: 0.75rem; + } + + .stat-value { + font-size: 1.5rem; + } + + .stat-label { + font-size: 0.7rem; + } + + .dashboard-toolbar { + padding: 0.5rem; + gap: 0.5rem; + } + + .ascii-frame-outer { + margin: 0.5rem 0; + border-width: 2px; + } + + .ticket-cards { + padding: 0.5rem; + gap: 0.5rem; + } + + .ticket-card-row { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; + border-left-width: 5px; + } + + .ticket-card-id { + font-size: 1rem; + font-weight: bold; + } + + .ticket-card-id a { + padding: 0.25rem 0; + display: inline-block; + } + + .ticket-card-title { + font-size: 1.1rem; + line-height: 1.4; + } + + .ticket-card-meta { + font-size: 0.85rem; + gap: 1rem; + } + + .ticket-card-status { + align-self: flex-start; + padding: 0.4rem 0.75rem; + font-size: 0.85rem; + } + + .ticket-card-actions { + display: flex; + gap: 0.5rem; + margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(0, 255, 65, 0.2); + } + + .ticket-card-actions button { + flex: 1; + min-height: 48px; + font-size: 1.2rem; + border-width: 2px; } } @@ -5252,13 +5400,14 @@ table td:nth-child(4) { /* ===== TICKET CARDS - Mobile optimized ===== */ .ascii-frame-outer { - margin: 0.5rem 0; + margin: 0.25rem 0; border-width: 2px; } .ascii-section-header { - font-size: 0.9rem; - padding: 0.5rem; + font-size: 1rem; + padding: 0.75rem; + background: var(--bg-primary); } .ascii-content { @@ -5274,35 +5423,58 @@ table td:nth-child(4) { width: 100%; } - /* Hide the ::before header on mobile - we use a simpler one */ + /* Hide the ::before header on mobile - cleaner look */ .table-wrapper::before { display: none; } - /* Mobile-optimized card layout */ + /* Mobile-optimized card layout - full width, touch friendly */ .ticket-cards { - padding: 0.25rem; - gap: 0.25rem; + padding: 0; + gap: 0; } .ticket-card-row { display: flex; flex-direction: column; - gap: 0.5rem; - padding: 0.75rem; - border-left-width: 4px; + gap: 0.75rem; + padding: 1rem; + border-left-width: 5px; + border-bottom: 1px solid rgba(0, 255, 65, 0.3); + background: var(--bg-secondary); + } + + .ticket-card-row:last-child { + border-bottom: none; + } + + .ticket-card-row:active { + background: rgba(0, 255, 65, 0.15); + } + + /* Header row with ID and status */ + .ticket-card-header { + display: flex; + justify-content: space-between; + align-items: center; } .ticket-card-id { - font-size: 0.9rem; + font-size: 1rem; font-weight: bold; } .ticket-card-id a { display: inline-block; - padding: 0.25rem 0; + padding: 0.5rem 0; min-height: 44px; - line-height: 2; + line-height: 1.5; + color: var(--terminal-cyan); + text-decoration: none; + } + + .ticket-card-id a:active { + color: var(--terminal-amber); } .ticket-card-main { @@ -5310,35 +5482,63 @@ table td:nth-child(4) { } .ticket-card-title { - font-size: 1rem; + font-size: 1.1rem; line-height: 1.4; - margin-bottom: 0.5rem; + margin-bottom: 0.75rem; + color: var(--terminal-green); } .ticket-card-meta { - font-size: 0.8rem; - gap: 0.75rem; + display: flex; + flex-wrap: wrap; + font-size: 0.85rem; + gap: 0.5rem 1rem; + color: var(--text-muted); + } + + .ticket-card-meta span { + display: inline-flex; + align-items: center; + gap: 0.25rem; } .ticket-card-status { align-self: flex-start; - padding: 0.35rem 0.75rem; - font-size: 0.8rem; + padding: 0.5rem 1rem; + font-size: 0.85rem; + font-weight: bold; } .ticket-card-actions { display: flex; - gap: 0.5rem; + gap: 0.75rem; margin-top: 0.5rem; - padding-top: 0.5rem; + padding-top: 0.75rem; border-top: 1px solid rgba(0, 255, 65, 0.2); } .ticket-card-actions button { flex: 1; - min-height: 44px; - padding: 0.5rem; - font-size: 1.1rem; + min-height: 48px; + padding: 0.75rem; + font-size: 1.2rem; + border-width: 2px; + border-radius: 0; + background: var(--bg-primary); + color: var(--terminal-green); + border-color: var(--terminal-green); + } + + .ticket-card-actions button:active { + background: var(--terminal-green); + color: var(--bg-primary); + } + + /* Empty state for mobile */ + .ticket-card-empty { + padding: 3rem 1rem; + text-align: center; + font-size: 1rem; } /* ===== BULK ACTIONS ===== */