mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui updates for ticket layout

Browse Source
This commit is contained in:
Mark Gregory
2026-06-17 11:42:37 +01:00
parent b1d9b235e2
commit a9764122ba
4 changed files with 205 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+186 -5
View File
@@ -1,7 +1,3 @@
@vite([
'resources/css/app.css',
'resources/js/app.js',
])
@php
$currentUser = auth()->user();
$currentCompany = $currentUser?->company;
@@ -10,6 +6,191 @@
|| \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower((string) ($currentCompany?->name ?? '')), 'mpba');
$visibleCommentCount = $ticket->comments->count();
@endphp
<style>
.hd-helpdesk-surface {
--hd-panel: rgba(24, 24, 27, 0.96);
--hd-panel-soft: rgba(16, 23, 42, 0.92);
--hd-border: rgba(113, 113, 122, 0.50);
--hd-border-soft: rgba(59, 130, 246, 0.30);
--hd-text: #f8fafc;
--hd-muted: #cbd5e1;
--hd-blue: #2563eb;
--hd-green: #16a34a;
--hd-red: #dc2626;
}
.hd-helpdesk-surface,
.hd-helpdesk-surface * {
box-sizing: border-box;
}
.hd-helpdesk-surface article,
.hd-helpdesk-surface details,
.hd-helpdesk-surface form[data-helpdesk-comment-form] {
overflow: hidden;
border: 1px solid var(--hd-border) !important;
border-radius: 24px !important;
background: var(--hd-panel) !important;
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22) !important;
}
.hd-helpdesk-surface article > div:first-child,
.hd-helpdesk-surface details > summary,
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child {
min-height: 116px;
padding: 24px 30px !important;
background: linear-gradient(135deg, #020617 0%, #0f1e3d 58%, #101827 100%) !important;
color: var(--hd-text) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.hd-helpdesk-surface article > div:first-child > div,
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child > div,
.hd-helpdesk-surface details > summary > div:first-child {
align-items: center !important;
gap: 16px !important;
}
.hd-helpdesk-surface article > div:first-child span.inline-flex,
.hd-helpdesk-surface details > summary span.inline-flex,
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child span.inline-flex {
flex-shrink: 0;
}
.hd-helpdesk-surface article > div:first-child span.inline-flex[class*="h-14"],
.hd-helpdesk-surface details > summary span.inline-flex[class*="h-14"],
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child span.inline-flex[class*="h-14"] {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.hd-helpdesk-surface article > div:first-child i,
.hd-helpdesk-surface details > summary i,
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child i {
font-size: 16px !important;
line-height: 1 !important;
}
.hd-helpdesk-surface article h2,
.hd-helpdesk-surface details h2,
.hd-helpdesk-surface form[data-helpdesk-comment-form] h2 {
margin: 0 !important;
font-size: clamp(1.35rem, 1.1rem + 0.8vw, 2rem) !important;
line-height: 1.2 !important;
letter-spacing: -0.025em !important;
}
.hd-helpdesk-surface article p,
.hd-helpdesk-surface details p,
.hd-helpdesk-surface form[data-helpdesk-comment-form] p {
margin-top: 6px !important;
}
.hd-helpdesk-surface article > div:nth-child(2),
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:nth-child(2),
.hd-helpdesk-surface details > div {
padding: 28px 30px !important;
}
.hd-ticket-body-card {
min-height: 210px !important;
padding: 28px 32px !important;
border-radius: 20px !important;
border: 1px solid rgba(113, 113, 122, 0.55) !important;
background: rgba(3, 7, 18, 0.45) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.hd-ticket-body-card .prose,
.hd-ticket-body-card div {
font-size: 1.05rem !important;
line-height: 1.85 !important;
color: var(--hd-text) !important;
}
.hd-helpdesk-surface form[data-helpdesk-comment-form] .space-y-7 {
display: grid !important;
gap: 22px !important;
}
.hd-helpdesk-surface form[data-helpdesk-comment-form] label {
display: block !important;
margin-bottom: 8px !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
color: var(--hd-muted) !important;
}
.hd-helpdesk-surface form[data-helpdesk-comment-form] input[type="text"],
.hd-helpdesk-surface form[data-helpdesk-comment-form] input[name="subject"],
.hd-helpdesk-surface form[data-helpdesk-comment-form] select,
.hd-helpdesk-surface form[data-helpdesk-comment-form] [contenteditable="true"] {
width: 100% !important;
border: 1px solid rgba(113, 113, 122, 0.70) !important;
border-radius: 16px !important;
background: rgba(3, 7, 18, 0.60) !important;
color: var(--hd-text) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
}
.hd-helpdesk-surface form[data-helpdesk-comment-form] input[name="subject"],
.hd-helpdesk-surface form[data-helpdesk-comment-form] select {
min-height: 52px !important;
padding: 12px 16px !important;
}
.hd-helpdesk-surface form[data-helpdesk-comment-form] [contenteditable="true"] {
min-height: 190px !important;
padding: 18px 20px !important;
line-height: 1.7 !important;
}
.hd-helpdesk-surface [data-helpdesk-html-toolbar] {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.hd-helpdesk-surface [data-helpdesk-html-toolbar] button {
min-height: 34px !important;
border-radius: 10px !important;
border: 1px solid rgba(203, 213, 225, 0.70) !important;
padding: 6px 10px !important;
background: rgba(15, 23, 42, 0.80) !important;
color: var(--hd-text) !important;
font-size: 0.8rem !important;
}
.hd-helpdesk-surface [data-helpdesk-attachment-shell] {
border-radius: 18px !important;
border: 1px dashed rgba(37, 99, 235, 0.85) !important;
padding: 16px !important;
background: rgba(15, 23, 42, 0.38) !important;
}
.hd-helpdesk-surface .hd-select {
appearance: auto !important;
}
@media (max-width: 900px) {
.hd-helpdesk-surface article > div:first-child,
.hd-helpdesk-surface details > summary,
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child,
.hd-helpdesk-surface article > div:nth-child(2),
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:nth-child(2),
.hd-helpdesk-surface details > div {
padding: 20px !important;
}
.hd-ticket-body-card {
min-height: 150px !important;
padding: 20px !important;
}
}
</style>
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-show">
<div class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
@@ -61,7 +242,7 @@
</div>
<div class="p-7 sm:p-10">
<div class="min-h-[18rem] rounded-[1.75rem] border border-zinc-200 bg-zinc-50/80 px-8 py-9 text-zinc-900 shadow-inner dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-100 sm:min-h-[24rem] sm:px-10 sm:py-10">
<div class="hd-ticket-body-card min-h-[18rem] rounded-[1.75rem] border border-zinc-200 bg-zinc-50/80 px-8 py-9 text-zinc-900 shadow-inner dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-100 sm:min-h-[24rem] sm:px-10 sm:py-10">
<div class="prose max-w-none text-lg leading-9 dark:prose-invert sm:text-xl sm:leading-10">
{!! $ticket->body !!}
</div>
Modules/Helpdesk/changelog.yaml
+12
View File
@@ -258,3 +258,15 @@ versions:
- "Reworked the conversation header with consistent professional spacing while keeping the conversation fully collapsed by default."
- "Reworked the Add reply response-document header and expanded the composer controls and rich text editor height for a less squashed professional layout."
- "Kept module.json version in sync with changelog.yaml."
- version: 1.7.3
date: 2026-06-17
type: fixed
summary: "Hardened Helpdesk ticket detail rendering, removed the missing module Vite manifest failure, and applied professional unsquashed document styling."
changes:
- "Guarded the Helpdesk module Vite include so missing public/build/helpdesk/manifest.json no longer causes a 500 error on ticket pages."
- "Removed the duplicate ticket-show Vite call and kept the ticket page usable without a module-specific asset build."
- "Added page-local professional Helpdesk document styling so ticket document, conversation, and Add reply sections have balanced spacing, smaller header icons, non-squashed body areas, and readable editor controls even before module assets are rebuilt."
- "Kept the conversation collapsed by default while preserving the Lotus Notes-style document response workflow."
- "Kept module.json version in sync with changelog.yaml."
Modules/Helpdesk/module.json
+1 -1
View File
@@ -22,5 +22,5 @@
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
],
"files": [],
"version": "1.7.2"
"version": "1.7.3"
}