Vasyka/autocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: photo lightbox with prev/next navigation on dashboard

Browse Source 
Replace link-to-new-tab with Alpine.js lightbox overlay. Clicking a
thumbnail opens a full-screen dark overlay with the full-size image,
prev/next arrows (keyboard ←/→ supported), counter, and close button
(ESC or ✕ or click outside). No external libraries.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vasyka
2026-09-08 12:21:37 +00:00
parent 8eb9d43525
commit c66b895948
1 changed files with 72 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/filament/tenant/pages/work-order-dashboard.blade.php
+49 -7
View File
@@ -697,7 +697,20 @@
<div x-show="tab === 'photos'" x-cloak>
@php $photos = $wo->getMedia('photos'); @endphp
{{-- Upload --}}
{{-- Lightbox + Gallery --}}
<div x-data="{
open: false,
idx: 0,
urls: {{ $photos->map(fn($p) => $p->getFullUrl())->values()->toJson() }},
show(i) { this.idx = i; this.open = true; },
prev() { this.idx = (this.idx - 1 + this.urls.length) % this.urls.length; },
next() { this.idx = (this.idx + 1) % this.urls.length; },
}"
@keydown.escape.window="open = false"
@keydown.arrow-left.window="open && prev()"
@keydown.arrow-right.window="open && next()">
{{-- Upload bar --}}
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;">
<label style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;">
📎 {{ __('Alege foto') }}
@@ -711,14 +724,17 @@
@endif
</div>
{{-- Gallery --}}
{{-- Thumbnail grid --}}
@if ($photos->isNotEmpty())
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;">
@foreach ($photos as $ph)
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;">
@foreach ($photos as $i => $ph)
<div style="position:relative;">
<a href="{{ $ph->getFullUrl() }}" target="_blank">
<img src="{{ $ph->getFullUrl() }}" style="width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--wd-border);">
</a>
<button type="button" @click="show({{ $i }})"
style="display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;">
<img src="{{ $ph->getFullUrl() }}"
style="width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--wd-border);transition:opacity .15s;"
@mouseenter="$el.style.opacity='.82'" @mouseleave="$el.style.opacity='1'">
</button>
<button type="button"
wire:click="deletePhoto({{ $ph->id }})"
wire:confirm="{{ __('Șterge fotografia?') }}"
@@ -729,6 +745,32 @@
@else
<div class="wd-empty">{{ __('Nicio fotografie') }}</div>
@endif
{{-- Lightbox overlay --}}
<div x-show="open" x-cloak
style="position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;"
@click.self="open = false">
{{-- Prev --}}
<button type="button" @click="prev()" x-show="urls.length > 1"
style="position:absolute;left:16px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#8249;</button>
{{-- Image --}}
<img :src="urls[idx]"
style="max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);">
{{-- Next --}}
<button type="button" @click="next()" x-show="urls.length > 1"
style="position:absolute;right:16px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#8250;</button>
{{-- Close --}}
<button type="button" @click="open = false"
style="position:absolute;top:14px;right:18px;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#10005;</button>
{{-- Counter --}}
<div style="position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem;" x-text="(idx+1) + ' / ' + urls.length" x-show="urls.length > 1"></div>
</div>
</div>
</div>
{{-- ── DOCUMENTS TAB ── --}}