Update series page design & Refactor

resources/views/series/index.blade.php

@@ -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')
 

resources/views/series/partials/episodes.blade.php

@@ -1,12 +1,14 @@
-<div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-800 p-5">
+<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">
-    <a class="leading-normal font-bold text-lg text-rose-600">
+    <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">
+        <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>

resources/views/series/partials/info.blade.php

@@ -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>

resources/views/stream/partials/info.blade.php

@@ -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,13 +29,21 @@
                     <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 }}
                         </p>
@@ -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>