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

refactor: unify artwork card rendering

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-17 14:49:20 +01:00
parent 78151aabfe
commit 980a15f66e
30 changed files with 1145 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/views/_legacy/home/uploads.blade.php
View File

@@ -3,10 +3,14 @@
<div class="thumb-card effect2">
@php
$t = \App\Services\ThumbnailPresenter::present($upload, 'md');
$card = [
'id' => $t['id'] ?? null,
'title' => $t['title'] ?? 'Artwork',
'thumb' => $t['url'] ?? null,
'thumb_srcset' => $t['srcset'] ?? null,
];
@endphp
<a href="/art/{{ $t['id'] }}/{{ Str::slug($t['title'] ?: 'artwork') }}" title="{{ $t['title'] }}" class="thumb-link">
<img src="{{ $t['url'] }}" @if(!empty($t['srcset'])) srcset="{{ $t['srcset'] }}" @endif alt="{{ $t['title'] }}" class="img-responsive">
</a>
<x-artwork-card :art="$card" />
</div>
@endforeach
</div> <!-- end .gallery-grid -->

13
resources/views/_legacy/latest-artworks.blade.php
View File

@@ -14,18 +14,7 @@
<div class="gallery-grid">
@if($artworks)
@foreach($artworks as $art)
<div class="thumb-card effect2">
@if (!empty($art->category_name))
<div class="ribbon gid_{{ $art->gid_num ?? 0 }}" title="{{ $art->category_name }}"><span>{{ $art->category_name }}</span></div>
@endif
<a href="/art/{{ $art->id }}/{{ Str::slug($art->name ?? '') }}" class="thumb-link" title="{{ $art->name }}">
<img src="{{ $art->thumb_url ?? 'https://files.skinbase.org/default/missing_md.webp' }}" @if(!empty($art->thumb_srcset)) srcset="{{ $art->thumb_srcset }}" @endif alt="{{ $art->name }}" class="img-responsive" loading="lazy" decoding="async">
</a>
<div class="thumb-meta">
<div class="thumb-title">{{ $art->name }}</div>
<div class="thumb-author text-muted">by {{ $art->uname ?? 'Unknown' }}</div>
</div>
</div>
<x-artwork-card :art="$art" />
@endforeach
@else
<p class="text-muted">No artworks found.</p>

116
resources/views/_legacy/today-in-history.blade.php
View File

@@ -1,55 +1,79 @@
@extends('layouts.nova')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title ?? 'Today in History', 'url' => route('legacy.today_in_history')],
]);
$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 ?? $art->art_url ?? null,
'thumb' => $art->thumb_url ?? null,
'thumb_url' => $art->thumb_url ?? 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,
])->values();
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp
@section('content')
<x-nova-page-header
section="History"
:title="$page_title ?? 'Today in History'"
icon="fa-calendar-days"
:breadcrumbs="$headerBreadcrumbs"
:description="'Featured artworks uploaded on <span class=&quot;text-white/80 font-medium&quot;>' . e($todayLabel ?? now()->format('F j')) . '</span> in past years.'"
headerClass="pb-6"
/>
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">History</p>
<h1 class="text-3xl font-bold text-white leading-tight">{{ $page_title ?? 'Today in History' }}</h1>
<p class="mt-1 text-sm text-white/50">
Featured artworks uploaded on
<span class="text-white/80 font-medium">{{ $todayLabel ?? now()->format('F j') }}</span>
in past years.
</p>
</div>
</div>
{{-- ── Gallery ── --}}
<div class="px-6 pb-16 md:px-10">
@if($artworks && $artworks->count())
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
@foreach($artworks as $ar)
<a href="{{ $ar->art_url ?? ('/art/' . $ar->id) }}"
class="group relative block overflow-hidden rounded-xl ring-1 ring-white/5 bg-black/20 shadow-md transition-all duration-200 hover:-translate-y-0.5">
<div class="relative aspect-square overflow-hidden bg-neutral-900">
<img src="{{ $ar->thumb_url ?? 'https://files.skinbase.org/default/missing_md.webp' }}"
alt="{{ $ar->name ?? '' }}"
loading="lazy"
decoding="async"
class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.06]"
onerror="this.src='https://files.skinbase.org/default/missing_md.webp'">
{{-- Title overlay on hover --}}
<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-2 py-2
opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<p class="truncate text-xs font-medium text-white">{{ $ar->name ?? 'Untitled' }}</p>
</div>
</div>
</a>
@endforeach
</div>
{{-- Pagination --}}
<div class="mt-10 flex justify-center">
{{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}
</div>
<section class="px-6 pt-8 md:px-10">
@if ($artworks && $artworks->count())
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="today-in-history"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="36"
class="min-h-32"
></div>
@else
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-16 text-center">
<p class="text-4xl mb-4">📅</p>
<p class="text-white/60 text-sm">No featured artworks found for this day in history.</p>
<p class="text-white/30 text-xs mt-1">Check back tomorrow!</p>
<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 featured artworks were found for {{ $todayLabel ?? now()->format('F j') }}.</p>
<p class="text-white/25 text-xs mt-1">When historical features exist for this date, 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

93
resources/views/_legacy/top-favourites.blade.php
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

53
resources/views/components/artwork-card.blade.php
View File

@@ -7,7 +7,7 @@
@php
if (isset($art) && (is_array($art) || $art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection)) {
$first = null;
if (is_array($art)) {
if (is_array($art) && !\Illuminate\Support\Arr::isAssoc($art)) {
$first = reset($art);
} elseif ($art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection) {
$first = $art->first();
@@ -17,6 +17,10 @@
}
}
if (is_array($art) && \Illuminate\Support\Arr::isAssoc($art)) {
$art = (object) $art;
}
$title = trim((string) ($art->name ?? $art->title ?? 'Untitled artwork'));
$author = trim((string) (
@@ -34,6 +38,25 @@
?? ''
));
$rawContentType = trim((string) (
$art->content_type_name
?? $art->content_type
?? $art->content_type_slug
?? ''
));
$contentType = match (strtolower($rawContentType)) {
'artworks', 'artwork' => 'Artwork',
'wallpapers', 'wallpaper' => 'Wallpaper',
'skins', 'skin' => 'Skin',
'photography', 'photo', 'photos' => 'Photography',
'other' => 'Other',
default => $rawContentType !== ''
?
Illuminate\Support\Str::title(str_replace(['-', '_'], ' ', $rawContentType))
: '',
};
$category = trim((string) ($art->category_name ?? $art->category ?? ''));
$avatarUserId = $art->user->id ?? $art->user_id ?? null;
@@ -64,7 +87,8 @@
$likes = $safeInt($art->likes ?? $art->favourites ?? 0);
$comments = $safeInt($art->comments_count ?? $art->comment_count ?? $art->comments ?? 0);
$imgSrc = (string) ($art->thumb ?? $art->thumbnail_url ?? '/images/placeholder.jpg');
$thumbUrl = is_object($art) && method_exists($art, 'thumbUrl') ? $art->thumbUrl('md') : null;
$imgSrc = (string) ($art->thumb ?? $art->thumbnail_url ?? $thumbUrl ?? '/images/placeholder.jpg');
$imgSrcset = (string) ($art->thumb_srcset ?? $art->thumbnail_srcset ?? $imgSrc);
$imgAvifSrcset = (string) ($art->thumb_avif_srcset ?? $imgSrcset);
$imgWebpSrcset = (string) ($art->thumb_webp_srcset ?? $imgSrcset);
@@ -110,14 +134,14 @@
$authorUrl = $username !== '' ? '/@' . strtolower($username) : null;
$metaParts = [];
if ($resolution !== '') {
$metaParts[] = $resolution;
if ($contentType !== '') {
$metaParts[] = $contentType;
}
if ($category !== '') {
$metaParts[] = $category;
}
if ($license !== '') {
$metaParts[] = $license;
if ($resolution !== '') {
$metaParts[] = $resolution;
}
@endphp
@@ -160,21 +184,18 @@
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
<div class="truncate text-sm font-semibold text-white">{{ $title }}</div>
<div class="mt-1 flex items-center justify-between gap-3 text-xs text-white/80">
<span class="truncate flex items-center gap-2">
<img src="{{ $avatarUrl }}" alt="Avatar of {{ e($author) }}" class="w-6 h-6 rounded-full object-cover">
<span class="truncate">
<span>{{ $author }}</span>
@if($username !== '')
<span class="text-white/60">{{ '@' . $username }}</span>
<div class="mt-1 flex items-start justify-between gap-3 text-xs text-white/80">
<span class="flex min-w-0 items-start gap-3">
<img src="{{ $avatarUrl }}" alt="Avatar of {{ e($author) }}" class="w-9 h-9 rounded-full object-cover">
<span class="min-w-0 flex-1">
<span class="block truncate">{{ $author }}@if($username !== '') <span class="text-white/60">{{ '@' . $username }}</span>@endif</span>
@if(!empty($metaParts))
<span class="mt-0.5 block truncate text-[11px] text-white/70">{{ implode(' • ', $metaParts) }}</span>
@endif
</span>
</span>
<span class="shrink-0">❤ {{ $likes }} · 💬 {{ $comments }}</span>
</div>
@if(!empty($metaParts))
<div class="mt-1 text-[11px] text-white/70">{{ implode(' • ', $metaParts) }}</div>
@endif
</div>
</div>

13
resources/views/dashboard/gallery.blade.php
View File

@@ -7,15 +7,12 @@
@if($artworks->isEmpty())
<p class="text-sm text-gray-500">You have not uploaded any artworks yet.</p>
@else
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
@foreach($artworks as $art)
<div class="bg-panel p-3 rounded">
<a href="/art/{{ $art->id }}/{{ Illuminate\Support\Str::slug($art->title ?? 'art') }}">
<img src="{{ $art->thumbUrl('md') ?? 'https://files.skinbase.org/default/missing_md.webp' }}" alt="{{ $art->title }}" class="w-full h-36 object-cover rounded" />
</a>
<div class="mt-2 text-sm">
<a class="font-medium" href="/art/{{ $art->id }}/{{ Illuminate\Support\Str::slug($art->title ?? 'art') }}">{{ $art->title }}</a>
<div class="text-xs text-soft mt-1">Published: {{ optional($art->published_at)->format('Y-m-d') }}</div>
<div class="space-y-3">
<x-artwork-card :art="$art" />
<div class="rounded-xl border border-white/5 bg-white/[0.03] px-3 py-2">
<div class="text-xs text-soft">Published: {{ optional($art->published_at)->format('Y-m-d') }}</div>
<div class="mt-2 flex gap-2">
<a href="{{ route('dashboard.artworks.edit', ['id' => $art->id]) }}" class="text-xs px-2 py-1 bg-black/10 rounded">Edit</a>
<form method="POST" action="{{ route('dashboard.artworks.destroy', ['id' => $art->id]) }}" onsubmit="return confirm('Really delete this artwork?');">

42
resources/views/web/downloads/today.blade.php
View File

@@ -1,28 +1,30 @@
@extends('layouts.nova')
@section('content')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title ?? 'Most Downloaded Today', 'url' => route('legacy.today_downloads')],
]);
@endphp
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Downloads</p>
<h1 class="text-3xl font-bold text-white leading-tight">Most Downloaded Today</h1>
<p class="mt-1 text-sm text-white/50">
Artworks downloaded the most on <time datetime="{{ now()->toDateString() }}">{{ now()->format('d F Y') }}</time>.
</p>
</div>
<div class="flex-shrink-0 flex items-center gap-2">
<span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/25">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Live today
</span>
</div>
</div>
</div>
@section('content')
<x-nova-page-header
section="Downloads"
:title="$page_title ?? 'Most Downloaded Today'"
icon="fa-download"
:breadcrumbs="$headerBreadcrumbs"
:description="'Artworks downloaded the most on <time datetime=&quot;' . e(now()->toDateString()) . '&quot;>' . e(now()->format('d F Y')) . '</time>.'"
headerClass="pb-6"
>
<x-slot name="actions">
<span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/25">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Live today
</span>
</x-slot>
</x-nova-page-header>
{{-- ── Artwork grid ── --}}
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@if ($artworks && $artworks->isNotEmpty())
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-5">
@foreach ($artworks as $art)

9
resources/views/web/gallery.blade.php
View File

@@ -14,15 +14,10 @@
<div class="panel panel-default effect2">
<div class="panel-heading"><strong>User Gallery</strong></div>
<div class="panel-body">
<div class="gallery-grid">
<div class="gallery-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
@foreach($artworks as $art)
<div class="thumb-card effect2">
<a href="/art/{{ $art->id }}/{{ Str::slug($art->name ?? '') }}" class="thumb-link">
<img src="{{ $art->thumb }}" srcset="{{ $art->thumb_srcset }}" alt="{{ $art->name }}" class="img-responsive" loading="lazy" decoding="async">
</a>
<div class="thumb-meta">
<div class="thumb-title">{{ $art->name }}</div>
</div>
<x-artwork-card :art="$art" />
</div>
@endforeach
</div>

1
resources/views/web/home/uploads.blade.php
View File

@@ -66,6 +66,5 @@
@endpush
@push('scripts')
<script src="/js/legacy-gallery-init.js" defer></script>
@endpush