feat: Implement dramatic ANSI art terminal redesign - Phase 1-3
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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: '> ';
|
||||
|
||||
Reference in New Issue
Block a user