Upload beautify
This commit is contained in:
@@ -11,31 +11,52 @@
|
||||
@endphp
|
||||
|
||||
<article class="artwork" itemscope itemtype="http://schema.org/Photograph">
|
||||
<a href="{{ $art->url ?? '#' }}" itemprop="url">
|
||||
<div class="ribbon gid_{{ $art->gid_num }}" title="{{ $art->category_name ?? '' }}" itemprop="genre">
|
||||
<span>{{ $art->category_name ?? '' }}</span>
|
||||
</div>
|
||||
<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">
|
||||
|
||||
<img
|
||||
src="{{ $img_src }}"
|
||||
srcset="{{ $img_srcset }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
alt="{{ e($art->name) }}"
|
||||
width="{{ $img_width }}"
|
||||
height="{{ $img_height }}"
|
||||
class="img-responsive"
|
||||
itemprop="thumbnailUrl"
|
||||
>
|
||||
{{-- 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>
|
||||
@endif
|
||||
|
||||
<div class="details">
|
||||
<div class="info" itemprop="author">
|
||||
<span class="fa fa-user"></span> {{ $art->uname ?? '' }}
|
||||
{{-- 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">
|
||||
<img
|
||||
src="{{ $img_src }}"
|
||||
srcset="{{ $img_srcset }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
alt="{{ e($art->name) }}"
|
||||
width="{{ $img_width }}"
|
||||
height="{{ $img_height }}"
|
||||
class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
|
||||
itemprop="thumbnailUrl"
|
||||
/>
|
||||
|
||||
{{-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title" itemprop="name">
|
||||
{{ $art->name }}
|
||||
</div>
|
||||
</div>
|
||||
{{-- Visually-hidden title for accessibility/SEO (details only shown on hover) --}}
|
||||
<span class="sr-only">{{ $art->name ?? 'Artwork' }}</span>
|
||||
</a>
|
||||
</article>
|
||||
Reference in New Issue
Block a user