klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

gallery

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-15 16:49:15 +01:00
parent 7734e53d87
commit 7dbfdab40e
9 changed files with 720 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
resources/views/legacy/category-slug.blade.php
View File

@@ -76,15 +76,10 @@
</div>
<!-- Grid -->
<section class="px-6 pb-10 md:px-10">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<section class="px-6 pb-10 md:px-10" data-nova-gallery data-gallery-type="category-slug">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-gallery-grid>
@forelse ($artworks as $art)
<a href="{{ $art->url }}" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
<div class="aspect-[16/10] bg-neutral-900">
<img src="{{ $art->thumbnail_url ?? '/images/placeholder.jpg' }}" alt="{{ $art->title ?? 'Artwork' }}" loading="lazy" class="w-full h-full object-cover" />
</div>
<div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">{{ $art->title ?? 'Artwork' }}</div>
</a>
@include('legacy._artwork_card', ['art' => $art])
@empty
<div class="panel panel-default effect2">
<div class="panel-heading"><strong>No Artworks Yet</strong></div>
@@ -95,11 +90,12 @@
@endforelse
</div>
<div class="flex justify-center mt-10">
<div class="flex justify-center mt-10" data-gallery-pagination>
@if ($artworks instanceof \Illuminate\Contracts\Pagination\Paginator)
{{ $artworks->links() }}
@endif
</div>
<div class="hidden mt-8" data-gallery-skeleton></div>
</section>
</main>
</div>
@@ -110,32 +106,35 @@
@push('styles')
<style>
.gallery {
columns: 5 260px;
column-gap: 16px;
[data-nova-gallery].is-enhanced [data-gallery-grid] {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-auto-rows: 8px;
gap: 1rem;
}
.artwork {
break-inside: avoid;
margin-bottom: 16px;
@media (min-width: 768px) {
/* From 768px up to ~991px show 2 columns */
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
.gallery {
columns: 3 220px;
}
@media (min-width: 1024px) {
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.gallery {
columns: 2 180px;
}
@media (min-width: 2600px) {
/* Very large displays: 5 columns */
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
.gallery {
columns: 1 100%;
}
[data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
[data-nova-gallery].is-enhanced [data-gallery-pagination] { display: none; }
[data-gallery-skeleton].is-loading { display: grid !important; grid-template-columns: inherit; gap: 1rem; }
.nova-skeleton-card {
border-radius: 1rem;
min-height: 180px;
background: linear-gradient(110deg, rgba(255,255,255,.06) 8%, rgba(255,255,255,.12) 18%, rgba(255,255,255,.06) 33%);
background-size: 200% 100%;
animation: novaShimmer 1.2s linear infinite;
}
@keyframes novaShimmer {
to { background-position-x: -200%; }
}
.nb-hero-fade {
background: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(7,10,15,0.9) 60%, rgba(7,10,15,1) 100%);
@@ -143,3 +142,7 @@
}
</style>
@endpush
@push('scripts')
<script src="/js/legacy-gallery-init.js" defer></script>
@endpush