Upload beautify
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
@extends('layouts.legacy')
|
||||
@extends('layouts.nova')
|
||||
|
||||
@php
|
||||
use App\Banner;
|
||||
@@ -8,72 +8,103 @@
|
||||
<div class="container-fluid legacy-page">
|
||||
@php Banner::ShowResponsiveAd(); @endphp
|
||||
|
||||
<div class="category-wrapper">
|
||||
<div class="row">
|
||||
<main id="category-artworks" class="col-md-9">
|
||||
<div class="effect2 page-header-wrap">
|
||||
<header class="page-heading">
|
||||
<div class="category-display"><i class="fa fa-bars fa-fw"></i></div>
|
||||
<div class="pt-0">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="flex min-h-[calc(100vh-64px)]">
|
||||
|
||||
<div id="location_bar">
|
||||
<a href="/{{ $contentType->slug }}" title="{{ $contentType->name }}">{{ $contentType->name }}</a>
|
||||
@foreach ($category->breadcrumbs as $crumb)
|
||||
» <a href="{{ $crumb->url }}" title="{{ $crumb->name }}">{{ $crumb->name }}</a>
|
||||
@endforeach
|
||||
:
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
<h1 class="page-header">{{ $category->name }}</h1>
|
||||
<p style="clear:both">{!! $category->description ?? ($contentType->name . ' artworks on Skinbase.') !!}</p>
|
||||
</header>
|
||||
</div> <!-- end .effect2 -->
|
||||
<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">
|
||||
@foreach($rootCategories as $root)
|
||||
<li>
|
||||
<a class="flex items-center gap-2 hover:text-white" href="{{ $root->url }}"><span class="opacity-70">📁</span> {{ $root->name }}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
@if ($artworks->count())
|
||||
<section id="gallery" class="gallery" aria-live="polite">
|
||||
@foreach ($artworks as $art)
|
||||
@include('legacy._artwork_card', ['art' => $art])
|
||||
@endforeach
|
||||
</section>
|
||||
@else
|
||||
<div class="panel panel-default effect2">
|
||||
<div class="panel-heading"><strong>No Artworks Yet</strong></div>
|
||||
<div class="panel-body">
|
||||
<p>Once uploads arrive they will appear here. Check back soon.</p>
|
||||
<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 $sub)
|
||||
<li><a class="hover:text-white {{ $sub->id === $category->id ? 'font-semibold text-white' : 'text-neutral-400' }}" href="{{ $sub->url }}">{{ $sub->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</aside>
|
||||
|
||||
<div class="paginationMenu text-center">
|
||||
{{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}
|
||||
</div> <!-- end .paginationMenu -->
|
||||
</main> <!-- end #category-artworks -->
|
||||
<!-- MAIN -->
|
||||
<main class="flex-1">
|
||||
<div class="relative overflow-hidden nb-hero-radial">
|
||||
<div class="absolute inset-0 opacity-35"></div>
|
||||
|
||||
<aside id="category-list" class="col-md-3">
|
||||
<div id="artwork_subcategories">
|
||||
<div class="category-toggle"><i class="fa fa-bars fa-fw"></i></div>
|
||||
<div class="relative px-6 py-8 md:px-10 md:py-10">
|
||||
<div class="text-sm text-neutral-400">
|
||||
<a class="hover:text-white" href="/{{ $contentType->slug }}">{{ $contentType->name }}</a>
|
||||
@foreach ($category->breadcrumbs as $crumb)
|
||||
<span class="opacity-50">›</span> <a class="hover:text-white" href="{{ $crumb->url }}">{{ $crumb->name }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<h5 class="browse_categories">Main Categories:</h5>
|
||||
<ul>
|
||||
@foreach ($rootCategories as $root)
|
||||
<li>
|
||||
<a href="{{ $root->url }}" title="{{ $root->name }}"><i class="fa fa-photo fa-fw"></i> {{ $root->name }}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@php
|
||||
// Use the current (last) breadcrumb as the header so
|
||||
// the page shows the leaf category name (e.g. "Winamp").
|
||||
$breadcrumbs = is_array($category->breadcrumbs) ? $category->breadcrumbs : [$category];
|
||||
$headerCategory = end($breadcrumbs) ?: $category;
|
||||
@endphp
|
||||
|
||||
<h5 class="browse_categories">Browse Subcategories:</h5>
|
||||
<ul class="scrollContent" data-mcs-theme="dark">
|
||||
@foreach ($subcategories as $sub)
|
||||
@php $selected = $sub->id === $category->id ? 'selected_group' : ''; @endphp
|
||||
<li class="subgroup {{ $selected }}">
|
||||
<a href="{{ $sub->url }}">{{ $sub->name }}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div> <!-- end #artwork_subcategories -->
|
||||
</aside> <!-- end #category-list -->
|
||||
</div> <!-- end .row -->
|
||||
</div> <!-- end .category-wrapper -->
|
||||
<h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight text-white/95">{{ $headerCategory->name }}</h1>
|
||||
|
||||
<section class="mt-5 bg-white/5 border border-white/10 rounded-2xl shadow-lg">
|
||||
<div class="p-5 md:p-6">
|
||||
<div class="text-lg font-semibold text-white/90">{{ $headerCategory->name }}</div>
|
||||
<p class="mt-2 text-sm leading-6 text-neutral-400">{!! $headerCategory->description ?? ($contentType->name . ' artworks on Skinbase.') !!}</p>
|
||||
</div>
|
||||
</section>
|
||||
{{-- soft fade at bottom of hero to blend into main background --}}
|
||||
<div class="absolute left-0 right-0 bottom-0 h-36 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid -->
|
||||
<section class="px-6 pb-10 md:px-10">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@forelse ($artworks as $art)
|
||||
<a href="{{ $art->url }}" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
|
||||
<div class="aspect-[16/10] bg-neutral-900">
|
||||
<img src="{{ $art->thumbnail_url ?? '/images/placeholder.jpg' }}" alt="{{ $art->title ?? 'Artwork' }}" loading="lazy" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">{{ $art->title ?? 'Artwork' }}</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="panel panel-default effect2">
|
||||
<div class="panel-heading"><strong>No Artworks Yet</strong></div>
|
||||
<div class="panel-body">
|
||||
<p>Once uploads arrive they will appear here. Check back soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-10">
|
||||
@if ($artworks instanceof \Illuminate\Contracts\Pagination\Paginator)
|
||||
{{ $artworks->links() }}
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end .legacy-page -->
|
||||
@endsection
|
||||
|
||||
@@ -106,5 +137,9 @@
|
||||
columns: 1 100%;
|
||||
}
|
||||
}
|
||||
.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%);
|
||||
/* tweak the colors above if the page background differs */
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user