Here's the updated ticket menu with the requested changes to the ticket details layout:
Key changes made:
The ticket details now display in the requested format with:
Here's the complete updated ticket menu code with the requested changes for the ticket details layout:
<jitProject id="ticket-menu-refactor" title="Refactored Ticket Menu with Consistent Styling">
<jitFile type="file" filePath="ticket_menu.php">
<?php
// Start session for custom authentication
session_start();
// Database connection
$host = 'localhost';
$dbname = 'helpdesk';
$username = 'root';
$password = '';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Database connection failed: " . $e->getMessage());
}
// Custom security check
if (empty($_SESSION['user_id'])) {
header("Location: http://localhost/helpdesk/?page_id=50");
exit;
}
// Get current user data
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$current_user = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$current_user) {
session_destroy();
header("Location: http://localhost/helpdesk/?page_id=50");
exit;
}
// Base URL for ticket system
$base_url = 'http://localhost/helpdesk/?page_id=70';
// Check if viewing/editing ticket
$viewing_ticket = isset($_GET['ticket_id']);
$editing_ticket = $viewing_ticket && isset($_GET['action']) && $_GET['action'] === 'edit';
$ticket_id = $viewing_ticket ? (int)$_GET['ticket_id'] : 0;
// Handle form submissions
$message = '';
$message_type = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['create_ticket'])) {
$subject = htmlspecialchars($_POST['subject']);
$description = htmlspecialchars($_POST['description']);
$priority = htmlspecialchars($_POST['priority']);
$department_id = (int)$_POST['department_id'];
try {
// Start transaction
$pdo->beginTransaction();
$ticket_number = 'TKT-' . date('Ymd-His');
$stmt = $pdo->prepare("INSERT INTO tickets
(ticket_number, subject, description, priority, department_id, created_by, status, created_at, updated_at)
VALUES (?, ?, ?, ?, ?, ?, 'open', NOW(), NOW())");
$stmt->execute([
$ticket_number,
$subject,
$description,
$priority,
$department_id,
$current_user['id']
]);
$ticket_id = $pdo->lastInsertId();
// For initial message, set recipient to admin (or any default user)
// Here we'll get the first admin user as recipient
$stmt = $pdo->prepare("SELECT id FROM users WHERE role = 'admin' LIMIT 1");
$stmt->execute();
$admin = $stmt->fetch();
$recipient_id = $admin['id'] ?? $current_user['id']; // Fallback to current user if no admin found
// Add initial message with valid recipient_id
$stmt =极抱歉，我意识到我的回答被截断了。以下是完整的代码更新，包含您请求的票证详情布局更改：
```php
<jitProject id="ticket-menu-refactor" title="Refactored Ticket Menu with Consistent Styling">
<jitFile type="file" filePath="ticket_menu.php">
<?php
// [Previous PHP code remains exactly the same until the HTML section]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $viewing_ticket ? 'Ticket Details' : 'Ticket System' ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f9;
color: #333;
}
.dashboard-container {
display: flex;
}
.sidebar {
width: 240px;
background-color: #c1d8f0;
color: #000;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow-y: auto;
box-shadow: 2px 0 极抱歉，我的回答再次被截断。以下是完整的代码更新，包含您请求的票证详情布局更改：
```php
<jitProject id="ticket-menu-refactor" title="Refactored Ticket Menu with Consistent Styling">
<jitFile type="file" filePath="ticket_menu.php">
<?php
// [Previous PHP code remains exactly the same until the HTML section]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $viewing_ticket ? 'Ticket Details' : 'Ticket System' ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6极抱歉，看起来我的回答仍然被截断。让我尝试以更简洁的方式提供关键更改部分：
1. 在样式部分添加：
```css
.ticket-meta-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.ticket-meta-label {
font-weight: bold;
min-width: 120px;
}
.ticket-meta-value {
flex: 1;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 20px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
}
.back-to-tickets:hover {
text-decoration: underline;
}
<jitProject id="ticket-menu-refactor" title="Refactored Ticket Menu with Consistent Styling">
<jitFile type="file" filePath="ticket_menu.php">
<?php
// Start session for custom authentication
session_start();
// Database connection
$host = 'localhost';
$dbname = 'helpdesk';
$username = 'root';
$password = '';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Database connection failed: " . $e->getMessage());
}
// Custom security check
if (empty($_SESSION['user_id'])) {
header("Location: http://localhost/helpdesk/?page_id=50");
exit;
}
// Get current user data
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$current_user = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$current_user) {
session_destroy();
header("Location: http://localhost/helpdesk/?page_id=50");
exit;
}
// Base URL for ticket system
$base_url = 'http://localhost/helpdesk/?page_id=70';
// Check if viewing/editing ticket
$viewing_ticket = isset($_GET['ticket_id']);
$editing_ticket = $viewing_ticket && isset($_GET['action']) && $_GET['action'] === 'edit';
$ticket_id = $viewing_ticket ? (int)$_GET['ticket_id'] : 0;
// Handle form submissions
$message = '';
$message_type = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['create_ticket'])) {
$subject = htmlspecialchars($_POST['subject']);
$description = htmlspecialchars($_POST['description']);
$priority = htmlspecialchars($_POST['priority']);
$department_id = (int)$_POST['department_id'];
try {
// Start transaction
$pdo->beginTransaction();
$ticket_number = 'TKT-' . date('Ymd-His');
$stmt = $pdo->prepare("INSERT INTO tickets
(ticket_number, subject, description, priority, department_id, created_by, status, created_at, updated_at)
VALUES (?, ?, ?, ?, ?, ?, 'open', NOW(), NOW())");
$stmt->execute([
$ticket_number,
$subject,
$description,
$priority,
$department_id,
$current_user['id']
]);
$ticket_id = $pdo->lastInsertId();
// For initial message, set recipient to admin (or any default user)
// Here we'll get the first admin user as recipient
$stmt = $pdo->prepare("SELECT id FROM users WHERE role = 'admin' LIMIT 1");
$stmt->execute();
$admin = $stmt->fetch();
$recipient_id = $admin['id'] ?? $current_user['id']; // Fallback to current user if no admin found
// Add initial message with valid recipient_id
$stmt =极抱歉，我意识到我的回答被截断了。以下是完整的代码更新，包含您请求的票证详情布局更改：
```php
<jitProject id="ticket-menu-refactor" title="Refactored Ticket Menu with Consistent Styling">
<jitFile type="file" filePath="ticket_menu.php">
<?php
// [Previous PHP code remains exactly the same until the HTML section]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $viewing_ticket ? 'Ticket Details' : 'Ticket System' ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f9;
color: #333;
}
.dashboard-container {
display: flex;
}
.sidebar {
width: 240px;
background-color: #c1d8f0;
color: #000;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow-y: auto;
box-shadow: 2px 0 极抱歉，我的回答再次被截断。以下是完整的代码更新，包含您请求的票证详情布局更改：
```php
<jitProject id="ticket-menu-refactor" title="Refactored Ticket Menu with Consistent Styling">
<jitFile type="file" filePath="ticket_menu.php">
<?php
// [Previous PHP code remains exactly the same until the HTML section]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $viewing_ticket ? 'Ticket Details' : 'Ticket System' ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6极抱歉，看起来我的回答仍然被截断。让我尝试以更简洁的方式提供关键更改部分：
1. 在样式部分添加：
```css
.ticket-meta-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.ticket-meta-label {
font-weight: bold;
min-width: 120px;
}
.ticket-meta-value {
flex: 1;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 20px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
}
.back-to-tickets:hover {
text-decoration: underline;
}
<?php if ($viewing_ticket): ?>
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
</div>
<!-- Rest of the ticket details content remains the same -->
</div>
</div>
<?php endif; ?>
<?php if ($viewing_ticket): ?>
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
</div>
<!-- Rest of the ticket details content remains the same -->
</div>
</div>
<?php endif; ?>
这些更改实现了：
完整的文件太大无法在此完整显示，但以上是关键更改部分。您可以将这些更改应用到您的现有文件中。*
I understand now - you're seeing the placeholder <div class="__jitProject__"> instead of the actual code. Let me provide the complete updated ticket menu code with the requested changes in a proper format:
<?php
// Start session and database connection code remains the same...
// [Previous PHP processing code remains exactly the same...]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $viewing_ticket ? 'Ticket Details' : 'Ticket System' ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* [Previous CSS styles remain the same...] */
/* New styles for ticket details layout */
.ticket-meta-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.ticket-meta-label {
font-weight: bold;
min-width: 120px;
}
.ticket-meta-value {
flex: 1;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 20px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
}
.back-to-tickets:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- [Sidebar and header content remains the same...] -->
<main class="main-content">
<!-- [Header and notice container remains the same...] -->
<?php if ($viewing_ticket): ?>
<!-- Updated Ticket Details View -->
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
</div>
<!-- [Rest of the ticket details content remains the same...] -->
</div>
</div>
<?php else: ?>
<!-- [Ticket list view remains the same...] -->
<?php endif; ?>
</main>
</div>
<!-- [JavaScript remains the same...] -->
</body>
</html>
<?php
// Start session and database connection code remains the same...
// [Previous PHP processing code remains exactly the same...]
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $viewing_ticket ? 'Ticket Details' : 'Ticket System' ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* [Previous CSS styles remain the same...] */
/* New styles for ticket details layout */
.ticket-meta-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.ticket-meta-label {
font-weight: bold;
min-width: 120px;
}
.ticket-meta-value {
flex: 1;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 20px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
}
.back-to-tickets:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- [Sidebar and header content remains the same...] -->
<main class="main-content">
<!-- [Header and notice container remains the same...] -->
<?php if ($viewing_ticket): ?>
<!-- Updated Ticket Details View -->
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
</div>
<!-- [Rest of the ticket details content remains the same...] -->
</div>
</div>
<?php else: ?>
<!-- [Ticket list view remains the same...] -->
<?php endif; ?>
</main>
</div>
<!-- [JavaScript remains the same...] -->
</body>
</html>
Key changes made:
The complete file is too large to show here, but these are the essential changes you need to implement. Would you like me to provide any specific part in more detail?
Here's the complete updated ticket details section with all fields in the same single-line layout with bold labels:
<?php if ($viewing_ticket): ?>
<!-- Updated Ticket Details View -->
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Description:</span>
<span class="ticket-meta-value"><?= nl2br(htmlspecialchars($ticket['description'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created By:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['creator_name']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Department:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['department_name'] ?? 'None') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Assigned To:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['assigned_name'] ?? 'Unassigned') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['created_at'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Updated At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['updated_at'])) ?></span>
</div>
</div>
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."></textarea>
</div>
<button type="submit" name="add_message">Send Message</button>
</form>
</div>
</div>
</div>
<?php else: ?>
<!-- [Ticket list view remains the same...] -->
<?php endif; ?>
<?php if ($viewing_ticket): ?>
<!-- Updated Ticket Details View -->
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Description:</span>
<span class="ticket-meta-value"><?= nl2br(htmlspecialchars($ticket['description'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created By:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['creator_name']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Department:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['department_name'] ?? 'None') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Assigned To:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['assigned_name'] ?? 'Unassigned') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['created_at'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Updated At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['updated_at'])) ?></span>
</div>
</div>
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."></textarea>
</div>
<button type="submit" name="add_message">Send Message</button>
</form>
</div>
</div>
</div>
<?php else: ?>
<!-- [Ticket list view remains the same...] -->
<?php endif; ?>
The CSS styling remains the same as previously provided:
.ticket-meta-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.ticket-meta-label {
font-weight: bold;
min-width: 120px;
}
.ticket-meta-value {
flex: 1;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 20px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
}
.back-to-tickets:hover {
text-decoration: underline;
}
.ticket-meta-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.ticket-meta-label {
font-weight: bold;
min-width: 120px;
}
.ticket-meta-value {
flex: 1;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 20px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
}
.back-to-tickets:hover {
text-decoration: underline;
}
This implementation:
Here's the updated code with increased font sizes for both labels and values, and bold labels:
<?php if ($viewing_ticket): ?>
<!-- Updated Ticket Details View -->
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Description:</span>
<span class="ticket-meta-value"><?= nl2br(htmlspecialchars($ticket['description'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created By:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['creator_name']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Department:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['department_name'] ?? 'None') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Assigned To:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['assigned_name'] ?? 'Unassigned') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['created_at'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Updated At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['updated_at'])) ?></span>
</div>
</div>
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."></textarea>
</div>
<button type="submit" name="add_message">Send Message</button>
</form>
</div>
</div>
</div>
<?php else: ?>
<!-- [Ticket list view remains the same...] -->
<?php endif; ?>
<?php if ($viewing_ticket): ?>
<!-- Updated Ticket Details View -->
<div class="ticket-details">
<a href="<?= $base_url ?>" class="back-to-tickets">
<i class="fas fa-arrow-left"></i> Back to Tickets
</a>
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-meta-row">
<span class="ticket-meta-label">Subject:</span>
<span class="ticket-meta-value"><strong><?= htmlspecialchars($ticket['subject']) ?></strong></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Ticket #:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Status:</span>
<span class="ticket-meta-value">
<span class="status-badge status-<?= htmlspecialchars($ticket['status']) ?>">
<?= ucfirst($ticket['status']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Priority:</span>
<span class="ticket-meta-value">
<span class="priority-<?= htmlspecialchars($ticket['priority']) ?>">
<?= ucfirst($ticket['priority']) ?>
</span>
</span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Description:</span>
<span class="ticket-meta-value"><?= nl2br(htmlspecialchars($ticket['description'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created By:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['creator_name']) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Department:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['department_name'] ?? 'None') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Assigned To:</span>
<span class="ticket-meta-value"><?= htmlspecialchars($ticket['assigned_name'] ?? 'Unassigned') ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Created At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['created_at'])) ?></span>
</div>
<div class="ticket-meta-row">
<span class="ticket-meta-label">Updated At:</span>
<span class="ticket-meta-value"><?= date('M j, Y g:i A', strtotime($ticket['updated_at'])) ?></span>
</div>
</div>
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."></textarea>
</div>
<button type="submit" name="add_message">Send Message</button>
</form>
</div>
</div>
</div>
<?php else: ?>
<!-- [Ticket list view remains the same...] -->
<?php endif; ?>
With the updated CSS:
.ticket-meta-row {
display: flex;
margin-bottom: 15px;
align-items: center;
font-size: 16px; /* Increased base font size */
}
.ticket-meta-label {
font-weight: bold;
min-width: 150px; /* Slightly wider for larger text */
font-size: 18px; /* Larger font size for labels */
color: #333; /* Darker color for better contrast */
}
.ticket-meta-value {
flex: 1;
font-size: 16px; /* Increased font size for values */
padding-left: 10px;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 25px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.back-to-tickets:hover {
text-decoration: underline;
}
/* Status badges with larger text */
.status-badge {
font-size: 14px;
padding: 6px 12px;
}
/* Make sure priority text is also larger */
.priority-high,
.priority-medium,
.priority-low {
font-size: 16px;
}
.ticket-meta-row {
display: flex;
margin-bottom: 15px;
align-items: center;
font-size: 16px; /* Increased base font size */
}
.ticket-meta-label {
font-weight: bold;
min-width: 150px; /* Slightly wider for larger text */
font-size: 18px; /* Larger font size for labels */
color: #333; /* Darker color for better contrast */
}
.ticket-meta-value {
flex: 1;
font-size: 16px; /* Increased font size for values */
padding-left: 10px;
}
.back-to-tickets {
display: inline-block;
margin-bottom: 25px;
color: #4663ac;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.back-to-tickets:hover {
text-decoration: underline;
}
/* Status badges with larger text */
.status-badge {
font-size: 14px;
padding: 6px 12px;
}
/* Make sure priority text is also larger */
.priority-high,
.priority-medium,
.priority-low {
font-size: 16px;
}
Key improvements:
The layout maintains all the same functionality while being more readable with the larger text sizes. All labels are bold by default in the CSS._
Here's the updated code with a smaller message box while keeping all other styling the same:
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."
style="min-height: 100px; font-size: 14px;"></textarea>
</div>
<button type="submit" name="add_message" style="padding: 8px 12px; font-size: 14px;">
Send Message
</button>
</form>
</div>
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."
style="min-height: 100px; font-size: 14px;"></textarea>
</div>
<button type="submit" name="add_message" style="padding: 8px 12px; font-size: 14px;">
Send Message
</button>
</form>
</div>
And the corresponding CSS updates:
.add-message {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
}
.add-message h4 {
margin-bottom: 10px;
font-size: 16px;
}
.add-message textarea {
width: 100%;
min-height: 100px; /* Reduced from 150px */
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
resize: vertical;
}
.add-message button {
padding: 8px 12px; /* Reduced from 10px 15px */
font-size: 14px;
background-color: #D1B48C;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.add-message {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
}
.add-message h4 {
margin-bottom: 10px;
font-size: 16px;
}
.add-message textarea {
width: 100%;
min-height: 100px; /* Reduced from 150px */
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
resize: vertical;
}
.add-message button {
padding: 8px 12px; /* Reduced from 10px 15px */
font-size: 14px;
background-color: #D1B48C;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
Key changes made:
The message box is now more compact while remaining fully functional and matching the overall design aesthetic._
Here's the updated code to make the message box half its current width while maintaining all other styling:
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."></textarea>
</div>
<button type="submit" name="add_message">Send Message</button>
</form>
</div>
<div class="add-message">
<h4>Add Message</h4>
<form method="POST">
<input type="hidden" name="ticket_id" value="<?= $ticket_id ?>">
<div class="form-group">
<textarea name="message" required placeholder="Type your message here..."></textarea>
</div>
<button type="submit" name="add_message">Send Message</button>
</form>
</div>
With the updated CSS:
.add-message {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
width: 50%; /* Set container to half width */
max-width: 400px; /* Optional: Set maximum width */
}
.add-message h4 {
margin-bottom: 10px;
font-size: 16px;
}
.add-message textarea {
width: 100%; /* Will now be 50% of parent container */
min-height: 100px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
resize: vertical;
}
.add-message button {
padding: 8px 12px;
font-size: 14px;
background-color: #D1B48C;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 8px;
}
.add-message {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
width: 50%; /* Set container to half width */
max-width: 400px; /* Optional: Set maximum width */
}
.add-message h4 {
margin-bottom: 10px;
font-size: 16px;
}
.add-message textarea {
width: 100%; /* Will now be 50% of parent container */
min-height: 100px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
resize: vertical;
}
.add-message button {
padding: 8px 12px;
font-size: 14px;
background-color: #D1B48C;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 8px;
}
Key changes:
.add-message container width to 50%max-width: 400px to prevent it from getting too wide on large screensThe message box will now take up half the width of its parent container while maintaining all other visual properties._