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

gallery

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-15 16:49:15 +01:00
parent 7734e53d87
commit 7dbfdab40e
9 changed files with 720 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
resources/views/legacy/_artwork_card.blade.php
View File

@@ -1,62 +1,83 @@
@php
$img_src = $art->thumb ?? '';
$img_srcset = $art->thumb_srcset ?? '';
$base_height = 360;
$orig_width = (int) ($art->width ?? 0);
$orig_height = (int) ($art->height ?? 0);
$img_height = $base_height;
$img_width = ($orig_width > 0 && $orig_height > 0)
? (int) round($orig_width * ($base_height / $orig_height))
: 600;
// If a Collection or array was passed accidentally, pick the first item.
if (isset($art) && (is_array($art) || $art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection)) {
$first = null;
if (is_array($art)) {
$first = reset($art);
} elseif ($art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection) {
$first = $art->first();
}
if ($first) {
$art = $first;
}
}
$title = trim((string) ($art->name ?? $art->title ?? 'Untitled artwork'));
$author = trim((string) ($art->uname ?? $art->author_name ?? $art->author ?? 'Skinbase'));
$category = trim((string) ($art->category_name ?? $art->category ?? 'General'));
$license = trim((string) ($art->license ?? 'Standard'));
$resolution = trim((string) ($art->resolution ?? ((isset($art->width, $art->height) && $art->width && $art->height) ? ($art->width . '×' . $art->height) : '')));
$likes = (int) ($art->likes ?? $art->favourites ?? 0);
$downloads = (int) ($art->downloads ?? $art->downloaded ?? 0);
$img_src = (string) ($art->thumb ?? $art->thumbnail_url ?? '/images/placeholder.jpg');
$img_srcset = (string) ($art->thumb_srcset ?? $art->thumbnail_srcset ?? $img_src);
$img_avif_srcset = (string) ($art->thumb_avif_srcset ?? $img_srcset);
$img_webp_srcset = (string) ($art->thumb_webp_srcset ?? $img_srcset);
$img_width = max(1, (int) ($art->width ?? 800));
$img_height = max(1, (int) ($art->height ?? 600));
$contentUrl = $img_src;
$cardUrl = (string) ($art->url ?? '#');
@endphp
<article class="artwork" itemscope itemtype="http://schema.org/Photograph">
<a href="{{ $art->url ?? '#' }}" itemprop="url" class="group relative rounded-2xl overflow-hidden bg-black/10 border border-white/6 shadow-sm hover:shadow-lg transition-shadow">
<article class="nova-card artwork" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="name" content="{{ $title }}">
<meta itemprop="contentUrl" content="{{ $contentUrl }}">
<meta itemprop="creator" content="{{ $author }}">
<meta itemprop="license" content="{{ $license }}">
{{-- Category badge --}}
@if(!empty($art->category_name))
<div class="absolute top-3 left-3 z-30 bg-gradient-to-br from-black/65 to-black/40 text-xs text-white px-2 py-1 rounded-md backdrop-blur-sm">{{ $art->category_name }}</div>
<a href="{{ $cardUrl }}" itemprop="url" class="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70">
@if(!empty($category))
<div class="absolute left-3 top-3 z-30 rounded-md bg-black/55 px-2 py-1 text-xs text-white backdrop-blur-sm">{{ $category }}</div>
@endif
{{-- Image container with subtle overlay; details hidden until hover --}}
<div class="w-full h-48 md:h-56 lg:h-64 bg-neutral-900 relative overflow-hidden">
<div class="nova-card-media relative aspect-[16/10] overflow-hidden bg-neutral-900">
<picture>
<source srcset="{{ $img_avif_srcset }}" type="image/avif">
<source srcset="{{ $img_webp_srcset }}" type="image/webp">
<img
src="{{ $img_src }}"
srcset="{{ $img_srcset }}"
sizes="(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 25vw"
loading="lazy"
decoding="async"
alt="{{ e($art->name) }}"
alt="{{ e($title) }}"
width="{{ $img_width }}"
height="{{ $img_height }}"
class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
class="h-full w-full object-cover transition-transform duration-200 ease-out group-hover:scale-[1.04]"
itemprop="thumbnailUrl"
/>
</picture>
{{-- Hover overlay: hidden by default, slides up on hover --}}
<div class="absolute inset-0 flex items-end pointer-events-none opacity-0 translate-y-3 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-300">
<div class="w-full bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
@if(!empty($art->author_avatar))
<img src="{{ $art->author_avatar }}" alt="{{ $art->uname }}" class="w-8 h-8 rounded-full border border-white/8 object-cover">
@else
<span class="w-8 h-8 rounded-full bg-neutral-800 border border-white/6 flex items-center justify-center text-xs text-neutral-400">{{ strtoupper(substr($art->uname ?? '-',0,1)) }}</span>
@endif
<div class="text-sm">
<div class="text-white font-semibold leading-tight truncate">{{ $art->uname ?? '—' }}</div>
<div class="text-neutral-300 text-xs truncate">{{ optional(data_get($art, 'created_at'))->format('M j, Y') ?? '' }}</div>
</div>
</div>
<div class="flex items-center gap-3 text-xs text-neutral-300">
<div class="flex items-center gap-1"><i class="fa fa-eye"></i><span class="ml-1">{{ $art->views ?? 0 }}</span></div>
<div class="flex items-center gap-1"><i class="fa fa-heart"></i><span class="ml-1">{{ $art->likes ?? 0 }}</span></div>
</div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
<div class="truncate text-sm font-semibold text-white">{{ $title }}</div>
<div class="mt-1 flex items-center justify-between gap-3 text-xs text-white/80">
<span class="truncate">by {{ $author }}</span>
<span class="shrink-0">❤ {{ $likes }} · ⬇ {{ $downloads }}</span>
</div>
<div class="mt-1 text-[11px] text-white/70">
@if($resolution !== '')
{{ $resolution }} •
@endif
{{ $category }} • {{ $license }}
</div>
</div>
</div>
{{-- Visually-hidden title for accessibility/SEO (details only shown on hover) --}}
<span class="sr-only">{{ $art->name ?? 'Artwork' }}</span>
<span class="sr-only">{{ $title }} by {{ $author }}</span>
</a>
</article>
</article>