new ataxchments preview code now with proper code

This commit is contained in:
Mark Gregory
2026-06-24 11:04:24 +01:00
parent 40b3a94c00
commit e04644a58d
3 changed files with 129 additions and 30 deletions
@@ -22,6 +22,49 @@
->get();
@endphp
<style>
[data-helpdesk-sidebar-cards] > div > :first-child {
cursor: pointer;
margin-bottom: 0 !important;
border-radius: .75rem !important;
transition: filter .15s ease, transform .15s ease;
}
[data-helpdesk-sidebar-cards] > div > :first-child:hover {
filter: brightness(1.08);
}
[data-helpdesk-sidebar-cards] > div > :first-child::after {
content: "\f078";
float: right;
margin-top: -2.15rem;
font-family: "Font Awesome 6 Free";
font-size: .85rem;
font-weight: 900;
opacity: .9;
transition: transform .15s ease;
}
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :first-child {
margin-bottom: 1rem !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :first-child::after {
transform: rotate(180deg);
}
[data-helpdesk-sidebar-cards] > div > :not(:first-child) {
display: none;
}
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :not(:first-child) {
display: block;
}
</style>
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
<div
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
@@ -45,7 +88,7 @@
<div class="flex flex-wrap gap-2">
<a href="{{ route('helpdesk.index') }}" wire:navigate
class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
<i class="fa-solid fa-list-check mr-2" aria-hidden="true"></i>
<i class="fa-solid fa-gauge-high mr-2" aria-hidden="true"></i>
Dashboard
</a>
@can('update', $ticket)
@@ -185,7 +228,7 @@
<article
class="group/file overflow-hidden rounded-xl border border-zinc-200 bg-white text-xs shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:hover:bg-zinc-900">
@if ($attachment->isImage())
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}" target="_blank"
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}"
class="block aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-900">
<img src="{{ route('helpdesk.attachments.preview', $attachment->id) }}" alt="{{ $attachment->displayName() }}"
class="h-full w-full object-cover transition group-hover/file:scale-[1.02]">
@@ -211,7 +254,7 @@
<div class="mt-3 flex flex-wrap gap-2">
@if ($attachment->canPreview())
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}" target="_blank"
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}"
class="inline-flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-green-700">
<i class="fa-regular fa-eye" aria-hidden="true"></i>
Preview
@@ -892,9 +935,16 @@
const details = document.createElement('details');
details.className = card.className;
details.dataset.helpdeskSidebarCard = 'true';
details.open = false;
const summary = document.createElement('summary');
summary.className = 'cursor-pointer list-none marker:hidden';
header.classList.add('relative', 'pr-10');
const chevron = document.createElement('span');
chevron.className = 'pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-white/80 transition group-open:rotate-180';
chevron.innerHTML = '<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>';
header.appendChild(chevron);
summary.appendChild(header);
const body = document.createElement('div');