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="4"] { border-color: var(--priority-4); }
|
||||||
.ascii-box[data-priority="5"] { border-color: var(--priority-5); }
|
.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 STYLES ===== */
|
||||||
.terminal-prompt::before {
|
.terminal-prompt::before {
|
||||||
content: '> ';
|
content: '> ';
|
||||||
|
|||||||
@@ -127,27 +127,16 @@
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ASCII corner decorations */
|
/* Compatibility with ascii-frame-outer - remove duplicate corners */
|
||||||
.ticket-container::before {
|
.ticket-container.ascii-frame-outer {
|
||||||
content: '╔';
|
padding: 0;
|
||||||
position: absolute;
|
|
||||||
top: -3px;
|
|
||||||
left: -3px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--terminal-green);
|
|
||||||
line-height: 1;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-container::after {
|
/* Remove old corner styles when using ascii-frame-outer (new frame system handles this) */
|
||||||
content: '╗';
|
.ticket-container.ascii-frame-outer::before,
|
||||||
position: absolute;
|
.ticket-container.ascii-frame-outer::after {
|
||||||
top: -3px;
|
content: '╔' !important;
|
||||||
right: -3px;
|
content: '╗' !important;
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--terminal-green);
|
|
||||||
line-height: 1;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Priority-based border colors */
|
/* Priority-based border colors */
|
||||||
@@ -403,6 +392,13 @@ textarea.editable {
|
|||||||
border-radius: 0;
|
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 {
|
.comments-section h2 {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
color: var(--terminal-amber);
|
color: var(--terminal-amber);
|
||||||
@@ -442,13 +438,34 @@ textarea.editable {
|
|||||||
.comment {
|
.comment {
|
||||||
background: var(--bg-primary);
|
background: var(--bg-primary);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border: 2px solid var(--terminal-green);
|
border: 1px solid var(--terminal-green);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: none;
|
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 {
|
.comment-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|||||||
@@ -101,10 +101,29 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- OUTER FRAME: Dashboard Container -->
|
||||||
|
<div class="ascii-frame-outer">
|
||||||
|
<span class="bottom-left-corner">╚</span>
|
||||||
|
<span class="bottom-right-corner">╝</span>
|
||||||
|
|
||||||
|
<!-- SECTION 1: Dashboard Header & Actions -->
|
||||||
|
<div class="ascii-section-header">Dashboard Control Center</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
<div class="dashboard-header">
|
<div class="dashboard-header">
|
||||||
<h1>Ticket Dashboard</h1>
|
<h1>Ticket Dashboard</h1>
|
||||||
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button> </div>
|
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button>
|
||||||
<div class="search-container">
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DIVIDER -->
|
||||||
|
<div class="ascii-divider"></div>
|
||||||
|
|
||||||
|
<!-- SECTION 2: Search & Filter -->
|
||||||
|
<div class="ascii-section-header">Search & Filter</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
<form method="GET" action="" class="search-form">
|
<form method="GET" action="" class="search-form">
|
||||||
<!-- Preserve existing parameters -->
|
<!-- Preserve existing parameters -->
|
||||||
<?php if (isset($_GET['status'])): ?>
|
<?php if (isset($_GET['status'])): ?>
|
||||||
@@ -136,13 +155,22 @@
|
|||||||
<a href="?" class="clear-search-btn">Clear</a>
|
<a href="?" class="clear-search-btn">Clear</a>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||||
<div class="search-results-info">
|
<div class="search-results-info">
|
||||||
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
||||||
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DIVIDER -->
|
||||||
|
<div class="ascii-divider"></div>
|
||||||
|
|
||||||
|
<!-- SECTION 3: Table Controls -->
|
||||||
|
<div class="ascii-section-header">Table Controls</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
<div class="table-controls">
|
<div class="table-controls">
|
||||||
<div class="ticket-count">
|
<div class="ticket-count">
|
||||||
Total Tickets: <?php echo $totalTickets; ?>
|
Total Tickets: <?php echo $totalTickets; ?>
|
||||||
@@ -183,8 +211,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DIVIDER -->
|
||||||
|
<div class="ascii-divider"></div>
|
||||||
|
|
||||||
|
<!-- SECTION 4: Bulk Actions (if admin) -->
|
||||||
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
||||||
|
<div class="ascii-section-header">Bulk Operations</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
<div class="bulk-actions-toolbar" style="display: none;">
|
<div class="bulk-actions-toolbar" style="display: none;">
|
||||||
<div class="bulk-actions-info">
|
<div class="bulk-actions-info">
|
||||||
<span id="selected-count">0</span> tickets selected
|
<span id="selected-count">0</span> tickets selected
|
||||||
@@ -196,8 +233,17 @@
|
|||||||
<button onclick="clearSelection()" class="btn btn-secondary">Clear Selection</button>
|
<button onclick="clearSelection()" class="btn btn-secondary">Clear Selection</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DIVIDER -->
|
||||||
|
<div class="ascii-divider"></div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- SECTION 5: Ticket Table -->
|
||||||
|
<div class="ascii-section-header">Ticket List</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -264,5 +310,9 @@
|
|||||||
?>
|
?>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END OUTER FRAME -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -145,7 +145,14 @@ function formatDetails($details, $actionType) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="ticket-container" data-priority="<?php echo $ticket["priority"]; ?>">
|
<div class="ticket-container ascii-frame-outer" data-priority="<?php echo $ticket["priority"]; ?>">
|
||||||
|
<span class="bottom-left-corner">╚</span>
|
||||||
|
<span class="bottom-right-corner">╝</span>
|
||||||
|
|
||||||
|
<!-- SECTION 1: Ticket Header & Metadata -->
|
||||||
|
<div class="ascii-section-header">Ticket Information</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
<div class="ticket-header">
|
<div class="ticket-header">
|
||||||
<h2><input type="text" class="editable title-input" value="<?php echo htmlspecialchars($ticket["title"]); ?>" data-field="title" disabled></h2>
|
<h2><input type="text" class="editable title-input" value="<?php echo htmlspecialchars($ticket["title"]); ?>" data-field="title" disabled></h2>
|
||||||
<div class="ticket-subheader">
|
<div class="ticket-subheader">
|
||||||
@@ -202,14 +209,32 @@ function formatDetails($details, $actionType) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ticket-details">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DIVIDER -->
|
||||||
|
<div class="ascii-divider"></div>
|
||||||
|
|
||||||
|
<!-- SECTION 2: Tab Navigation -->
|
||||||
|
<div class="ascii-section-header">Content Sections</div>
|
||||||
|
<div class="ascii-content">
|
||||||
<div class="ticket-tabs">
|
<div class="ticket-tabs">
|
||||||
<button class="tab-btn active" onclick="showTab('description')">Description</button>
|
<button class="tab-btn active" onclick="showTab('description')">Description</button>
|
||||||
<button class="tab-btn" onclick="showTab('comments')">Comments</button>
|
<button class="tab-btn" onclick="showTab('comments')">Comments</button>
|
||||||
<button class="tab-btn" onclick="showTab('activity')">Activity</button>
|
<button class="tab-btn" onclick="showTab('activity')">Activity</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DIVIDER -->
|
||||||
|
<div class="ascii-divider"></div>
|
||||||
|
|
||||||
|
<!-- SECTION 3: Tab Content Area -->
|
||||||
|
<div class="ascii-section-header">Content Display</div>
|
||||||
|
<div class="ascii-content">
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
|
<div class="ticket-details">
|
||||||
<div id="description-tab" class="tab-content active">
|
<div id="description-tab" class="tab-content active">
|
||||||
|
<div class="ascii-subsection-header">Description</div>
|
||||||
<div class="detail-group full-width">
|
<div class="detail-group full-width">
|
||||||
<label>Description</label>
|
<label>Description</label>
|
||||||
<textarea class="editable" data-field="description" disabled><?php echo $ticket["description"]; ?></textarea>
|
<textarea class="editable" data-field="description" disabled><?php echo $ticket["description"]; ?></textarea>
|
||||||
@@ -217,8 +242,10 @@ function formatDetails($details, $actionType) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="comments-tab" class="tab-content">
|
<div id="comments-tab" class="tab-content">
|
||||||
|
<div class="ascii-subsection-header">Comments Section</div>
|
||||||
<div class="comments-section">
|
<div class="comments-section">
|
||||||
<h2>Comments</h2>
|
<div class="ascii-frame-inner">
|
||||||
|
<h2>Add Comment</h2>
|
||||||
<div class="comment-form">
|
<div class="comment-form">
|
||||||
<textarea id="newComment" placeholder="Add a comment..."></textarea>
|
<textarea id="newComment" placeholder="Add a comment..."></textarea>
|
||||||
<div class="comment-controls">
|
<div class="comment-controls">
|
||||||
@@ -243,6 +270,10 @@ function formatDetails($details, $actionType) {
|
|||||||
<div id="markdownPreview" class="markdown-preview" style="display: none;"></div>
|
<div id="markdownPreview" class="markdown-preview" style="display: none;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Comment List in separate sub-frame -->
|
||||||
|
<div class="ascii-frame-inner">
|
||||||
|
<h2>Comment History</h2>
|
||||||
<div class="comments-list">
|
<div class="comments-list">
|
||||||
<?php
|
<?php
|
||||||
foreach ($comments as $comment) {
|
foreach ($comments as $comment) {
|
||||||
@@ -267,8 +298,11 @@ function formatDetails($details, $actionType) {
|
|||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="activity-tab" class="tab-content">
|
<div id="activity-tab" class="tab-content">
|
||||||
|
<div class="ascii-subsection-header">Activity Timeline</div>
|
||||||
<div class="timeline-container">
|
<div class="timeline-container">
|
||||||
<?php if (empty($timeline)): ?>
|
<?php if (empty($timeline)): ?>
|
||||||
<p>No activity recorded yet.</p>
|
<p>No activity recorded yet.</p>
|
||||||
@@ -295,6 +329,9 @@ function formatDetails($details, $actionType) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END OUTER FRAME -->
|
||||||
<script>
|
<script>
|
||||||
// Initialize the ticket view
|
// Initialize the ticket view
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user