feat: increase gallery grid from 4 to 5 columns per row on desktopfeat: increase gallery grid from 4 to 5 columns per row on desktop
This commit is contained in:
174
resources/views/web/sections.blade.php
Normal file
174
resources/views/web/sections.blade.php
Normal file
@@ -0,0 +1,174 @@
|
||||
@extends('layouts.nova')
|
||||
|
||||
@php
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
// One accent colour set per content-type (cycles if more than 4)
|
||||
$accents = [
|
||||
['ring' => 'ring-sky-500/30', 'bg' => 'bg-sky-500/10', 'text' => 'text-sky-400', 'badge' => 'bg-sky-500/15 text-sky-300', 'pill' => 'hover:bg-sky-500/15 hover:text-sky-300', 'dot' => 'bg-sky-400', 'border' => 'border-sky-500/25'],
|
||||
['ring' => 'ring-violet-500/30', 'bg' => 'bg-violet-500/10', 'text' => 'text-violet-400', 'badge' => 'bg-violet-500/15 text-violet-300', 'pill' => 'hover:bg-violet-500/15 hover:text-violet-300', 'dot' => 'bg-violet-400', 'border' => 'border-violet-500/25'],
|
||||
['ring' => 'ring-amber-500/30', 'bg' => 'bg-amber-500/10', 'text' => 'text-amber-400', 'badge' => 'bg-amber-500/15 text-amber-300', 'pill' => 'hover:bg-amber-500/15 hover:text-amber-300', 'dot' => 'bg-amber-400', 'border' => 'border-amber-500/25'],
|
||||
['ring' => 'ring-emerald-500/30', 'bg' => 'bg-emerald-500/10','text' => 'text-emerald-400','badge' => 'bg-emerald-500/15 text-emerald-300','pill' => 'hover:bg-emerald-500/15 hover:text-emerald-300','dot' => 'bg-emerald-400','border' => 'border-emerald-500/25'],
|
||||
];
|
||||
|
||||
// Map content-type slug → icon SVG paths
|
||||
$typeIcons = [
|
||||
'photography' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>',
|
||||
'wallpapers' => '<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"/>',
|
||||
'skins' => '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
|
||||
'other' => '<path stroke-linecap="round" stroke-linejoin="round" d="M5 3a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7.414A2 2 0 0020.414 6L15 .586A2 2 0 0013.586 0H5z"/>',
|
||||
];
|
||||
$defaultIcon = '<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>';
|
||||
@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-end 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">Browse Sections</h1>
|
||||
<p class="mt-1 text-sm text-white/50">Explore all artwork categories — photography, wallpapers, skins and more.</p>
|
||||
</div>
|
||||
|
||||
{{-- Quick-jump anchor links --}}
|
||||
<nav class="flex flex-wrap gap-2" aria-label="Section jump links">
|
||||
@foreach ($contentTypes as $i => $ct)
|
||||
@php $a = $accents[$i % count($accents)]; @endphp
|
||||
<a href="#section-{{ $ct->slug }}"
|
||||
class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium border border-white/[0.08] bg-white/[0.04] {{ $a['text'] }} hover:{{ $a['bg'] }} transition-colors">
|
||||
<span class="w-1.5 h-1.5 rounded-full {{ $a['dot'] }}"></span>
|
||||
{{ $ct->name }}
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Content type sections ── --}}
|
||||
<div class="px-6 pb-16 md:px-10 space-y-14">
|
||||
|
||||
@forelse ($contentTypes as $i => $ct)
|
||||
@php
|
||||
$a = $accents[$i % count($accents)];
|
||||
$icon = $typeIcons[strtolower($ct->slug)] ?? $defaultIcon;
|
||||
$totalCount = $artworkCountsByType[$ct->id] ?? 0;
|
||||
$roots = $ct->rootCategories;
|
||||
@endphp
|
||||
|
||||
<section id="section-{{ $ct->slug }}" class="scroll-mt-20">
|
||||
|
||||
{{-- Section heading ── --}}
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="flex-shrink-0 w-10 h-10 rounded-xl {{ $a['bg'] }} {{ $a['text'] }} flex items-center justify-center ring-1 {{ $a['ring'] }}">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
{!! $icon !!}
|
||||
</svg>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<h2 class="text-xl font-bold text-white">{{ $ct->name }}</h2>
|
||||
@if ($totalCount > 0)
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $a['badge'] }}">
|
||||
{{ number_format($totalCount) }} artworks
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@if (!empty($ct->description))
|
||||
<p class="mt-0.5 text-sm text-white/45 leading-snug">{{ $ct->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<a href="/{{ strtolower($ct->slug) }}"
|
||||
class="hidden sm:inline-flex flex-shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium border {{ $a['border'] }} {{ $a['text'] }} {{ $a['bg'] }} hover:brightness-110 transition-all">
|
||||
Browse all
|
||||
<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="M9 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Separator line --}}
|
||||
<div class="h-px bg-white/[0.06] mb-6"></div>
|
||||
|
||||
@if ($roots->isEmpty())
|
||||
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-6 py-8 text-center text-sm text-white/35">
|
||||
No categories available yet.
|
||||
</div>
|
||||
@else
|
||||
{{-- Root category cards grid --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
@foreach ($roots as $root)
|
||||
@php $subCats = $root->children; @endphp
|
||||
<div class="group flex flex-col rounded-xl border border-white/[0.06] bg-white/[0.03] hover:border-white/[0.12] hover:bg-white/[0.05] transition-all duration-200 overflow-hidden">
|
||||
|
||||
{{-- Card header --}}
|
||||
<div class="px-4 pt-4 pb-3 border-b border-white/[0.05]">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<a href="{{ $root->url }}"
|
||||
class="block text-sm font-semibold text-white/90 group-hover:{{ $a['text'] }} transition-colors leading-snug truncate">
|
||||
{{ $root->name }}
|
||||
</a>
|
||||
@if (!empty($root->description))
|
||||
<p class="mt-1 text-xs text-white/40 leading-relaxed line-clamp-2">{{ $root->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@if (($root->artwork_count ?? 0) > 0)
|
||||
<span class="flex-shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium {{ $a['badge'] }} whitespace-nowrap">
|
||||
{{ number_format($root->artwork_count) }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Sub-category pills --}}
|
||||
<div class="px-4 py-3 flex-1">
|
||||
@if ($subCats->isEmpty())
|
||||
<span class="text-xs text-white/25 italic">No subcategories</span>
|
||||
@else
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
@foreach ($subCats as $sub)
|
||||
<a href="{{ $sub->url }}"
|
||||
title="{{ $sub->name }}{{ ($sub->artwork_count ?? 0) > 0 ? ' · ' . number_format($sub->artwork_count) . ' artworks' : '' }}"
|
||||
class="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-white/55 bg-white/[0.04] border border-white/[0.06] transition-colors {{ $a['pill'] }}">
|
||||
{{ $sub->name }}
|
||||
@if (($sub->artwork_count ?? 0) > 0)
|
||||
<span class="text-white/30 text-[10px]">{{ number_format($sub->artwork_count) }}</span>
|
||||
@endif
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Card footer link --}}
|
||||
<div class="px-4 pb-3 pt-1">
|
||||
<a href="{{ $root->url }}"
|
||||
class="text-xs {{ $a['text'] }} opacity-60 hover:opacity-100 transition-opacity inline-flex items-center gap-1">
|
||||
View all
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Mobile browse-all link --}}
|
||||
<div class="mt-4 sm:hidden text-center">
|
||||
<a href="/{{ strtolower($ct->slug) }}"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium border {{ $a['border'] }} {{ $a['text'] }} {{ $a['bg'] }}">
|
||||
Browse all {{ $ct->name }}
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</section>
|
||||
@empty
|
||||
<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 sections available.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user