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

updated gallery

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-17 18:34:26 +01:00
parent 7b37259a2c
commit 7da0fd39f7
52 changed files with 1216 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/views/web/authors/top.blade.php
View File

@@ -3,16 +3,29 @@
@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-end sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
<h1 class="text-3xl font-bold text-white leading-tight">Top Authors</h1>
<p class="mt-1 text-sm text-white/50">Most popular members ranked by artwork {{ $metric === 'downloads' ? 'downloads' : 'views' }}.</p>
</div>
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Creators', 'url' => '/creators/top'],
(object) ['name' => 'Top Creators', 'url' => route('creators.top')],
]);
@endphp
{{-- Metric switcher --}}
<nav class="flex items-center gap-2" aria-label="Ranking metric">
<x-nova-page-header
section="Creators"
title="Top Creators"
icon="fa-star"
:breadcrumbs="$headerBreadcrumbs"
:description="'Most popular creators ranked by artwork ' . ($metric === 'downloads' ? 'downloads' : 'views') . '.'"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creators.rising') }}"
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-arrow-trend-up text-xs"></i>
Rising Creators
</a>
<nav class="flex flex-wrap items-center gap-2" aria-label="Ranking metric">
<a href="{{ request()->fullUrlWithQuery(['metric' => 'views']) }}"
class="inline-flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-medium border transition-colors
{{ $metric === 'views' ? 'bg-sky-500/15 text-sky-300 border-sky-500/30' : 'border-white/[0.08] bg-white/[0.04] text-white/55 hover:text-white hover:bg-white/[0.08]' }}">
@@ -31,11 +44,11 @@
Downloads
</a>
</nav>
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Leaderboard ── --}}
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@php
$offset = ($authors->currentPage() - 1) * $authors->perPage();
$isFirstPage = $authors->currentPage() === 1;
@@ -73,15 +86,17 @@
</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center justify-between gap-4">
<img src="{{ $avatarUrl }}" alt="{{ $author->uname }}"
class="w-14 h-14 rounded-full object-cover ring-1 ring-white/[0.12]">
<div class="min-w-0">
<div class="min-w-0 flex-1">
<div class="truncate text-base font-semibold text-white">{{ $author->uname ?? 'Unknown' }}</div>
@if (!empty($author->username))
<div class="truncate text-xs text-white/40">{{ '@' . $author->username }}</div>
@endif
<div class="mt-1 text-lg font-bold {{ $metric === 'downloads' ? 'text-emerald-400' : 'text-sky-400' }}">
</div>
<div class="shrink-0 text-right">
<div class="text-lg font-bold {{ $metric === 'downloads' ? 'text-emerald-400' : 'text-sky-400' }}">
{{ number_format($author->total ?? 0) }}
</div>
</div>

1
resources/views/web/category.blade.php
View File

@@ -77,5 +77,4 @@
@endsection
@push('scripts')
<script src="/js/legacy-gallery-init.js"></script>
@endpush

30
resources/views/web/comments/monthly.blade.php
View File

@@ -1,26 +1,32 @@
@extends('layouts.nova')
@section('content')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title ?? 'Monthly Top Commentators', 'url' => route('legacy.monthly_commentators')],
]);
@endphp
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
<h1 class="text-3xl font-bold text-white leading-tight">Monthly Top Commentators</h1>
<p class="mt-1 text-sm text-white/50">Members who posted the most comments in the last 30 days.</p>
</div>
@section('content')
<x-nova-page-header
section="Community"
:title="$page_title ?? 'Monthly Top Commentators'"
icon="fa-ranking-star"
:breadcrumbs="$headerBreadcrumbs"
description="Members who posted the most comments in the last 30 days."
headerClass="pb-6"
>
<x-slot name="actions">
<span class="flex-shrink-0 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium bg-violet-500/10 text-violet-300 ring-1 ring-violet-500/25">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
Last 30 days
</span>
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Leaderboard ── --}}
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@php
$offset = ($rows->currentPage() - 1) * $rows->perPage();
$isFirstPage = $rows->currentPage() === 1;

39
resources/views/web/creators/rising.blade.php
View File

@@ -2,25 +2,30 @@
@section('content')
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Creators</p>
<h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
<i class="fa-solid fa-arrow-trend-up text-sky-400 text-2xl"></i>
Rising Creators
</h1>
<p class="mt-1 text-sm text-white/50">Creators gaining momentum with the most views over the last 90 days.</p>
</div>
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Creators', 'url' => '/creators/top'],
(object) ['name' => 'Rising Creators', 'url' => route('creators.rising')],
]);
@endphp
<x-nova-page-header
section="Creators"
title="Rising Creators"
icon="fa-arrow-trend-up"
:breadcrumbs="$headerBreadcrumbs"
description="Creators gaining momentum with the most views over the last 90 days."
>
<x-slot name="actions">
<a href="{{ route('creators.top') }}"
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-star text-xs"></i>
Top Creators
</a>
</div>
</div>
</x-slot>
</x-nova-page-header>
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@php
$offset = ($creators->currentPage() - 1) * $creators->perPage();
$isFirstPage = $creators->currentPage() === 1;
@@ -56,16 +61,18 @@
<span class="text-xs font-semibold uppercase tracking-widest text-sky-300/80">Recent Views</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center justify-between gap-4">
<img src="{{ $avatarUrl }}" alt="{{ $creator->uname }}"
class="w-14 h-14 rounded-full object-cover ring-1 ring-white/[0.12]"
onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'" />
<div class="min-w-0">
<div class="min-w-0 flex-1">
<div class="truncate text-base font-semibold text-white">{{ $creator->uname ?? 'Unknown' }}</div>
@if($creator->username ?? null)
<div class="truncate text-xs text-white/40">{{ '@' . $creator->username }}</div>
@endif
<div class="mt-1 text-lg font-bold text-sky-400">{{ number_format($creator->total ?? 0) }}</div>
</div>
<div class="shrink-0 text-right">
<div class="text-lg font-bold text-sky-400">{{ number_format($creator->total ?? 0) }}</div>
</div>
</div>
</a>

35
resources/views/web/daily-uploads.blade.php
View File

@@ -1,27 +1,36 @@
@extends('layouts.nova')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title ?? 'Daily Uploads', 'url' => route('legacy.daily_uploads')],
]);
@endphp
@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">Skinbase</p>
<h1 class="text-3xl font-bold text-white leading-tight">Daily Uploads</h1>
<p class="mt-1 text-sm text-white/50">Browse all artworks uploaded on a specific date.</p>
</div>
<a href="{{ route('uploads.latest') }}"
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">
<x-nova-page-header
section="Uploads"
:title="$page_title ?? 'Daily Uploads'"
icon="fa-calendar-day"
:breadcrumbs="$headerBreadcrumbs"
description="Browse all artworks uploaded on a specific date."
headerClass="pb-6"
>
<x-slot name="actions">
<a
href="{{ route('uploads.latest') }}"
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"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Latest Uploads
</a>
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Date strip ── --}}
<div class="px-6 md:px-10 pb-5">
<div class="px-6 pt-8 md:px-10 pb-5">
<div class="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none" id="dateStrip">
@foreach($dates as $i => $d)
<button type="button"

55
resources/views/web/discover/for-you.blade.php
View File

@@ -1,23 +1,28 @@
@extends('layouts.nova')
@php
$discoverBreadcrumbs = collect([
(object) ['name' => 'Discover', 'url' => '/discover/trending'],
(object) ['name' => 'For You', 'url' => '/discover/for-you'],
]);
@endphp
@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 --}}
<x-nova-page-header
section="Discover"
title="For You"
icon="fa-wand-magic-sparkles"
:breadcrumbs="$discoverBreadcrumbs"
description="Artworks picked for you based on your taste."
headerClass="pb-6"
actionsClass="lg:pt-8"
iconClass="text-yellow-400"
>
<x-slot name="actions">
@include('web.discover._nav', ['section' => 'for-you'])
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Artwork grid (React MasonryGallery) ── --}}
@php
@@ -36,15 +41,17 @@
'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>
<section class="px-6 pt-8 md:px-10">
<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>
</section>
@endsection

54
resources/views/web/discover/index.blade.php
View File

@@ -1,25 +1,27 @@
@extends('layouts.nova')
@php
$discoverBreadcrumbs = collect([
(object) ['name' => 'Discover', 'url' => '/discover/trending'],
(object) ['name' => $page_title ?? 'Discover', 'url' => request()->path()],
]);
@endphp
@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 {{ $icon ?? 'fa-compass' }} text-sky-400 text-2xl"></i>
{{ $page_title ?? 'Discover' }}
</h1>
@isset($description)
<p class="mt-1 text-sm text-white/50">{{ $description }}</p>
@endisset
</div>
{{-- Section switcher pills --}}
<x-nova-page-header
section="Discover"
:title="$page_title ?? 'Discover'"
:icon="$icon ?? 'fa-compass'"
:breadcrumbs="$discoverBreadcrumbs"
:description="$description ?? null"
headerClass="pb-6"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
@include('web.discover._nav', ['section' => $section ?? ''])
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Artwork grid (React MasonryGallery) ── --}}
@php
@@ -39,14 +41,16 @@
])->values();
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="{{ $section ?? 'discover' }}"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="24"
class="min-h-32"
></div>
<section class="px-6 pt-8 md:px-10">
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="{{ $section ?? 'discover' }}"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="24"
class="min-h-32"
></div>
</section>
@endsection

119
resources/views/web/featured-artworks.blade.php
View File

@@ -1,49 +1,84 @@
@extends('layouts.nova')
@php
$featuredBreadcrumbs = collect([
(object) ['name' => 'Featured', 'url' => request()->path()],
(object) ['name' => $page_title ?? 'Featured Artworks', 'url' => request()->fullUrl()],
]);
$galleryArtworks = collect($artworks->items())->map(fn ($art) => [
'id' => $art->id,
'name' => $art->name ?? null,
'slug' => $art->slug ?? null,
'url' => $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,
'category_name' => $art->category_name ?? '',
'category_slug' => $art->category_slug ?? '',
'width' => $art->width ?? null,
'height' => $art->height ?? null,
])->values();
$galleryNextPageUrl = $artworks->nextPageUrl();
@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 ?? 'Featured Artworks' }}</h1>
</header>
<div class="mb-3">
<strong>Show:</strong>
<ul id="recentTab" class="list-inline">
@foreach($artworkTypes as $k => $label)
<li class="list-inline-item">
<a href="/featured-artworks?type={{ (int)$k }}" @if((int)$k === (int)$type) class="active" @endif>{{ $label }}</a>
</li>
@endforeach
</ul>
<br style="clear:both">
</div>
</div>
@if($artworks)
<div class="container_photo gallery_box">
@foreach($artworks as $art)
@php
$card = (object) [
'url' => url('/art/' . ($art->id ?? '') . '/' . \Illuminate\Support\Str::slug($art->name ?? '')),
'thumb' => $art->thumb_url ?? 'https://files.skinbase.org/default/missing_md.webp',
'thumb_srcset' => $art->thumb_srcset ?? null,
'name' => $art->name ?? '',
'uname' => $art->uname ?? 'Unknown',
'gid_num' => $art->gid_num ?? 0,
'category_name' => $art->category_name ?? '',
];
@endphp
@include('web.partials._artwork_card', ['art' => $card])
<x-nova-page-header
section="Featured"
:title="$page_title ?? 'Featured Artworks'"
icon="fa-star"
:breadcrumbs="$featuredBreadcrumbs"
description="Browse staff-picked and community-highlighted artwork in the shared gallery feed."
headerClass="pb-6"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<div class="flex flex-wrap items-center gap-2 text-sm">
@foreach($artworkTypes as $k => $label)
<a
href="{{ url()->current() }}?type={{ (int) $k }}"
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {{ (int) $k === (int) $type ? 'bg-amber-500/20 text-amber-200 ring-1 ring-amber-400/30' : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}"
>
{{ $label }}
</a>
@endforeach
</div>
@else
<p class="text-muted">No artworks found.</p>
@endif
</x-slot>
</x-nova-page-header>
<div class="paginationMenu text-center">
@if($artworks){{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}@endif
</div>
</div>
<section class="px-6 pt-8 md:px-10">
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="featured"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="39"
class="min-h-32"
></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

80
resources/views/web/stories/dashboard.blade.php
View File

@@ -1,31 +1,63 @@
@extends('layouts.nova.content-layout')
@extends('layouts.nova')
@php
$hero_title = 'My Stories';
$hero_description = 'Drafts, published stories, and archived work in one creator dashboard.';
@endphp
@push('head')
<meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
@endpush
@section('page-content')
<div class="space-y-8">
<div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<div>
<h2 class="text-lg font-semibold text-white">Creator Story Dashboard</h2>
<p class="text-sm text-gray-300">Write, schedule, review, and track your stories.</p>
</div>
<a href="{{ route('creator.stories.create') }}" class="rounded-xl border border-sky-400/40 bg-sky-500/15 px-4 py-2 text-sm font-semibold text-sky-200 transition hover:scale-[1.02] hover:bg-sky-500/25">Write Story</a>
</div>
@section('content')
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(100vh-64px)]">
<main class="w-full">
<x-nova-page-header
section="Creator"
title="My Stories"
icon="fa-pen-nib"
:breadcrumbs="collect([
(object) ['name' => 'Creator', 'url' => route('creator.stories.index')],
(object) ['name' => 'My Stories', 'url' => route('creator.stories.index')],
])"
description="Drafts, published stories, and archived work in one creator dashboard."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creator.stories.create') }}"
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white">
<i class="fa-solid fa-pen text-xs"></i>
Write Story
</a>
</x-slot>
</x-nova-page-header>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<section class="px-6 pb-16 pt-8 md:px-10">
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Drafts</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($drafts->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Published</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($publishedStories->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
<p class="text-xs uppercase tracking-widest text-white/35">Archived</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($archivedStories->count()) }}</p>
</div>
</div>
<div class="space-y-8">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Drafts</h3>
@if($drafts->isEmpty())
<p class="text-sm text-gray-400">No drafts yet.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($drafts as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<div class="flex items-start justify-between gap-3">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<span class="rounded-full border border-gray-600 px-2 py-1 text-xs uppercase tracking-wide text-gray-300">{{ str_replace('_', ' ', $story->status) }}</span>
<span class="rounded-full border border-white/[0.08] px-2 py-1 text-xs uppercase tracking-wide text-white/55">{{ str_replace('_', ' ', $story->status) }}</span>
</div>
<p class="mt-2 text-xs text-gray-400">Last edited {{ optional($story->updated_at)->diffForHumans() }}</p>
@if($story->rejected_reason)
@@ -45,14 +77,14 @@
@endif
</section>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Published Stories</h3>
@if($publishedStories->isEmpty())
<p class="text-sm text-gray-400">No published stories yet.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($publishedStories as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<div class="flex items-start justify-between gap-3">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<span class="rounded-full border border-emerald-500/40 px-2 py-1 text-xs uppercase tracking-wide text-emerald-200">{{ str_replace('_', ' ', $story->status) }}</span>
@@ -69,14 +101,14 @@
@endif
</section>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Archived Stories</h3>
@if($archivedStories->isEmpty())
<p class="text-sm text-gray-400">No archived stories.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($archivedStories as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<p class="mt-2 text-xs text-gray-400">Archived {{ optional($story->updated_at)->diffForHumans() }}</p>
<div class="mt-3 flex flex-wrap gap-3 text-xs">
@@ -87,5 +119,11 @@
</div>
@endif
</section>
</div>
</section>
</main>
</div>
</div>
</div>
</div>
@endsection

32
resources/views/web/stories/index.blade.php
View File

@@ -11,21 +11,23 @@
];
@endphp
<div class="relative overflow-hidden nb-hero-radial border-b border-white/10">
<div class="absolute inset-0 nb-hero-gradient" aria-hidden="true"></div>
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,#E07A2130,transparent)]" aria-hidden="true"></div>
<div class="relative px-6 py-12 md:px-10 md:py-14">
<div class="mt-2 py-4">
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-4">Browse</p>
<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white/95 leading-tight flex items-center gap-3">
<i class="fa-solid fa-newspaper text-sky-400 text-3xl"></i>
Browse Stories
</h1>
<p class="mt-3 text-base text-neutral-400 max-w-3xl">List of all published stories across tutorials, creator journals, interviews, and project breakdowns.</p>
</div>
</div>
</div>
<x-nova-page-header
section="Stories"
title="Browse Stories"
icon="fa-newspaper"
:breadcrumbs="$breadcrumbs ?? collect()"
description="List of all published stories across tutorials, creator journals, interviews, and project breakdowns."
contentClass="max-w-3xl"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creator.stories.create') }}"
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-pen-nib text-xs"></i>
Write Story
</a>
</x-slot>
</x-nova-page-header>
<div class="border-b border-white/10 bg-nova-900/90 backdrop-blur-md">
<div class="px-6 md:px-10">