Gregor Klevze
dc51d65440
Forum: - TipTap WYSIWYG editor with full toolbar - @emoji-mart/react emoji picker (consistent with tweets) - @mention autocomplete with user search API - Fix PHP 8.4 parse errors in Blade templates - Fix thread data display (paginator items) - Align forum page widths to max-w-5xl Discover: - Extract shared _nav.blade.php partial - Add missing nav links to for-you page - Add Following link for authenticated users Feed/Posts: - Post model, controllers, policies, migrations - Feed page components (PostComposer, FeedCard, etc) - Post reactions, comments, saves, reports, sharing - Scheduled publishing support - Link preview controller Profile: - Profile page components (ProfileHero, ProfileTabs) - Profile API controller Uploads: - Upload wizard enhancements - Scheduled publish picker - Studio status bar and readiness checklist
95 lines
3.9 KiB
PHP
95 lines
3.9 KiB
PHP
@extends('layouts.nova')
|
|
|
|
@section('content')
|
|
|
|
{{-- ── 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">Discover</p>
|
|
<h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
|
|
<i class="fa-solid fa-wand-magic-sparkles text-yellow-400 text-2xl"></i>
|
|
For You
|
|
</h1>
|
|
<p class="mt-1 text-sm text-white/50">Artworks picked for you based on your taste.</p>
|
|
</div>
|
|
|
|
{{-- Section switcher pills --}}
|
|
@include('web.discover._nav', ['section' => 'for-you'])
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── Artwork grid (React MasonryGallery) ── --}}
|
|
@php
|
|
$galleryArtworks = $artworks->map(fn ($art) => [
|
|
'id' => $art->id,
|
|
'name' => $art->name ?? null,
|
|
'thumb' => $art->thumb_url ?? null,
|
|
'thumb_srcset' => $art->thumb_srcset ?? null,
|
|
'uname' => $art->uname ?? '',
|
|
'username' => $art->uname ?? '',
|
|
'avatar_url' => $art->avatar_url ?? null,
|
|
'category_name' => $art->category_name ?? '',
|
|
'category_slug' => $art->category_slug ?? '',
|
|
'slug' => $art->slug ?? '',
|
|
'width' => $art->width ?? null,
|
|
'height' => $art->height ?? null,
|
|
])->values();
|
|
@endphp
|
|
<div
|
|
data-react-masonry-gallery
|
|
data-artworks="{{ json_encode($galleryArtworks) }}"
|
|
data-gallery-type="for-you"
|
|
data-cursor-endpoint="{{ route('discover.for-you') }}"
|
|
@if (!empty($next_cursor)) data-next-cursor="{{ $next_cursor }}" @endif
|
|
data-limit="40"
|
|
class="min-h-32"
|
|
></div>
|
|
|
|
@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)); }
|
|
[data-gallery-grid].force-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
|
|
}
|
|
@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)); }
|
|
[data-gallery-grid].force-5 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
|
|
}
|
|
@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-gallery-grid].force-5 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
|
|
}
|
|
[data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
|
|
[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%; }
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
@vite('resources/js/entry-masonry-gallery.jsx')
|
|
@endpush
|