186 lines
9.0 KiB
PHP
186 lines
9.0 KiB
PHP
@extends('layouts.nova')
|
|
|
|
@php
|
|
$latestBreadcrumbs = collect([
|
|
(object) ['name' => 'Uploads', 'url' => route('uploads.latest')],
|
|
(object) ['name' => $page_title ?? 'Latest Artworks', 'url' => route('uploads.latest')],
|
|
]);
|
|
$cursorStateLabel = request()->filled('cursor') ? 'Browsing archive' : 'Latest slice';
|
|
$cursorStateCopy = request()->filled('cursor')
|
|
? 'You are viewing an older slice of the cursor-based feed.'
|
|
: 'You are viewing the newest public uploads first.';
|
|
$galleryArtworks = collect($artworks->items())->map(fn ($art) => [
|
|
'id' => $art->id,
|
|
'name' => $art->name ?? 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 ?? '',
|
|
'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 ?? '',
|
|
'slug' => $art->slug ?? '',
|
|
'width' => $art->width ?? null,
|
|
'height' => $art->height ?? null,
|
|
'published_at' => optional($art->published_at)?->toIsoString() ?? null,
|
|
'url' => isset($art->id) ? '/art/' . $art->id . '/' . ($art->slug ?: \Illuminate\Support\Str::slug($art->name ?? 'artwork')) : '#',
|
|
])->values();
|
|
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<x-nova-page-header
|
|
section="Uploads"
|
|
:title="$page_title ?? 'Latest Artworks'"
|
|
icon="fa-sparkles"
|
|
:breadcrumbs="$latestBreadcrumbs"
|
|
description="Fresh public uploads across skins, photography, wallpapers, and the rest of the Skinbase catalog."
|
|
headerClass="pb-6"
|
|
actionsClass="lg:pt-8"
|
|
>
|
|
<x-slot name="actions">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<a
|
|
href="{{ route('uploads.daily') }}"
|
|
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors"
|
|
>
|
|
<i class="fa-solid fa-calendar-day text-sky-300"></i>
|
|
Daily Uploads
|
|
</a>
|
|
<a
|
|
href="{{ route('discover.fresh') }}"
|
|
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-sky-400/20 bg-sky-400/10 text-sky-100 hover:bg-sky-400/15 transition-colors"
|
|
>
|
|
<i class="fa-solid fa-compass text-sky-300"></i>
|
|
Discover Fresh
|
|
</a>
|
|
</div>
|
|
</x-slot>
|
|
</x-nova-page-header>
|
|
|
|
<section class="px-6 pt-8 md:px-10">
|
|
<div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
|
|
<div class="overflow-hidden rounded-[1.5rem] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_34%),linear-gradient(135deg,rgba(11,17,27,0.96),rgba(10,16,24,0.88))] p-5 shadow-[0_20px_70px_rgba(3,7,18,0.24)] md:p-6">
|
|
<div class="flex flex-wrap items-center gap-3 text-sm text-white/58">
|
|
<span class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200">
|
|
<span class="h-2 w-2 rounded-full bg-sky-300"></span>
|
|
Live feed
|
|
</span>
|
|
<span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-xs font-medium text-white/60">
|
|
Ordered by newest first
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-4 md:grid-cols-3">
|
|
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">This page</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($artworks->count()) }}</p>
|
|
<p class="mt-2 text-sm text-white/45">Artworks loaded in the current slice.</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Position</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ $cursorStateLabel }}</p>
|
|
<p class="mt-2 text-sm text-white/45">{{ $cursorStateCopy }}</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Per page</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($artworks->perPage()) }}</p>
|
|
<p class="mt-2 text-sm text-white/45">Balanced for a fast modern gallery load.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
|
|
<div class="rounded-[1.5rem] border border-white/[0.08] bg-white/[0.03] p-5 backdrop-blur-sm">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/38">Gallery mode</p>
|
|
<h2 class="mt-3 text-lg font-semibold text-white">Nova Gallery</h2>
|
|
<p class="mt-2 text-sm leading-6 text-white/52">A denser card wall with the same Skinbase artwork cards used across discover and browse surfaces.</p>
|
|
</div>
|
|
<div class="rounded-[1.5rem] border border-white/[0.08] bg-white/[0.03] p-5 backdrop-blur-sm">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/38">Content mix</p>
|
|
<h2 class="mt-3 text-lg font-semibold text-white">All public uploads</h2>
|
|
<p class="mt-2 text-sm leading-6 text-white/52">Skins, photography, wallpapers, and everything else released publicly, sorted strictly by recency.</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-6 pb-16 pt-8 md:px-10">
|
|
<div
|
|
data-react-masonry-gallery
|
|
data-artworks='@json($galleryArtworks)'
|
|
data-gallery-type="latest-uploads"
|
|
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
|
|
data-limit="{{ $artworks->perPage() }}"
|
|
class="min-h-32"
|
|
></div>
|
|
</section>
|
|
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
[data-nova-gallery].is-enhanced [data-gallery-grid] {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
grid-auto-rows: 8px;
|
|
gap: 1rem;
|
|
}
|
|
@media (min-width: 768px) {
|
|
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
@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)); }
|
|
}
|
|
[data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
|
|
[data-nova-gallery].is-enhanced [data-gallery-pagination] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
[data-nova-gallery].is-enhanced [data-gallery-pagination] ul {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
[data-nova-gallery].is-enhanced [data-gallery-pagination] li a,
|
|
[data-nova-gallery].is-enhanced [data-gallery-pagination] li span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 0.75rem;
|
|
padding: 0 0.75rem;
|
|
background: rgba(255,255,255,0.03);
|
|
color: #e6eef8;
|
|
border: 1px solid rgba(255,255,255,0.04);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
[data-gallery-skeleton].is-loading { display: grid !important; grid-template-columns: inherit; gap: 1rem; }
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
@vite('resources/js/entry-masonry-gallery.jsx')
|
|
@endpush
|