Update series page design & Refactor
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="pt-6">
|
||||
<div class="flex flex-col lg:flex-row justify-center">
|
||||
<div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[70%] 2xl:max-w-[60%] z-10">
|
||||
@include('series.partials.info')
|
||||
@include('stream.partials.info', ['streamPage' => false])
|
||||
|
||||
@include('series.partials.episodes')
|
||||
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-800 p-5">
|
||||
<a class="leading-normal font-bold text-lg text-rose-600">
|
||||
{{ __('home.episodes') }} ({{ $hentai->episodes->count() }})
|
||||
</a>
|
||||
<div class="overflow-hidden rounded-2xl border border-gray-200/70 bg-white/90 shadow-sm backdrop-blur-sm transition-colors dark:border-white/10 dark:bg-neutral-900/80">
|
||||
<div class="p-5 md:p-7">
|
||||
<a class="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{{ __('home.episodes') }} ({{ $hentai->episodes->count() }})
|
||||
</a>
|
||||
|
||||
<!-- Episode List -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2">
|
||||
@foreach ($hentai->episodes as $episode)
|
||||
<x-episode-cover :episode="$episode" view="thumbnail" />
|
||||
@endforeach
|
||||
<!-- Episode List -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2 mt-4">
|
||||
@foreach ($hentai->episodes as $episode)
|
||||
<x-episode-cover :episode="$episode" view="thumbnail" />
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
<div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-800 p-5">
|
||||
<!-- Cover -->
|
||||
<div class="w-[100px] md:w-[150px] mr-4 float-left">
|
||||
<img alt="{{ $episode->title }}" loading="lazy" width="150"
|
||||
class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20"
|
||||
src="{{ $episode->cover_url }}"></img>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="relative">
|
||||
<!-- Title -->
|
||||
<h1 class="text-3xl font-bold text-rose-600">
|
||||
{{ $episode->title }} ({{ $episode->title_jpn }})
|
||||
</h1>
|
||||
<div>
|
||||
<a data-te-toggle="tooltip"
|
||||
title="Released {{ \Carbon\Carbon::parse($episode->release_date)->diffForHumans(['parts' => 2]) }}"
|
||||
class="text-l text-gray-800 dark:text-white leading-tight pl-1">
|
||||
<i class="fa-regular fa-calendar"></i> {{ $episode->release_date }}
|
||||
|
|
||||
</a>
|
||||
<a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'studios[0]' => $episode->studio->slug]) }}"
|
||||
class="text-l text-gray-800 dark:text-white leading-tight hover:underline hover:underline-offset-4">
|
||||
{{ $episode->studio->name }}
|
||||
</a>
|
||||
</div>
|
||||
<hr class="border-gray-400/40 mt-2 mb-2">
|
||||
<p class="leading-normal font-bold text-lg text-rose-600">
|
||||
{{ __('stream.description') }}
|
||||
</p>
|
||||
<p class="text-gray-800 dark:text-gray-200 leading-tight min-h-[50%]">
|
||||
{{ $hentai->description }}
|
||||
</p>
|
||||
<hr class="border-gray-400/40 mt-2 mb-1">
|
||||
<ul class="list-none text-center" style="overflow: hidden;">
|
||||
<a class="text-gray-400">
|
||||
|
|
||||
</a>
|
||||
@foreach ($episode->tags->sortBy('slug') as $tag)
|
||||
<li class="inline-block p-1">
|
||||
@if ($tag->slug == 'uncensored' || $tag->slug == 'vanilla' || $tag->slug == '4k')
|
||||
<a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
|
||||
class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs text-green-500 dark:hover:text-white hover:text-white uppercase tracking-widest hover:bg-green-700 focus:bg-green-700 active:bg-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition ease-in-out duration-150">
|
||||
{{ $tag->name }}
|
||||
</a>
|
||||
@elseif($tag->slug == 'censored')
|
||||
<a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
|
||||
class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs text-yellow-600 dark:hover:text-white hover:text-white uppercase tracking-widest hover:bg-yellow-700 focus:bg-yellow-700 active:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition ease-in-out duration-150">
|
||||
{{ $tag->name }}
|
||||
</a>
|
||||
@elseif($tag->slug == 'gore' || $tag->slug == 'horror' || $tag->slug == 'scat' || $tag->slug == 'ntr' || $tag->slug == 'rape')
|
||||
<a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
|
||||
class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs text-red-600 dark:hover:text-white hover:text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i> {{ $tag->name }}
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
|
||||
class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs dark:text-white hover:text-white uppercase tracking-widest hover:bg-rose-700 focus:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 transition ease-in-out duration-150">
|
||||
{{ $tag->name }}
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
<a class="text-gray-400">
|
||||
|
|
||||
</a>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,8 +1,14 @@
|
||||
@props([
|
||||
'streamPage' => true,
|
||||
])
|
||||
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-gray-200/70 bg-white/90 shadow-sm backdrop-blur-sm transition-colors dark:border-white/10 dark:bg-neutral-900/80">
|
||||
|
||||
<div class="p-5 md:p-7">
|
||||
@if($streamPage)
|
||||
<input id="e_id" type="hidden" value="{{ $episode->id }}" />
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-6 lg:flex-row">
|
||||
<!-- Cover -->
|
||||
@@ -23,12 +29,20 @@
|
||||
<div class="min-w-0">
|
||||
<h1
|
||||
class="break-words text-2xl font-black tracking-tight text-gray-900 dark:text-white md:text-4xl">
|
||||
@if ($streamPage)
|
||||
<a
|
||||
href="{{ route('hentai.index', ['title' => $episode->hentai->slug]) }}"
|
||||
class="bg-gradient-to-r from-rose-500 to-pink-500 bg-clip-text text-transparent transition hover:opacity-80">
|
||||
{{ $episode->title }} - {{ $episode->episode }}
|
||||
{{ "$episode->title - $episode->episode" }}
|
||||
</a>
|
||||
@else
|
||||
<span
|
||||
class="bg-gradient-to-r from-rose-500 to-pink-500 bg-clip-text text-transparent transition">
|
||||
{{ $episode->title }}
|
||||
</span>
|
||||
@endif
|
||||
</h1>
|
||||
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">
|
||||
{{ $episode->title_jpn }}
|
||||
@@ -65,6 +79,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($streamPage)
|
||||
<!-- Stats + Actions -->
|
||||
<div class="flex flex-col gap-3 xl:items-end min-w-[330px]">
|
||||
|
||||
@@ -134,6 +149,7 @@
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
@@ -189,9 +205,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Gallery -->
|
||||
@if($streamPage)
|
||||
<div class="mt-8 border-t border-gray-200 pt-6 dark:border-white/10">
|
||||
@include('stream.partials.gallery')
|
||||
</div>
|
||||
@endisset
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user