Upload beautify

This commit is contained in:
2026-02-14 15:14:12 +01:00
parent e129618910
commit 79192345e3
249 changed files with 24436 additions and 1021 deletions

View File

@@ -1,4 +1,4 @@
@extends('layouts.legacy')
@extends('layouts.nova')
@section('content')
<div class="container-fluid legacy-page">
@@ -11,45 +11,143 @@
</header>
</div>
<div class="container_photo gallery_box">
<div class="grid-sizer"></div>
@foreach($artworks as $art)
@include('legacy._artwork_card', ['art' => $art])
@endforeach
<div class="md:hidden px-4 py-3">
<button id="sidebarToggle" aria-controls="sidebar" aria-expanded="false" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 hover:bg-white/7 border border-white/5">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
<span class="text-sm text-white/90">Categories</span>
</button>
</div>
<div class="paginationMenu text-center">
{{ method_exists($artworks, 'withQueryString') ? $artworks->withQueryString()->links() : '' }}
</div>
<div class="mx-auto w-full">
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</span>
<span class="text-sm text-white/90">Menu</span>
</button>
@if($subcategories && $subcategories->count())
<div id="category-list">
<div id="artwork_subcategories">
<div class="category-toggle"><i class="fa fa-bars fa-fw"></i></div>
<h5 class="browse_categories">Main Categories:</h5>
<ul>
<li><a href="/photography"><i class="fa fa-photo fa-fw"></i> Photography</a></li>
<li><a href="/wallpapers"><i class="fa fa-photo fa-fw"></i> Wallpapers</a></li>
<li><a href="/skins"><i class="fa fa-photo fa-fw"></i> Skins</a></li>
<li><a href="/other"><i class="fa fa-photo fa-fw"></i> Other</a></li>
</ul>
<div class="mt-6 text-sm text-neutral-400">
<div class="font-semibold text-white/80 mb-2">Main Categories:</div>
<ul class="space-y-2">
<li><a class="flex items-center gap-2 hover:text-white" href="/photography"><span class="opacity-70">📷</span> Photography</a></li>
<li><a class="flex items-center gap-2 hover:text-white" href="/wallpapers"><span class="opacity-70">🖼️</span> Wallpapers</a></li>
<li><a class="flex items-center gap-2 hover:text-white" href="/skins"><span class="opacity-70">🧩</span> Skins</a></li>
<li><a class="flex items-center gap-2 hover:text-white" href="/other"><span class="opacity-70"></span> Other</a></li>
</ul>
<h5 class="browse_categories">Browse Subcategories:</h5>
<ul class="scrollContent" data-mcs-theme="dark">
@foreach($subcategories as $skupina)
@php
$slug = \Illuminate\Support\Str::slug($skupina->category_name);
$ctype = strtolower($group);
$addit = (isset($id) && $skupina->category_id == $id) ? 'selected_group' : '' ;
@endphp
<li class="subgroup {{ $addit }}">
<a href="/{{ $ctype }}/{{ $slug }}">{{ $skupina->category_name }}</a>
</li>
<div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
<ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
@foreach($subcategories ?? [] as $skupina)
@php
// Prefer an explicit slug when provided by the model/mapping, otherwise build one from the name
$slug = $skupina->slug ?? \Illuminate\Support\Str::slug($skupina->category_name);
$ctype = strtolower($group ?? 'photography');
$addit = (isset($id) && ($skupina->category_id ?? null) == $id) ? 'selected_group' : '' ;
@endphp
<li class="subgroup {{ $addit }}"><a class="hover:text-white" href="/{{ $ctype }}/{{ $slug }}">{{ $skupina->category_name }}</a></li>
@endforeach
</ul>
<div class="mt-6 font-semibold text-white/80 mb-2">Daily Uploads <span class="text-neutral-400 font-normal">(245)</span></div>
<div class="rounded-xl bg-white/5 border border-white/5 overflow-hidden">
<button class="w-full px-4 py-3 text-left hover:bg-white/5">All</button>
<button class="w-full px-4 py-3 text-left hover:bg-white/5">Hot</button>
</div>
<a class="mt-4 inline-flex items-center gap-2 text-neutral-400 hover:text-white" href="#">
<span>Link, more</span>
<span class="opacity-60"></span>
</a>
</div>
</div>
</aside>
<!-- Mobile overlay (shown when sidebar opens) -->
<div id="sidebarOverlay" class="hidden md:hidden fixed inset-0 bg-black/50 z-30"></div>
<!-- MAIN -->
<main class="flex-1">
<div class="nebula-gallery grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
@foreach($artworks as $art)
@include('legacy._artwork_card', ['art' => $art])
@endforeach
</ul>
</div>
</div>
<div class="paginationMenu text-center mt-6">
{{ method_exists($artworks, 'withQueryString') ? $artworks->withQueryString()->links() : '' }}
</div>
</main>
</div>
@endif
</div>
</div>
@endsection
@push('styles')
<style>
/* Nebula-like gallery tweaks: fixed-height thumbnails, tighter spacing, refined typography */
.nebula-gallery {
margin-top: 1.25rem;
}
.nebula-gallery .artwork a { display: block; }
/* Ensure consistent gap and card sizing across breakpoints */
@media (min-width: 1024px) {
.nebula-gallery { gap: 1rem; }
}
/* Typography refinements to match Nebula */
.nebula-gallery .artwork h3 { font-size: 0.95rem; line-height: 1.15; }
.nebula-gallery .artwork .text-xs { font-size: 0.72rem; }
/* Improve image loading artifact handling */
.nebula-gallery img { background: linear-gradient(180deg,#0b0b0b,#0f0f10); }
/* Remove any default margins on article cards that can create vertical gaps */
.nebula-gallery .artwork { margin: 0; }
/* Ensure grid items don't collapse when overlay hidden */
.nebula-gallery .artwork a { min-height: 0; }
</style>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
var toggle = document.getElementById('sidebarToggle');
var sidebar = document.getElementById('sidebar');
var overlay = document.getElementById('sidebarOverlay');
if (!toggle || !sidebar) return;
function openSidebar() {
sidebar.classList.remove('hidden');
sidebar.classList.add('fixed','left-0','top-0','bottom-0','z-40');
overlay.classList.remove('hidden');
toggle.setAttribute('aria-expanded','true');
}
function closeSidebar() {
sidebar.classList.add('hidden');
sidebar.classList.remove('fixed','left-0','top-0','bottom-0','z-40');
overlay.classList.add('hidden');
toggle.setAttribute('aria-expanded','false');
}
toggle.addEventListener('click', function (e) {
e.preventDefault();
if (sidebar.classList.contains('hidden')) openSidebar(); else closeSidebar();
});
overlay && overlay.addEventListener('click', function () { closeSidebar(); });
// Close on Escape
document.addEventListener('keyup', function (e) { if (e.key === 'Escape') closeSidebar(); });
});
</script>
@endpush