davidl/asset-management-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp public asset view with marketplace-style photo gallery

Browse Source
This commit is contained in:
Arya Dwi Putra
2025-12-02 08:04:49 +07:00
parent 90a68dc110
commit 2b9985bbc7
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/views/pages/landing/asset-show.blade.php
View File

@@ -3,7 +3,7 @@
@section('content')
<section class="section" id="home">
<div class="container">
<div class="row g-4 align-items-center">
<div class="row g-4 align-items-start">
<div class="col-lg-6">
<div class="d-inline-flex align-items-center gap-2 text-default badge bg-white border fs-13 rounded-pill">
<span class="avatar avatar-xs avatar-rounded bg-warning"><i class="ri-qr-code-fill fs-14"></i></span>Asset Detail
@@ -44,15 +44,17 @@
<div class="col-lg-6">
<div class="card custom-card">
<div class="card-body">
<div class="row g-2">
@php $firstPhoto = $asset->photos->first(); @endphp
<div class="mb-3 text-center">
<img id="main-asset-photo" src="{{ $firstPhoto ? asset('storage/'.$firstPhoto->path) : asset('landing-asset-hero.jpg') }}" alt="foto aset" class="img-fluid rounded" style="height:320px;object-fit:cover;">
</div>
<div class="d-flex gap-2 flex-wrap justify-content-center">
@forelse($asset->photos as $photo)
<div class="col-6 col-md-4">
<a href="{{ asset('storage/'.$photo->path) }}" target="_blank" class="d-block">
<img src="{{ asset('storage/'.$photo->path) }}" class="img-fluid rounded" style="height:140px;object-fit:cover;" alt="foto aset">
</a>
</div>
<button class="thumb-btn border-0 p-0 bg-transparent" data-src="{{ asset('storage/'.$photo->path) }}">
<img src="{{ asset('storage/'.$photo->path) }}" class="img-thumbnail {{ $loop->first ? 'border border-2 border-primary' : '' }}" style="width:90px;height:90px;object-fit:cover;" alt="foto aset">
</button>
@empty
<div class="col-12 text-muted small">Belum ada foto aset.</div>
<span class="text-muted small">Belum ada foto aset.</span>
@endforelse
</div>
</div>
@@ -61,4 +63,18 @@
</div>
</div>
</section>
@section('scripts')
<script>
document.querySelectorAll('.thumb-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
const main = document.getElementById('main-asset-photo');
main.src = this.dataset.src;
document.querySelectorAll('.thumb-btn img').forEach(img => img.classList.remove('border-primary','border','border-2'));
this.querySelector('img').classList.add('border','border-2','border-primary');
});
});
</script>
@endsection
@endsection