From aff2b92bead01a80a1e26558b2821e1cd8fd5faf Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Wed, 7 Jan 2026 10:34:56 -0500 Subject: [PATCH] feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- assets/css/dashboard.css | 229 ++++++++++++++++++++++++++++++++++ assets/css/ticket.css | 59 +++++---- views/DashboardView.php | 238 +++++++++++++++++++++-------------- views/TicketView.php | 261 ++++++++++++++++++++++----------------- 4 files changed, 560 insertions(+), 227 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 471e47e..8f1de8d 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -126,6 +126,235 @@ h1 { .ascii-box[data-priority="4"] { border-color: var(--priority-4); } .ascii-box[data-priority="5"] { border-color: var(--priority-5); } +/* ===== NESTED ASCII FRAME SYSTEM ===== */ + +/* Main outer container - Heavy double border */ +.ascii-frame-outer { + position: relative; + border: 3px double var(--terminal-green); + padding: 0; + background: var(--bg-primary); + margin-bottom: 2rem; +} + +.ascii-frame-outer::before { + content: '╔'; + position: absolute; + top: -3px; + left: -3px; + font-size: 1.5rem; + color: var(--terminal-green); + line-height: 1; + z-index: 10; +} + +.ascii-frame-outer::after { + content: '╗'; + position: absolute; + top: -3px; + right: -3px; + font-size: 1.5rem; + color: var(--terminal-green); + line-height: 1; + z-index: 10; +} + +/* Bottom corners as separate elements */ +.bottom-left-corner, +.bottom-right-corner { + position: absolute; + bottom: -3px; + font-size: 1.5rem; + color: var(--terminal-green); + line-height: 1; + z-index: 10; +} + +.bottom-left-corner { + left: -3px; +} + +.bottom-right-corner { + right: -3px; +} + +/* Inner section frame - Single border */ +.ascii-frame-inner { + position: relative; + border: 2px solid var(--terminal-green); + padding: 1rem; + background: var(--bg-secondary); + margin: 1rem; +} + +.ascii-frame-inner::before { + content: '┌'; + position: absolute; + top: -2px; + left: -2px; + font-size: 1.2rem; + color: var(--terminal-green); + line-height: 1; +} + +.ascii-frame-inner::after { + content: '┐'; + position: absolute; + top: -2px; + right: -2px; + font-size: 1.2rem; + color: var(--terminal-green); + line-height: 1; +} + +/* Section headers with ASCII decoration */ +.ascii-section-header { + position: relative; + padding: 0.75rem 1.5rem; + background: var(--bg-primary); + border-bottom: 2px solid var(--terminal-green); + font-family: var(--font-mono); + font-weight: bold; + color: var(--terminal-amber); + text-shadow: var(--glow-amber); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.ascii-section-header::before { + content: '╠═══ '; + color: var(--terminal-green); + margin-right: 0.5rem; +} + +.ascii-section-header::after { + content: ' ═══╣'; + color: var(--terminal-green); + margin-left: 0.5rem; +} + +/* Subsection headers for nested areas */ +.ascii-subsection-header { + position: relative; + padding: 0.5rem 1rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--terminal-green); + font-family: var(--font-mono); + font-weight: bold; + color: var(--terminal-green); + text-transform: uppercase; + font-size: 0.9em; +} + +.ascii-subsection-header::before { + content: '├─── '; + color: var(--terminal-green); +} + +.ascii-subsection-header::after { + content: ' ───┤'; + color: var(--terminal-green); +} + +/* Section dividers */ +.ascii-divider { + height: 2px; + background: linear-gradient(90deg, + var(--terminal-green) 0%, + var(--terminal-green) 48%, + transparent 48%, + transparent 52%, + var(--terminal-green) 52%, + var(--terminal-green) 100%); + margin: 1.5rem 0; + position: relative; +} + +.ascii-divider::before { + content: '╞'; + position: absolute; + left: -2px; + top: -11px; + color: var(--terminal-green); + font-size: 1.2rem; +} + +.ascii-divider::after { + content: '╡'; + position: absolute; + right: -2px; + top: -11px; + color: var(--terminal-green); + font-size: 1.2rem; +} + +/* Content wrapper inside frames */ +.ascii-content { + padding: 1rem; + background: var(--bg-secondary); +} + +/* Priority-based color variants for outer frames */ +.ascii-frame-outer[data-priority="1"], +.ascii-frame-outer[data-priority="1"]::before, +.ascii-frame-outer[data-priority="1"]::after { + border-color: var(--priority-1); + color: var(--priority-1); +} + +.ascii-frame-outer[data-priority="1"] .bottom-left-corner, +.ascii-frame-outer[data-priority="1"] .bottom-right-corner { + color: var(--priority-1); +} + +.ascii-frame-outer[data-priority="2"], +.ascii-frame-outer[data-priority="2"]::before, +.ascii-frame-outer[data-priority="2"]::after { + border-color: var(--priority-2); + color: var(--priority-2); +} + +.ascii-frame-outer[data-priority="2"] .bottom-left-corner, +.ascii-frame-outer[data-priority="2"] .bottom-right-corner { + color: var(--priority-2); +} + +.ascii-frame-outer[data-priority="3"], +.ascii-frame-outer[data-priority="3"]::before, +.ascii-frame-outer[data-priority="3"]::after { + border-color: var(--priority-3); + color: var(--priority-3); +} + +.ascii-frame-outer[data-priority="3"] .bottom-left-corner, +.ascii-frame-outer[data-priority="3"] .bottom-right-corner { + color: var(--priority-3); +} + +.ascii-frame-outer[data-priority="4"], +.ascii-frame-outer[data-priority="4"]::before, +.ascii-frame-outer[data-priority="4"]::after { + border-color: var(--priority-4); + color: var(--priority-4); +} + +.ascii-frame-outer[data-priority="4"] .bottom-left-corner, +.ascii-frame-outer[data-priority="4"] .bottom-right-corner { + color: var(--priority-4); +} + +.ascii-frame-outer[data-priority="5"], +.ascii-frame-outer[data-priority="5"]::before, +.ascii-frame-outer[data-priority="5"]::after { + border-color: var(--priority-5); + color: var(--priority-5); +} + +.ascii-frame-outer[data-priority="5"] .bottom-left-corner, +.ascii-frame-outer[data-priority="5"] .bottom-right-corner { + color: var(--priority-5); +} + /* ===== TERMINAL PROMPT STYLES ===== */ .terminal-prompt::before { content: '> '; diff --git a/assets/css/ticket.css b/assets/css/ticket.css index 2ba1e99..83817bb 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -127,27 +127,16 @@ font-family: var(--font-mono); } -/* ASCII corner decorations */ -.ticket-container::before { - content: '╔'; - position: absolute; - top: -3px; - left: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - line-height: 1; - z-index: 10; +/* Compatibility with ascii-frame-outer - remove duplicate corners */ +.ticket-container.ascii-frame-outer { + padding: 0; } -.ticket-container::after { - content: '╗'; - position: absolute; - top: -3px; - right: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - line-height: 1; - z-index: 10; +/* Remove old corner styles when using ascii-frame-outer (new frame system handles this) */ +.ticket-container.ascii-frame-outer::before, +.ticket-container.ascii-frame-outer::after { + content: '╔' !important; + content: '╗' !important; } /* Priority-based border colors */ @@ -403,6 +392,13 @@ textarea.editable { border-radius: 0; } +/* Nested frame compatibility - remove border since ascii-frame-inner handles it */ +.ascii-frame-inner .comments-section { + border: none; + padding: 0; + margin-top: 0; +} + .comments-section h2 { font-family: var(--font-mono); color: var(--terminal-amber); @@ -442,13 +438,34 @@ textarea.editable { .comment { background: var(--bg-primary); padding: 15px; - border: 2px solid var(--terminal-green); + border: 1px solid var(--terminal-green); border-radius: 0; - margin-bottom: 15px; + margin-bottom: 1rem; position: relative; box-shadow: none; } +/* Add corner decorations to individual comments */ +.comment::before { + content: '┌─'; + position: absolute; + top: -1px; + left: -1px; + color: var(--terminal-green); + font-size: 1rem; + line-height: 1; +} + +.comment::after { + content: '┐'; + position: absolute; + top: -1px; + right: -1px; + color: var(--terminal-green); + font-size: 1rem; + line-height: 1; +} + .comment-header { display: flex; justify-content: space-between; diff --git a/views/DashboardView.php b/views/DashboardView.php index 79a47e4..6fb5482 100644 --- a/views/DashboardView.php +++ b/views/DashboardView.php @@ -101,104 +101,150 @@ }); -
-

Ticket Dashboard

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - Clear - -
-
- -
- Showing results for: "" - ( ticket found) -
- -
-
- Total Tickets: -
-
- +
+
+ \ No newline at end of file diff --git a/views/TicketView.php b/views/TicketView.php index 2f462b0..ceb5e44 100644 --- a/views/TicketView.php +++ b/views/TicketView.php @@ -145,81 +145,108 @@ function formatDetails($details, $actionType) { } } -
"> -
-

" data-field="title" disabled>

-
-
-
UUID
-