theme update
Some checks failed
linter / quality (pull_request) Has been cancelled
tests / ci (pull_request) Has been cancelled

This commit is contained in:
Edward Tirado Jr 2025-12-31 00:11:09 -06:00
parent c31524977a
commit 97ad0421e3
5 changed files with 27 additions and 30 deletions

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ str_replace('_','-',app()->getLocale()) }}"> <html lang="{{ str_replace('_','-',app()->getLocale()) }}">
<x-head/> <x-head/>
<body class="bg-blue-600"> <body class="bg-gradient-to-br from-blue-900 via-blue-700 to-indigo-900 min-h-screen">
<div class="container mx-auto text-white"> <div class="container mx-auto text-white">
<x-header/> <x-header/>
{{ $slot }} {{ $slot }}

View file

@ -1,5 +1,5 @@
@props(['movie']) @props(['movie'])
<div class="flex flex-col bg-gray-500 w-full h-full cursor-pointer hover:bg-gray-600 transition-colors" <div class="flex flex-col bg-gray-500 w-full h-full cursor-pointer rounded-lg overflow-hidden shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300"
wire:click="$dispatch('openMovieDetails', { movieId: {{ $movie->id }} })"> wire:click="$dispatch('openMovieDetails', { movieId: {{ $movie->id }} })">
<img class="w-full h-full object-cover" src="{{$movie->poster}}" alt="{{$movie->title}}"> <img class="w-full h-full object-cover" src="{{$movie->poster}}" alt="{{$movie->title}}">
</div> </div>

View file

@ -1,3 +1,3 @@
<div {{ $attributes->merge(['class' => 'bg-gray-700 p-5 flex flex-col gap-5 items-center rounded']) }}> <div {{ $attributes->merge(['class' => 'bg-gray-800/90 backdrop-blur-sm p-6 flex flex-col gap-5 items-center rounded-xl shadow-xl border border-gray-700/50']) }}>
{{ $slot }} {{ $slot }}
</div> </div>

View file

@ -27,44 +27,40 @@
<div class="w-full flex flex-col gap-5"> <div class="w-full flex flex-col gap-5">
<h2 class="text-2xl font-bold">Your Lists</h2> <h2 class="text-2xl font-bold">Your Lists</h2>
@if(!$lists->isEmpty()) @if(!$lists->isEmpty())
<ul class="w-full flex flex-col gap-2"> <ul class="w-full flex flex-col gap-3">
<hr/>
@foreach($lists as $list) @foreach($lists as $list)
<li class="flex justify-between text-center"> <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
<a class="text-xl" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a> <a class="text-xl hover:text-amber-200 transition-colors" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
@if((bool)$list->is_public === true) @if((bool)$list->is_public === true)
<i class="fa fa-earth my-auto" title="Public" aria-label="Public"></i> <i class="fa fa-earth text-green-400" title="Public" aria-label="Public"></i>
@else @else
<i class="fa fa-lock my-auto" title="Private" aria-label="Private"></i> <i class="fa fa-lock text-gray-400" title="Private" aria-label="Private"></i>
@endif @endif
</li> </li>
<hr/>
@endforeach @endforeach
</ul> </ul>
@else @else
<span>No lists found.</span> <span class="text-gray-400">No lists found.</span>
@endif @endif
</div> </div>
<div class="w-full flex flex-col gap-5"> <div class="w-full flex flex-col gap-5">
<h2 class="text-2xl font-bold">Shared With You</h2> <h2 class="text-2xl font-bold">Shared With You</h2>
@if(!$sharedLists->isEmpty()) @if(!$sharedLists->isEmpty())
<ul> <ul class="w-full flex flex-col gap-3">
<hr/>
@foreach($sharedLists as $list) @foreach($sharedLists as $list)
<li class="flex justify-between text-center"> <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
<a class="text-xl" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a> <a class="text-xl hover:text-amber-200 transition-colors" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
@if((bool)$list->is_public === true) @if((bool)$list->is_public === true)
<i class="fa fa-earth my-auto" title="Public" aria-label="Public"></i> <i class="fa fa-earth text-green-400" title="Public" aria-label="Public"></i>
@else @else
<i class="fa fa-lock my-auto" title="Private" aria-label="Private"></i> <i class="fa fa-lock text-gray-400" title="Private" aria-label="Private"></i>
@endif @endif
</li> </li>
<hr/>
@endforeach @endforeach
</ul> </ul>
@else @else
<span>No lists found.</span> <span class="text-gray-400">No lists found.</span>
@endif @endif
</div> </div>
</x-ui.card> </x-ui.card>

View file

@ -10,11 +10,12 @@
@endcan @endcan
</div> </div>
<div>
<livewire:search-panel :list-id="$list->id"/>
<livewire:movie-details-panel/>
</div>
<x-ui.card class="overflow-hidden min-h-screen"> <x-ui.card class="overflow-hidden min-h-screen">
<div class="absolute">
<livewire:search-panel :list-id="$list->id"/>
<livewire:movie-details-panel/>
</div>
<div class="relative w-full overflow-hidden"> <div class="relative w-full overflow-hidden">
<div class="flex transition-transform duration-300 ease-in-out" <div class="flex transition-transform duration-300 ease-in-out"
@ -41,7 +42,7 @@
@if(!$filteredMovies->isEmpty()) @if(!$filteredMovies->isEmpty())
<ul class="grid grid-cols-2 sm:grid-cols-4 gap-5"> <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
@foreach ($filteredMovies as $movie) @foreach ($filteredMovies as $movie)
<li class="bg-gray-200"> <li>
<x-movie :movie="$movie"/> <x-movie :movie="$movie"/>
</li> </li>
@endforeach @endforeach
@ -62,7 +63,7 @@
<h2 class="text-xl font-semibold">Settings</h2> <h2 class="text-xl font-semibold">Settings</h2>
</div> </div>
<div class="flex flex-col gap-2 w-full p-5"> <div class="flex flex-col gap-2 w-full p-5 bg-gray-700">
<label for="list-name" class="font-bold">List Name</label> <label for="list-name" class="font-bold">List Name</label>
<div class="flex flex-row"> <div class="flex flex-row">
<input type="text" wire:model.live="settingsForm.name" id="list-name" <input type="text" wire:model.live="settingsForm.name" id="list-name"
@ -72,7 +73,7 @@
</div> </div>
</div> </div>
<div <div
class="flex items-center justify-between bg-gray-700 hover:bg-gray-500 hover:opacity-85 p-5 rounded"> class="flex items-center justify-between bg-gray-700 hover:opacity-85 p-5 rounded">
<label for="is_public" class="text-white font-bold cursor-pointer">Make list public</label> <label for="is_public" class="text-white font-bold cursor-pointer">Make list public</label>
<input type="checkbox" <input type="checkbox"
id="is_public" id="is_public"
@ -81,9 +82,9 @@
</div> </div>
<div class="p-5 flex flex-col gap-5 hover:bg-gray-500 rounded"> <div class="p-5 flex flex-col gap-5 bg-gray-700 rounded">
<span class="font-bold">Collaborators</span> <span class="font-bold">Collaborators</span>
<details class="hover:cursor-pointer bg-gray-500 p-5 rounded"> <details class="hover:cursor-pointer bg-gray-600 p-5 rounded">
<ul class="flex flex-col gap-2 py-2"> <ul class="flex flex-col gap-2 py-2">
<li><span class="font-bold">Viewer</span>: Can view the list, but cannot make any changes.</li> <li><span class="font-bold">Viewer</span>: Can view the list, but cannot make any changes.</li>
<li><span class="font-bold">Editor</span>: Can add/remove movies from the list.</li> <li><span class="font-bold">Editor</span>: Can add/remove movies from the list.</li>
@ -103,7 +104,7 @@
</ul> </ul>
</div> </div>
<div class="p-5 flex flex-col gap-3 hover:bg-gray-500 rounded"> <div class="p-5 flex flex-col gap-3 bg-gray-700 rounded">
<span class="font-bold">Invite collaborators</span> <span class="font-bold">Invite collaborators</span>
<span class="hover:cursor-pointer">Enter a comma separated list of emails.</span> <span class="hover:cursor-pointer">Enter a comma separated list of emails.</span>
<textarea class="bg-white rounded text-black p-2" placeholder="user1@example.com, user2@example.com, user3@example.com"></textarea> <textarea class="bg-white rounded text-black p-2" placeholder="user1@example.com, user2@example.com, user3@example.com"></textarea>
@ -113,7 +114,7 @@
@can('delete', $list) @can('delete', $list)
<div <div
class="flex items-center justify-between bg-gray-700 hover:bg-gray-500 hover:opacity-85 p-5 rounded"> class="flex items-center justify-between bg-gray-700 p-5 rounded">
<label for="delete_list" class="text-white cursor-pointer">Delete List</label> <label for="delete_list" class="text-white cursor-pointer">Delete List</label>
<button name="delete_list" <button name="delete_list"
type="button" type="button"