Phase 4: Light mode removal + CreateTicketView restructuring
## Light Mode Removal & Optimization - Removed theme toggle functionality from dashboard.js - Forced dark mode only (terminal aesthetic) - Cleaned up .theme-toggle CSS class and styles - Removed body.light-mode CSS rules from all view files - Simplified user-header styles to use static dark colors - Removed CSS custom properties (--header-bg, --header-text, --border-color) - Removed margin-right for theme toggle button (no longer needed) ## CreateTicketView Complete Restructuring - Added user header with back link and user info - Restructured into 6 vertical nested ASCII sections: 1. Form Header - Create New Ticket introduction 2. Template Selection - Optional template dropdown 3. Basic Information - Title input field 4. Ticket Metadata - Status, Priority, Category, Type (4-column) 5. Detailed Description - Main textarea 6. Form Actions - Create/Cancel buttons - Each section wrapped in ascii-section-header → ascii-content → ascii-frame-inner - Added ASCII dividers between all sections - Added ╚╝ bottom corner characters to outer frame - Improved error message styling with priority-1 color - Added helpful placeholder text and hints ## Files Modified - assets/css/dashboard.css: Removed theme toggle CSS (~19 lines) - assets/js/dashboard.js: Removed initThemeToggle() and forced dark mode - views/DashboardView.php: Simplified user-header CSS (removed light mode) - views/TicketView.php: Simplified user-header CSS (removed light mode) - views/CreateTicketView.php: Complete restructuring (98→242 lines) ## Code Quality - Maintained all existing functionality and event handlers - Kept all class names for JavaScript compatibility - Consistent nested frame structure across all pages - Zero breaking changes to backend or business logic - Optimized by removing ~660 unused lines total 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -13,86 +13,229 @@
|
||||
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ticket-container">
|
||||
<div class="ticket-header">
|
||||
<h2>Create New Ticket</h2>
|
||||
<div class="user-header">
|
||||
<div class="user-header-left">
|
||||
<a href="/" class="back-link">← Dashboard</a>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error)): ?>
|
||||
<div class="error-message"><?php echo $error; ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="POST" action="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="ticket-form">
|
||||
<div class="ticket-details">
|
||||
<div class="detail-group">
|
||||
<label for="template">Use Template (Optional)</label>
|
||||
<select id="templateSelect" class="editable" onchange="loadTemplate()">
|
||||
<option value="">-- No Template --</option>
|
||||
<?php if (isset($templates) && !empty($templates)): ?>
|
||||
<?php foreach ($templates as $template): ?>
|
||||
<option value="<?php echo $template['template_id']; ?>">
|
||||
<?php echo htmlspecialchars($template['template_name']); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</select>
|
||||
</div>
|
||||
<div class="user-header-right">
|
||||
<?php if (isset($GLOBALS['currentUser'])): ?>
|
||||
<span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
|
||||
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
|
||||
<span class="admin-badge">Admin</span>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.user-header {
|
||||
background: #2c3e50;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-left: 50px; /* Space for hamburger menu */
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #444;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.user-header-left, .user-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.back-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-name {
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.admin-badge {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Responsive design for smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.user-header {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.back-link {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.user-name {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="detail-group">
|
||||
<label for="title">Title</label>
|
||||
<input type="text" id="title" name="title" class="editable" required>
|
||||
</div>
|
||||
|
||||
<div class="detail-group status-priority-row">
|
||||
<div class="detail-quarter">
|
||||
<label for="status">Status</label>
|
||||
<select id="status" name="status" class="editable">
|
||||
<option value="Open" selected>Open</option>
|
||||
<option value="Closed">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-quarter">
|
||||
<label for="priority">Priority</label>
|
||||
<select id="priority" name="priority" class="editable">
|
||||
<option value="1">P1 - Critical Impact</option>
|
||||
<option value="2">P2 - High Impact</option>
|
||||
<option value="3">P3 - Medium Impact</option>
|
||||
<option value="4" selected>P4 - Low Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-quarter">
|
||||
<label for="category">Category</label>
|
||||
<select id="category" name="category" class="editable">
|
||||
<option value="Hardware">Hardware</option>
|
||||
<option value="Software">Software</option>
|
||||
<option value="Network">Network</option>
|
||||
<option value="Security">Security</option>
|
||||
<option value="General" selected>General</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-quarter">
|
||||
<label for="type">Type</label>
|
||||
<select id="type" name="type" class="editable">
|
||||
<option value="Maintenance">Maintenance</option>
|
||||
<option value="Install">Install</option>
|
||||
<option value="Task">Task</option>
|
||||
<option value="Upgrade">Upgrade</option>
|
||||
<option value="Issue" selected>Issue</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-group full-width">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" name="description" class="editable" rows="15" required></textarea>
|
||||
<!-- OUTER FRAME: Create Ticket Form Container -->
|
||||
<div class="ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<!-- SECTION 1: Form Header -->
|
||||
<div class="ascii-section-header">Create New Ticket</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="ticket-header">
|
||||
<h2>New Ticket Form</h2>
|
||||
<p style="color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.9rem; margin-top: 0.5rem;">
|
||||
Complete the form below to create a new ticket
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ticket-footer">
|
||||
<button type="submit" class="btn primary">Create Ticket</button>
|
||||
<button type="button" onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/'" class="btn back-btn">Cancel</button>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error)): ?>
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- ERROR SECTION -->
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="error-message" style="color: var(--priority-1); border: 2px solid var(--priority-1); padding: 1rem; background: rgba(231, 76, 60, 0.1);">
|
||||
<strong>⚠ Error:</strong> <?php echo $error; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<form method="POST" action="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="ticket-form">
|
||||
|
||||
<!-- SECTION 2: Template Selection -->
|
||||
<div class="ascii-section-header">Template Selection</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="detail-group">
|
||||
<label for="templateSelect">Use Template (Optional)</label>
|
||||
<select id="templateSelect" class="editable" onchange="loadTemplate()">
|
||||
<option value="">-- No Template --</option>
|
||||
<?php if (isset($templates) && !empty($templates)): ?>
|
||||
<?php foreach ($templates as $template): ?>
|
||||
<option value="<?php echo $template['template_id']; ?>">
|
||||
<?php echo htmlspecialchars($template['template_name']); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</select>
|
||||
<p style="color: var(--terminal-green); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
|
||||
Select a template to auto-fill form fields
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 3: Basic Information -->
|
||||
<div class="ascii-section-header">Basic Information</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="detail-group">
|
||||
<label for="title">Ticket Title *</label>
|
||||
<input type="text" id="title" name="title" class="editable" required placeholder="Enter a descriptive title for this ticket">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 4: Ticket Metadata -->
|
||||
<div class="ascii-section-header">Ticket Metadata</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="detail-group status-priority-row">
|
||||
<div class="detail-quarter">
|
||||
<label for="status">Status</label>
|
||||
<select id="status" name="status" class="editable">
|
||||
<option value="Open" selected>Open</option>
|
||||
<option value="Closed">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-quarter">
|
||||
<label for="priority">Priority</label>
|
||||
<select id="priority" name="priority" class="editable">
|
||||
<option value="1">P1 - Critical Impact</option>
|
||||
<option value="2">P2 - High Impact</option>
|
||||
<option value="3">P3 - Medium Impact</option>
|
||||
<option value="4" selected>P4 - Low Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-quarter">
|
||||
<label for="category">Category</label>
|
||||
<select id="category" name="category" class="editable">
|
||||
<option value="Hardware">Hardware</option>
|
||||
<option value="Software">Software</option>
|
||||
<option value="Network">Network</option>
|
||||
<option value="Security">Security</option>
|
||||
<option value="General" selected>General</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-quarter">
|
||||
<label for="type">Type</label>
|
||||
<select id="type" name="type" class="editable">
|
||||
<option value="Maintenance">Maintenance</option>
|
||||
<option value="Install">Install</option>
|
||||
<option value="Task">Task</option>
|
||||
<option value="Upgrade">Upgrade</option>
|
||||
<option value="Issue" selected>Issue</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 5: Detailed Description -->
|
||||
<div class="ascii-section-header">Detailed Description</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="detail-group full-width">
|
||||
<label for="description">Description *</label>
|
||||
<textarea id="description" name="description" class="editable" rows="15" required placeholder="Provide a detailed description of the ticket..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 6: Form Actions -->
|
||||
<div class="ascii-section-header">Form Actions</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="ticket-footer">
|
||||
<button type="submit" class="btn primary">Create Ticket</button>
|
||||
<button type="button" onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/'" class="btn back-btn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- END OUTER FRAME -->
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user