klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-25 19:11:23 +01:00
parent 5c97488e80
commit 0032aec02f
131 changed files with 15674 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
resources/views/web/daily-uploads.blade.php
View File

@@ -1,47 +1,111 @@
@extends('layouts.nova')
@section('content')
<div class="container-fluid legacy-page">
<div class="effect2 page-header-wrap">
<header class="page-heading">
<h1 class="page-header">Daily Uploads</h1>
<p>List of all latest uploaded Artworks - <strong>Skins</strong>, <strong>Photography</strong> and <strong>Wallpapers</strong> to Skinbase ordered by upload date.</p>
</header>
</div>
<div class="panel panel-default uploads-panel effect2">
<div class="panel-body">
<b>Choose date:</b>
<ul id="recentTab">
@foreach($dates as $i => $d)
<li id="tab-{{ $i+1 }}" data-iso="{{ $d['iso'] }}">{{ $d['label'] }}</li>
@endforeach
</ul>
<div id="myContent">
@include('web.partials.daily-uploads-grid', ['arts' => $recent])
</div>
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-center 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">Daily Uploads</h1>
<p class="mt-1 text-sm text-white/50">Browse all artworks uploaded on a specific date.</p>
</div>
<a href="{{ route('uploads.latest') }}"
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">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
<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>
Latest Uploads
</a>
</div>
</div>
{{-- ── Date strip ── --}}
<div class="px-6 md:px-10 pb-5">
<div class="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none" id="dateStrip">
@foreach($dates as $i => $d)
<button type="button"
data-iso="{{ $d['iso'] }}"
id="tab-{{ $i+1 }}"
class="flex-shrink-0 rounded-lg px-3.5 py-1.5 text-xs font-medium border transition-colors
{{ $i === 0
? 'bg-sky-500/15 text-sky-300 border-sky-500/30 active-date-tab'
: 'border-white/[0.08] bg-white/[0.03] text-white/50 hover:text-white hover:bg-white/[0.07]' }}">
@if ($i === 0)
Today
@elseif ($i === 1)
Yesterday
@else
{{ \Carbon\Carbon::parse($d['iso'])->format('M j') }}
@endif
</button>
@endforeach
</div>
</div>
{{-- ── Active date label ── --}}
<div class="px-6 md:px-10 mb-4">
<p id="activeDateLabel" class="text-sm text-white/40">
Showing uploads from <strong class="text-white/70">{{ $dates[0]['label'] ?? 'today' }}</strong>
</p>
</div>
{{-- ── Grid container ── --}}
<div id="myContent" class="px-6 pb-16 md:px-10 min-h-48">
@include('web.partials.daily-uploads-grid', ['arts' => $recent])
</div>
{{-- ── Loading overlay (hidden) ── --}}
<template id="loadingTpl">
<div class="flex items-center justify-center py-20 text-white/30 text-sm gap-2">
<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
</svg>
Loading artworks…
</div>
</template>
@push('scripts')
<script>
(function(){
function loadDate(iso, tabId){
var el = document.getElementById('myContent');
fetch('/daily-uploads?ajax=1&datum=' + encodeURIComponent(iso))
.then(function(r){ return r.text(); })
.then(function(html){ el.innerHTML = html; });
}
(function () {
var endpoint = '/uploads/daily';
var strip = document.getElementById('dateStrip');
var content = document.getElementById('myContent');
var dateLabel = document.getElementById('activeDateLabel');
var loadingTpl = document.getElementById('loadingTpl');
document.getElementById('recentTab').addEventListener('click', function(e){
var li = e.target.closest('li');
if (!li) return;
var iso = li.getAttribute('data-iso');
loadDate(iso, li.id);
function setActive(btn) {
strip.querySelectorAll('button').forEach(function (b) {
b.classList.remove('bg-sky-500/15', 'text-sky-300', 'border-sky-500/30', 'active-date-tab');
b.classList.add('border-white/[0.08]', 'bg-white/[0.03]', 'text-white/50');
});
})();
btn.classList.add('bg-sky-500/15', 'text-sky-300', 'border-sky-500/30', 'active-date-tab');
btn.classList.remove('border-white/[0.08]', 'bg-white/[0.03]', 'text-white/50');
}
function loadDate(iso, label) {
content.innerHTML = loadingTpl.innerHTML;
dateLabel.innerHTML = 'Showing uploads from <strong class="text-white/70">' + label + '</strong>';
fetch(endpoint + '?ajax=1&datum=' + encodeURIComponent(iso), {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
})
.then(function (r) { return r.text(); })
.then(function (html) { content.innerHTML = html; })
.catch(function () {
content.innerHTML = '<p class="text-center text-white/30 py-16 text-sm">Failed to load artworks.</p>';
});
}
strip.addEventListener('click', function (e) {
var btn = e.target.closest('button[data-iso]');
if (!btn || btn.classList.contains('active-date-tab')) return;
setActive(btn);
var label = btn.textContent.trim();
loadDate(btn.getAttribute('data-iso'), label);
});
})();
</script>
@endpush