Update Cover & Thumbnail Design & Refactor
This commit is contained in:
100
resources/views/components/episode-cover.blade.php
Normal file
100
resources/views/components/episode-cover.blade.php
Normal file
@@ -0,0 +1,100 @@
|
||||
@props([
|
||||
'episode',
|
||||
'view',
|
||||
'displayjapanese' => false
|
||||
])
|
||||
|
||||
@php
|
||||
$title = $displayjapanese ?
|
||||
"$episode->title_jpn ($episode->title) - $episode->episode" :
|
||||
"$episode->title - $episode->episode";
|
||||
|
||||
$isWatched = auth()->check() && $episode->userWatched(auth()->id());
|
||||
|
||||
$badgeColor = $isWatched
|
||||
? 'bg-green-600/80'
|
||||
: 'bg-rose-700/70';
|
||||
|
||||
$problematic = cache()->rememberForever(
|
||||
"episodeProblematic{$episode->id}",
|
||||
fn () => $episode->getProblematicTags()
|
||||
);
|
||||
@endphp
|
||||
|
||||
<div
|
||||
class="group relative w-full p-1 md:p-2 transition-all duration-300 ease-out md:hover:-translate-y-1 md:hover:scale-[1.03]">
|
||||
|
||||
<a
|
||||
href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
|
||||
class="block overflow-hidden rounded-2xl dark:bg-neutral-950 bg-white shadow-lg">
|
||||
|
||||
|
||||
<div class="relative">
|
||||
{{-- Switch between Cover and Thumbnail --}}
|
||||
@if ($view === 'poster')
|
||||
<img
|
||||
src="{{ $episode->cover_url }}"
|
||||
alt="{{ $episode->title }} - {{ $episode->episode }}"
|
||||
loading="lazy"
|
||||
width="400"
|
||||
class="aspect-[11/16] w-full object-cover object-center"
|
||||
>
|
||||
@elseif ($view === 'thumbnail')
|
||||
<img
|
||||
src="{{ $episode->gallery->first()?->thumbnail_url }}"
|
||||
alt="{{ $episode->title }} - {{ $episode->episode }}"
|
||||
loading="lazy"
|
||||
width="1000"
|
||||
class="aspect-video w-full object-cover object-center "
|
||||
>
|
||||
@endif
|
||||
|
||||
{{-- Resolution Badge --}}
|
||||
<div class="absolute top-0 right-0 z-20">
|
||||
<span class="{{ $badgeColor }} rounded-bl-xl px-3 py-1.5 text-sm font-semibold text-white">
|
||||
{{ $episode->getResolution() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{-- Stats --}}
|
||||
<div class="absolute bottom-0 left-0 z-20">
|
||||
<div class="{{ $badgeColor }} flex items-center gap-3 rounded-tr-xl px-3 py-1 text-sm font-semibold text-white">
|
||||
|
||||
<span class="flex items-center gap-1">
|
||||
<i class="fa-regular fa-eye"></i>
|
||||
{{ $episode->viewCountFormatted() }}
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-1">
|
||||
<i class="fa-regular fa-heart"></i>
|
||||
{{ $episode->likeCount() }}
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-1">
|
||||
<i class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Problematic Tags --}}
|
||||
@if (!empty($problematic))
|
||||
<div class="absolute top-0 left-0 z-20">
|
||||
<span class="rounded-br-xl bg-red-700/80 px-3 py-1.5 text-sm font-semibold text-white backdrop-blur">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
{{ $problematic }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Title --}}
|
||||
<div class="p-3 text-center">
|
||||
<p class="text-sm font-bold text-black dark:text-white">
|
||||
{{ $title }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,58 +0,0 @@
|
||||
@props(['episode'])
|
||||
|
||||
<div class="relative p-1 mb-8 w-full transition duration-300 ease-in-out md:p-2 md:hover:-translate-y-1 md:hover:scale-110">
|
||||
<a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
|
||||
<img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
|
||||
class="block object-cover object-center relative z-20 rounded-lg aspect-video"
|
||||
src="{{ $episode->gallery->first()->thumbnail_url }}"></img>
|
||||
|
||||
@guest
|
||||
<p
|
||||
class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
{{ $episode->getResolution() }}</p>
|
||||
<p
|
||||
class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
<i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i class="fa-regular fa-heart"></i>
|
||||
{{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</p>
|
||||
@endguest
|
||||
|
||||
@php $problematic = cache()->rememberForever('episodeProblematic'.$episode->id, fn () => $episode->getProblematicTags()); @endphp
|
||||
@if (!empty($problematic))
|
||||
<p
|
||||
class="absolute left-4 top-2 bg-red-700/70 !text-white rounded-br-lg rounded-tl-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i> {{ $problematic }}
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@auth
|
||||
@if ($episode->userWatched(auth()->user()->id))
|
||||
<p
|
||||
class="absolute right-1 md:right-2 top-1 md:top-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
{{ $episode->getResolution() }}</p>
|
||||
<p
|
||||
class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
<i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
|
||||
class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</p>
|
||||
@else
|
||||
<p
|
||||
class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
{{ $episode->getResolution() }}</p>
|
||||
<p
|
||||
class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
<i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
|
||||
class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</p>
|
||||
@endif
|
||||
@endauth
|
||||
|
||||
<div class="absolute w-[95%] grid grid-cols-1 text-center">
|
||||
<p class="text-sm text-center text-black dark:text-white">{{ $episode->title }} -
|
||||
{{ $episode->episode }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
Reference in New Issue
Block a user