Upload beautify
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user