w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update profile pages design

Browse Source
This commit is contained in:
w33b
2026-07-25 13:54:21 +02:00
parent 2b1a967065
commit 5af1c3c447
17 changed files with 1031 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/watched.blade.php
+43 -20
View File
@@ -1,28 +1,51 @@
<div>
<div class="relative mx-auto sm:px-6 lg:px-8 text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]"
wire:keydown.right.window="nextPage" wire:keydown.left.window="previousPage">
<ol class="border-l border-neutral-300 dark:border-neutral-500">
<div wire:keydown.right.window="nextPage" wire:keydown.left.window="previousPage" class="text-gray-900 dark:text-white">
<div class="relative">
{{-- Timeline --}}
<ol class="relative border-l-2 border-neutral-300/70 dark:border-neutral-600/70 ml-3 sm:ml-4">
@foreach ($watchedGrouped as $day => $episodes)
<li>
<div class="flex items-center pt-3 flex-start">
<div class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500">
</div>
<p class="text-sm text-neutral-500 dark:text-neutral-300">
<li class="mb-10 ml-6 sm:ml-8 last:mb-0">
{{-- Timeline Dot --}}
<span class="absolute flex items-center justify-center w-6 h-6 rounded-full -left-3 ring-2 ring-white dark:ring-neutral-950 bg-rose-600 dark:bg-rose-500">
<i class="fa-solid fa-circle text-[6px] text-white"></i>
</span>
{{-- Date Header --}}
<div class="mb-4">
<time class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold text-gray-600 dark:text-gray-300 bg-gray-100/70 dark:bg-neutral-800/70">
<i class="fa-solid fa-calendar text-[10px] text-rose-500"></i>
{{ $episodes->first()->created_at->diffForHumans(['parts' => 1]) }}
</p>
</time>
<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">
{{ $episodes->count() }} {{ Str::plural('episode', $episodes->count()) }}
</span>
</div>
<div class="flex justify-center">
<div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4">
@foreach ($episodes as $episode)
<div class="mt-2 mb-6 ml-4">
<x-episode-cover :episode="$episode->episode" view="thumbnail" />
</div>
@endforeach
</div>
{{-- Episodes Grid --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
@foreach ($episodes as $episode)
<x-episode-cover :episode="$episode->episode" view="thumbnail" />
@endforeach
</div>
</li>
@endforeach
</ol>
{{ $watched->links('pagination::tailwind') }}
{{-- Pagination --}}
@if($watched->hasPages())
<div class="mt-8">
{{ $watched->links('pagination::tailwind') }}
</div>
@endif
{{-- Empty State --}}
@if($watched->isEmpty())
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-12 text-center">
<div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
<i class="fa-solid fa-eye-slash text-3xl text-gray-400 dark:text-gray-500"></i>
</div>
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">No watch history</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Start watching and your history will appear here.</p>
</div>
@endif
</div>
</div>
</div>