ui updates for ticket layout
This commit is contained in:
Mark Gregory
@@ -251,36 +251,40 @@
|
||||
</article>
|
||||
|
||||
@if ($ticket->attachments->isNotEmpty())
|
||||
<div class="overflow-hidden rounded-2xl border border-blue-200 bg-white shadow-sm dark:border-blue-900/60 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-r from-blue-700 via-sky-600 to-emerald-600 px-6 py-4 text-white">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="flex items-center gap-2 text-base font-extrabold text-white drop-shadow-sm">
|
||||
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25">
|
||||
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
||||
</span>
|
||||
Ticket attachments
|
||||
</h2>
|
||||
<p class="mt-1 text-sm font-medium text-blue-50/90">
|
||||
Supporting screenshots, documents and logs linked to this ticket.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-extrabold text-emerald-800 shadow-sm ring-1 ring-white/70">
|
||||
<span class="inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>{{ $ticket->attachments->count() }} file(s)
|
||||
<details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" open>
|
||||
<summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
|
||||
<div class="flex min-w-0 items-start gap-5">
|
||||
<span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
|
||||
<i class="fa-solid fa-paperclip text-xl" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Ticket attachments</p>
|
||||
<h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">Supporting files</h2>
|
||||
<p class="text-base font-medium leading-7 text-blue-50/85">Screenshots, documents and logs linked to this ticket.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="inline-flex shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold ring-1 ring-white/20 shadow-sm">
|
||||
<i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
|
||||
{{ $ticket->attachments->count() }} file{{ $ticket->attachments->count() === 1 ? '' : 's' }}
|
||||
<i class="fa-solid fa-chevron-right transition" aria-hidden="true"></i>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div class="grid gap-3 p-6 sm:grid-cols-2">
|
||||
@foreach ($ticket->attachments as $attachment)
|
||||
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank" class="rounded-xl border border-zinc-200 p-3 text-sm hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
|
||||
<div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $attachment->original_name ?? $attachment->original_filename ?? $attachment->filename ?? $attachment->file_name ?? basename($attachment->path ?? $attachment->file_path ?? '') }}</div>
|
||||
<div class="text-xs text-zinc-500">{{ Number::fileSize($attachment->size ?? $attachment->size_bytes ?? 0) }}</div>
|
||||
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank" class="group flex items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 text-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
|
||||
<span class="min-w-0">
|
||||
<span class="block truncate font-bold text-zinc-900 dark:text-zinc-100">{{ $attachment->original_name ?? $attachment->original_filename ?? $attachment->filename ?? $attachment->file_name ?? basename($attachment->path ?? $attachment->file_path ?? '') }}</span>
|
||||
<span class="block text-xs text-zinc-500">{{ Number::fileSize($attachment->size ?? $attachment->size_bytes ?? 0) }}</span>
|
||||
</span>
|
||||
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-700 transition group-hover:bg-blue-600 group-hover:text-white dark:bg-zinc-800 dark:text-zinc-200">
|
||||
<i class="fa-solid fa-download" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@endif
|
||||
|
||||
<section class="space-y-4">
|
||||
|
||||
@@ -270,3 +270,14 @@ versions:
|
||||
- "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."
|
||||
|
||||
|
||||
- version: 1.7.4
|
||||
date: 2026-06-17
|
||||
type: changed
|
||||
summary: "Matched the ticket attachments header to the professional Document responses header styling."
|
||||
changes:
|
||||
- "Reworked the ticket attachments section header to use the same dark professional document header pattern as Document responses."
|
||||
- "Replaced the bright green-blue attachment banner with a consistent navy gradient, balanced icon sizing, document-style title, and professional file count badge."
|
||||
- "Improved attachment file rows with clearer spacing and a download affordance while preserving existing attachment download routes."
|
||||
- "Kept module.json version in sync with changelog.yaml."
|
||||
|
||||
@@ -22,5 +22,5 @@
|
||||
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
|
||||
],
|
||||
"files": [],
|
||||
"version": "1.7.3"
|
||||
"version": "1.7.4"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user