updated gallery

This commit is contained in:
2026-03-17 18:34:26 +01:00
parent 7b37259a2c
commit 7da0fd39f7
52 changed files with 1216 additions and 870 deletions

View File

@@ -1,17 +1,30 @@
@extends('layouts.nova')
@section('content')
<div class="container mx-auto py-8">
<h1 class="text-2xl font-semibold mb-4">Comments</h1>
<x-nova-page-header
section="Dashboard"
title="Comments"
icon="fa-comments"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Comments', 'url' => route('dashboard.comments')],
])"
description="Comments across your dashboard activity and conversations."
/>
<div class="px-6 pb-16 pt-8 md:px-10">
@if(empty($comments))
<p class="text-sm text-gray-500">No comments to show.</p>
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
<p class="text-sm text-white/40">No comments to show.</p>
</div>
@else
<ul class="space-y-2">
@foreach($comments as $c)
<li>{{ $c }}</li>
@endforeach
</ul>
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-6">
<ul class="space-y-2">
@foreach($comments as $c)
<li class="text-sm text-white/75">{{ $c }}</li>
@endforeach
</ul>
</div>
@endif
</div>
@endsection

View File

@@ -25,59 +25,32 @@
@vite('resources/js/entry-masonry-gallery.jsx')
@endpush
@push('head')
<style>
.nb-hero-fade {
background: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(7,10,15,0.9) 60%, rgba(7,10,15,1) 100%);
}
.nb-hero-gradient {
background: linear-gradient(135deg, rgba(224,122,33,0.08) 0%, rgba(15,23,36,0) 50%, rgba(21,36,58,0.4) 100%);
animation: nb-hero-shimmer 8s ease-in-out infinite alternate;
}
@keyframes nb-hero-shimmer {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
</style>
@endpush
@section('content')
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
<main class="w-full">
<div class="relative overflow-hidden nb-hero-radial">
<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-10 md:px-10 md:py-14">
<nav class="flex items-center gap-1.5 flex-wrap text-sm text-neutral-400" aria-label="Breadcrumb">
<a class="hover:text-white transition-colors" href="/browse">Gallery</a>
<span class="opacity-40" aria-hidden="true"></span>
<span class="text-white/85">Favourites</span>
</nav>
<div class="mt-4 py-5">
<h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white/95 leading-tight">
My Favourites
</h1>
<p class="mt-2 text-sm leading-6 text-neutral-400 max-w-xl">
Artworks you saved, displayed in the same gallery layout as Browse.
</p>
@if($artworks->total() > 0)
<div class="mt-3 flex items-center gap-1.5 text-xs text-neutral-500">
<svg class="h-3.5 w-3.5 text-accent/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<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>
<span>{{ number_format($artworks->total()) }} artworks</span>
</div>
@endif
</div>
</div>
<div class="absolute left-0 right-0 bottom-0 h-16 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
</div>
<x-nova-page-header
section="Dashboard"
title="My Favourites"
icon="fa-heart"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Favourites', 'url' => route('dashboard.favorites')],
])"
description="Artworks you saved, displayed in the same gallery layout as Browse."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
@if($artworks->total() > 0)
<div class="inline-flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-sm text-white/60">
<i class="fa-solid fa-images text-xs text-sky-300"></i>
<span>{{ number_format($artworks->total()) }} artworks</span>
</div>
@endif
</x-slot>
</x-nova-page-header>
<section class="px-6 pb-10 pt-8 md:px-10">
@if($artworks->isEmpty())

View File

@@ -1,94 +1,111 @@
@extends('layouts.nova')
@section('content')
<div class="px-6 pt-10 pb-16 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Dashboard</p>
<h1 class="text-3xl font-bold text-white leading-tight">People I Follow</h1>
<p class="mt-1 text-sm text-white/50">Creators and members you follow, with quick stats and recent follow time.</p>
</div>
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
<main class="w-full">
<x-nova-page-header
section="Dashboard"
title="People I Follow"
icon="fa-user-group"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Following', 'url' => route('dashboard.following')],
])"
description="Creators and members you follow, with quick stats and recent follow time."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('discover.trending') }}"
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-compass text-xs"></i>
Discover creators
</a>
</x-slot>
</x-nova-page-header>
<a href="{{ route('discover.trending') }}"
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-compass text-xs"></i>
Discover creators
</a>
</div>
<section class="px-6 pb-16 pt-8 md:px-10">
@if($following->isEmpty())
<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">You are not following anyone yet.</p>
<a href="{{ route('discover.trending') }}" class="mt-4 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-compass text-xs"></i>
Start following creators
</a>
</div>
@else
@php
$firstFollow = $following->getCollection()->first();
$latestFollowedAt = $firstFollow && !empty($firstFollow->followed_at)
? \Carbon\Carbon::parse($firstFollow->followed_at)->diffForHumans()
: null;
@endphp
<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">Following</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->total()) }}</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">On this page</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->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">Last followed</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ $latestFollowedAt ?? '—' }}</p>
</div>
</div>
<div class="rounded-xl border border-white/[0.06] overflow-hidden">
<div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-3 bg-white/[0.03] border-b border-white/[0.06]">
<span class="text-xs font-semibold uppercase tracking-widest text-white/30">Creator</span>
<span class="hidden sm:block text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Stats</span>
<span class="text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Followed</span>
</div>
<div class="divide-y divide-white/[0.04]">
@foreach($following as $f)
@php
$displayName = $f->name ?: $f->uname;
@endphp
<a href="{{ $f->profile_url }}"
class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-4 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-3 min-w-0">
<img src="{{ $f->avatar_url }}"
alt="{{ $displayName }}"
class="w-11 h-11 rounded-full object-cover flex-shrink-0 ring-1 ring-white/[0.10]"
onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'">
<div class="min-w-0">
<div class="truncate text-sm font-semibold text-white/90">{{ $displayName }}</div>
@if(!empty($f->username))
<div class="truncate text-xs text-white/35">{{ '@' . $f->username }}</div>
@endif
@if($following->isEmpty())
<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">You are not following anyone yet.</p>
<a href="{{ route('discover.trending') }}" class="mt-4 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-compass text-xs"></i>
Start following creators
</a>
</div>
</div>
@else
@php
$firstFollow = $following->getCollection()->first();
$latestFollowedAt = $firstFollow && !empty($firstFollow->followed_at)
? \Carbon\Carbon::parse($firstFollow->followed_at)->diffForHumans()
: null;
@endphp
<div class="hidden sm:block text-right text-xs text-white/55">
{{ number_format((int) $f->uploads) }} uploads · {{ number_format((int) $f->followers_count) }} followers
</div>
<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">Following</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->total()) }}</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">On this page</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->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">Last followed</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ $latestFollowedAt ?? '—' }}</p>
</div>
</div>
<div class="text-right text-xs text-white/45 whitespace-nowrap">
{{ !empty($f->followed_at) ? \Carbon\Carbon::parse($f->followed_at)->diffForHumans() : '—' }}
</div>
</a>
@endforeach
<div class="rounded-xl border border-white/[0.06] overflow-hidden">
<div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-3 bg-white/[0.03] border-b border-white/[0.06]">
<span class="text-xs font-semibold uppercase tracking-widest text-white/30">Creator</span>
<span class="hidden sm:block text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Stats</span>
<span class="text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Followed</span>
</div>
<div class="divide-y divide-white/[0.04]">
@foreach($following as $f)
@php
$displayName = $f->name ?: $f->uname;
@endphp
<a href="{{ $f->profile_url }}"
class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-4 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-3 min-w-0">
<img src="{{ $f->avatar_url }}"
alt="{{ $displayName }}"
class="w-11 h-11 rounded-full object-cover flex-shrink-0 ring-1 ring-white/[0.10]"
onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'">
<div class="min-w-0">
<div class="truncate text-sm font-semibold text-white/90">{{ $displayName }}</div>
@if(!empty($f->username))
<div class="truncate text-xs text-white/35">{{ '@' . $f->username }}</div>
@endif
</div>
</div>
<div class="hidden sm:block text-right text-xs text-white/55">
{{ number_format((int) $f->uploads) }} uploads · {{ number_format((int) $f->followers_count) }} followers
</div>
<div class="text-right text-xs text-white/45 whitespace-nowrap">
{{ !empty($f->followed_at) ? \Carbon\Carbon::parse($f->followed_at)->diffForHumans() : '—' }}
</div>
</a>
@endforeach
</div>
</div>
<div class="mt-8 flex justify-center">
{{ $following->links() }}
</div>
@endif
</section>
</main>
</div>
</div>
<div class="mt-8 flex justify-center">
{{ $following->links() }}
</div>
@endif
</div>
</div>
@endsection