refactor: unify artwork card rendering

This commit is contained in:
2026-03-17 14:49:20 +01:00
parent 78151aabfe
commit 980a15f66e
30 changed files with 1145 additions and 656 deletions

View File

@@ -1,32 +1,79 @@
@extends('layouts.nova')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title, 'url' => route('legacy.top_favourites')],
]);
$galleryArtworks = collect(method_exists($artworks, 'items') ? $artworks->items() : [])->map(fn ($art) => [
'id' => $art->id ?? null,
'name' => $art->name ?? null,
'slug' => $art->slug ?? null,
'url' => $art->url ?? null,
'thumb' => $art->thumb_url ?? $art->thumb ?? null,
'thumb_url' => $art->thumb_url ?? $art->thumb ?? null,
'thumb_srcset' => $art->thumb_srcset ?? null,
'uname' => $art->uname ?? '',
'username' => $art->username ?? $art->uname ?? '',
'avatar_url' => $art->avatar_url ?? null,
'content_type_name' => $art->content_type_name ?? '',
'content_type_slug' => $art->content_type_slug ?? '',
'category_name' => $art->category_name ?? '',
'category_slug' => $art->category_slug ?? '',
'width' => $art->width ?? null,
'height' => $art->height ?? null,
'favourites' => (int) ($art->favourites ?? $art->num ?? 0),
])->values();
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp
@section('content')
<div class="container-fluid legacy-page">
<div class="effect2 page-header-wrap">
<header class="page-heading">
<h1 class="page-header">{{ $page_title }}</h1>
<p>Most popular artworks which users added in their favourites</p>
</header>
</div>
<x-nova-page-header
section="Favourites"
:title="$page_title"
icon="fa-heart"
:breadcrumbs="$headerBreadcrumbs"
description="Most popular artworks which users added in their favourites."
headerClass="pb-6"
/>
<section class="px-6 pt-8 md:px-10">
@if ($artworks && $artworks->count())
<div class="container_photo gallery_box">
<div class="grid-sizer"></div>
@foreach ($artworks as $art)
@include('legacy::_artwork_card', ['art' => $art])
@endforeach
</div>
<div class="paginationMenu text-center">
{{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}
</div>
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="top-favourites"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="21"
class="min-h-32"
></div>
@else
<div class="panel panel-default effect2">
<div class="panel-heading"><strong>No Artworks Yet</strong></div>
<div class="panel-body">
<p>Once uploads arrive they will appear here. Check back soon.</p>
</div>
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
<p class="text-white/40 text-sm">No artworks have been favourited yet.</p>
<p class="text-white/25 text-xs mt-1">Once members start saving artworks, they will appear here.</p>
</div>
@endif
</div>
</section>
@endsection
@push('styles')
<style>
@media (min-width: 1024px) {
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 2600px) {
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
</style>
@endpush
@push('scripts')
@vite('resources/js/entry-masonry-gallery.jsx')
@endpush