diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 5d35437..7d51967 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -86,6 +86,99 @@ h1 { margin: 0; } +/* ===== USER HEADER - TERMINAL STYLE ===== */ +.user-header { + background: var(--bg-secondary); + padding: 0.5rem 1rem; + margin-left: 50px; /* Space for hamburger menu */ + color: var(--terminal-green); + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 2px solid var(--terminal-green); + box-sizing: border-box; + font-family: var(--font-mono); +} + +.user-header-left, +.user-header-right { + display: flex; + align-items: center; + gap: 0.75rem; + flex-shrink: 1; + min-width: 0; +} + +.app-title { + font-weight: bold; + font-size: 1rem; + color: var(--terminal-amber); + text-shadow: var(--glow-amber); + white-space: nowrap; +} + +.back-link { + color: var(--terminal-green); + text-decoration: none; + font-weight: bold; + font-size: 1rem; + white-space: nowrap; + text-shadow: var(--glow-green); +} + +.back-link:hover { + color: var(--terminal-amber); + text-shadow: var(--glow-amber); +} + +.user-name { + color: var(--terminal-green); + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.admin-badge { + background: transparent; + color: var(--priority-1); + padding: 0.2rem 0.5rem; + border: 2px solid var(--priority-1); + border-radius: 0; /* Terminal aesthetic - no rounded corners */ + font-size: 0.75rem; + font-weight: bold; + white-space: nowrap; + text-shadow: var(--glow-priority-1); + font-family: var(--font-mono); +} + +.admin-badge::before { + content: '['; + margin-right: 3px; +} + +.admin-badge::after { + content: ']'; + margin-left: 3px; +} + +/* Responsive design for smaller screens */ +@media (max-width: 768px) { + .user-header { + padding: 0.5rem 0.75rem; + margin-left: 0; /* Remove margin on mobile */ + } + + .app-title, + .back-link { + font-size: 0.9rem; + } + + .user-name { + font-size: 0.85rem; + } +} + /* ===== ASCII BORDER SYSTEM ===== */ .ascii-box { position: relative; @@ -575,7 +668,7 @@ h1 { margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); - border-radius: 8px; + border-radius: 0; box-shadow: var(--shadow); } @@ -827,7 +920,9 @@ td:nth-child(2) span::after { border: 2px solid var(--status-in-progress) !important; font-size: 0.875rem; font-weight: 500; - min-width: 100px; + min-width: 140px; + white-space: nowrap; + display: inline-block; font-family: var(--font-mono); text-shadow: 0 0 5px var(--status-in-progress), 0 0 10px var(--status-in-progress); } @@ -974,7 +1069,7 @@ input[type="checkbox"]:checked { background-color: #007cba; color: white; border: none; - border-radius: 5px; + border-radius: 0; cursor: pointer; font-size: 16px; transition: background-color 0.3s; @@ -989,7 +1084,7 @@ input[type="checkbox"]:checked { background-color: #6c757d; color: white; text-decoration: none; - border-radius: 5px; + border-radius: 0; font-size: 14px; transition: background-color 0.3s; } @@ -1004,7 +1099,7 @@ input[type="checkbox"]:checked { padding: 10px; background-color: #e7f3ff; border-left: 4px solid #007cba; - border-radius: 4px; + border-radius: 0; } /* Status Filter Dropdown */ @@ -1023,7 +1118,7 @@ input[type="checkbox"]:checked { padding: 8px 15px; background: var(--bg-secondary); border: 1px solid var(--border-color); - border-radius: 4px; + border-radius: 0; cursor: pointer; min-width: 120px; } @@ -1036,7 +1131,7 @@ input[type="checkbox"]:checked { background: var(--bg-secondary); min-width: 160px; box-shadow: var(--shadow); - border-radius: 4px; + border-radius: 0; padding: 10px; z-index: 100; border: 1px solid var(--border-color); @@ -1064,7 +1159,7 @@ input[type="checkbox"]:checked { background: #3b82f6; color: white; border: none; - border-radius: 4px; + border-radius: 0; cursor: pointer; } @@ -1257,7 +1352,7 @@ input[type="checkbox"]:checked { .save-btn, .cancel-btn { padding: 4px 8px; border: none; - border-radius: 3px; + border-radius: 0; cursor: pointer; font-size: 12px; min-width: 24px; @@ -1295,7 +1390,7 @@ input[type="checkbox"]:checked { text-decoration: none; background: var(--hover-bg); padding: 4px 8px; - border-radius: 4px; + border-radius: 0; display: inline-block; } @@ -1538,7 +1633,7 @@ th.sort-desc::after { padding: 1rem; background: var(--toolbar-bg, #1a202c); border: 1px solid var(--toolbar-border, #ffc107); - border-radius: 8px; + border-radius: 0; margin: 1rem 0; } @@ -1558,7 +1653,7 @@ th.sort-desc::after { background: var(--btn-bulk-bg, #007bff); color: white; border: none; - border-radius: 4px; + border-radius: 0; cursor: pointer; font-size: 0.9rem; transition: background 0.2s ease; @@ -1573,7 +1668,7 @@ th.sort-desc::after { background: var(--btn-secondary-bg, #6c757d); color: white; border: none; - border-radius: 4px; + border-radius: 0; cursor: pointer; font-size: 0.9rem; transition: background 0.2s ease; @@ -1623,7 +1718,7 @@ body.dark-mode .btn-secondary { .modal-content { background: var(--bg-primary, white); padding: 2rem; - border-radius: 8px; + border-radius: 0; min-width: 300px; max-width: 500px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -1650,7 +1745,7 @@ body.dark-mode .btn-secondary { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color, #ddd); - border-radius: 4px; + border-radius: 0; background: var(--bg-secondary, #f8f9fa); color: var(--text-primary, #333); } diff --git a/assets/css/ticket.css b/assets/css/ticket.css index 83817bb..603b886 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -42,6 +42,9 @@ text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.5px; + min-width: 140px; + white-space: nowrap; + display: inline-block; font-family: var(--font-mono); text-shadow: 0 0 5px var(--status-in-progress), 0 0 10px var(--status-in-progress); } @@ -323,7 +326,7 @@ .editable { padding: 10px; border: 1px solid var(--border-color); - border-radius: 6px; + border-radius: 0; background: var(--bg-primary); color: var(--text-primary); transition: all 0.3s ease; @@ -360,7 +363,7 @@ textarea.editable { .btn { padding: 10px 20px; border: none; - border-radius: 6px; + border-radius: 0; cursor: pointer; font-weight: 500; background: var(--bg-primary); @@ -599,7 +602,7 @@ textarea.editable { min-height: 100px; padding: 10px; border: 1px solid var(--border-color); - border-radius: 6px; + border-radius: 0; background: var(--bg-primary); } @@ -612,13 +615,13 @@ textarea.editable { .markdown-preview code { background: var(--bg-secondary); padding: 2px 4px; - border-radius: 4px; + border-radius: 0; } .markdown-preview pre { background: var(--bg-secondary); padding: 10px; - border-radius: 6px; + border-radius: 0; overflow-x: auto; } @@ -664,11 +667,11 @@ textarea.editable { } .slider.round { - border-radius: 24px; + border-radius: 0; } .slider.round:before { - border-radius: 50%; + border-radius: 0; } input:checked + .slider { @@ -695,7 +698,7 @@ input:checked + .slider:before { background: var(--bg-secondary); color: var(--text-primary); padding: 10px 20px; - border-radius: 6px; + border-radius: 0; border: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.3s ease; @@ -840,7 +843,7 @@ body.dark-mode .timeline-date { /* Status select dropdown */ .status-select { padding: 8px 16px; - border-radius: 6px; + border-radius: 0; font-weight: 500; text-transform: uppercase; font-size: 0.9em; diff --git a/views/CreateTicketView.php b/views/CreateTicketView.php index b17dbff..2c0a3fe 100644 --- a/views/CreateTicketView.php +++ b/views/CreateTicketView.php @@ -26,63 +26,6 @@ -