tiradoe/movie-night-nuevo
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

ui cleanup
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (push) Waiting to run
Details

Browse source
This commit is contained in:
Edward Tirado Jr 2025-12-26 13:07:15 -06:00
parent b6a365cde1
commit 54355fc942
6 changed files with 83 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/Livewire/MovieList.php
View file

@ -5,10 +5,12 @@ namespace App\Livewire;
use App\Livewire\Forms\MovieListForm; use App\Livewire\Forms\MovieListForm;
use App\Livewire\Forms\SettingsForm; use App\Livewire\Forms\SettingsForm;
use App\Models\MovieList as MovieListModel; use App\Models\MovieList as MovieListModel;
use Livewire\Attributes\Locked;
use Livewire\Component; use Livewire\Component;
class MovieList extends Component class MovieList extends Component
{ {
#[locked]
public int $id; public int $id;
public MovieListModel $list; public MovieListModel $list;
public $movies = []; public $movies = [];
@ -36,7 +38,6 @@ class MovieList extends Component
if ($list) { if ($list) {
$this->list = $list; $this->list = $list;
$this->movies = $list->movies;
$this->filteredMovies = $list->movies; $this->filteredMovies = $list->movies;
$this->settingsForm->setList($list); $this->settingsForm->setList($list);
} else { } else {
@ -46,7 +47,7 @@ class MovieList extends Component
public function filterMovies(): void public function filterMovies(): void
{ {
$this->filteredMovies = collect($this->movies) $this->filteredMovies = collect($this->list->movies)
->filter(fn($movie) => stripos($movie->title, $this->filterText) !== false); ->filter(fn($movie) => stripos($movie->title, $this->filterText) !== false);
} }

2
resources/views/components/ui/card.blade.php
View file

@ -1,3 +1,3 @@
<div {{ $attributes->merge(['class' => 'bg-gray-800 p-5 flex flex-col gap-5 items-center rounded']) }}> <div {{ $attributes->merge(['class' => 'bg-gray-700 p-5 flex flex-col gap-5 items-center rounded']) }}>
{{ $slot }} {{ $slot }}
</div> </div>

9
resources/views/livewire/lists.blade.php
View file

@ -26,8 +26,13 @@
<ul class="w-full flex flex-col gap-5"> <ul class="w-full flex flex-col gap-5">
@foreach($lists as $list) @foreach($lists as $list)
<li class="flex justify-between text-center"> <li class="flex py-5 justify-between text-center">
<a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a> <a class="font-bold text-2xl" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
@if((bool)$list->is_public === true)
<i class="fa fa-earth" title="Public" aria-label="Public"></i>
@else
<i class="fa fa-lock" title="Private" aria-label="Private"></i>
@endif
</li> </li>
@endforeach @endforeach
</ul> </ul>

17
resources/views/livewire/movie-list.blade.php
View file

@ -7,7 +7,7 @@
</button> </button>
</div> </div>
<x-ui.card class="overflow-hidden"> <x-ui.card class="overflow-hidden min-h-screen">
<div class="absolute"> <div class="absolute">
<livewire:search-panel :list-id="$list->id"/> <livewire:search-panel :list-id="$list->id"/>
<livewire:movie-details-panel/> <livewire:movie-details-panel/>
@ -20,9 +20,16 @@
<!-- Movie List View --> <!-- Movie List View -->
<div class="w-full flex-shrink-0 flex flex-col gap-5"> <div class="w-full flex-shrink-0 flex flex-col gap-5">
<div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full"> <div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
<div>
<input class="flex bg-white p-2 rounded sm:w-100" type="text" placeholder="Filter movies" <input class="flex bg-white p-2 rounded sm:w-100" type="text" placeholder="Filter movies"
wire:model.live="filterText" wire:model.live="filterText"
wire:keyup="filterMovies"/> wire:keyup="filterMovies"/>
<div class="mt-5">
<span class="bold">Sort: </span>
<span>DESC</span>
<span>ASC</span>
</div>
</div>
<hr class="my-2 sm:my-0"/> <hr class="my-2 sm:my-0"/>
<button wire:click="$dispatch('openSearch')" <button wire:click="$dispatch('openSearch')"
@ -45,7 +52,6 @@
</div> </div>
@endif @endif
</div> </div>
<!-- Settings View --> <!-- Settings View -->
<div class="w-full flex-shrink-0 flex flex-col gap-5"> <div class="w-full flex-shrink-0 flex flex-col gap-5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -55,7 +61,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"> <div class="flex flex-col gap-2 w-full p-5">
<label for="list-name">List Name</label> <label for="list-name">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"
@ -64,8 +70,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="flex items-center justify-between bg-gray-700 p-4 rounded"> <div
<label for="is_public" class="text-white">Make list public</label> class="flex items-center justify-between bg-gray-700 hover:bg-gray-500 hover:opacity-85 p-5 rounded">
<label for="is_public" class="text-white cursor-pointer">Make list public</label>
<input type="checkbox" <input type="checkbox"
id="is_public" id="is_public"
wire:model.live="settingsForm.isPublic" wire:model.live="settingsForm.isPublic"

27
resources/views/pages/auth/register.blade.php
View file

@ -1,7 +1,9 @@
<div class="text-2xl"> <x-layouts.auth>
<h1 class="text-center m-5">Create Account</h1> <div class="text-2xl text-white flex flex-col items-center gap-10 py-6 min-h-screen">
<x-ui.site-logo class="w-50 mt-4"/>
<form class="flex flex-col gap-5" wire:submit="register"> <x-ui.card class="w-full max-w-md">
<form class="flex flex-col gap-5 w-full" wire:submit="register">
@if($errors->any()) @if($errors->any())
<div class="text-red-500"> <div class="text-red-500">
@foreach($errors->all() as $error) @foreach($errors->all() as $error)
@ -10,14 +12,17 @@
</div> </div>
@endif @endif
<div class="flex flex-col"> <div class="flex flex-col gap-2">
<label class="py-5" for="username">Username</label> <label class="font-bold" for="username">Username</label>
<input class="bg-white" type="text" wire:model.live="form.username"/> <input class="bg-white p-2" type="text" wire:model.live="form.username"/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col gap-2">
<label class="py-5" for="email">Email</label> <label class="font-bold" for="email">Email</label>
<input class="bg-white" type="email" wire:model.live="form.email"/> <input class="bg-white p-2" type="email" wire:model.live="form.email"/>
</div> </div>
<button type="submit" class="bg-green-400 text-white px-4 py-2 rounded">Submit</button>
<button class="bg-green-400 rounded p-2" type="submit">Create Account</button>
</form> </form>
</div> </x-ui.card>
</div>
</x-layouts.auth>

48
resources/views/pages/auth/reset-password.blade.php
View file

@ -1,7 +1,9 @@
<div class="text-2xl"> <x-layouts.auth>
<h1 class="text-center m-5">Reset Password</h1> <div class="text-2xl text-white flex flex-col items-center gap-10 py-6 min-h-screen">
<x-ui.site-logo class="w-50 mt-4"/>
<form class="flex flex-col gap-5" wire:submit="resetPassword"> <x-ui.card class="w-full max-w-md">
<form class="flex flex-col gap-5 w-full" wire:submit="resetPassword">
@csrf @csrf
@if($errors->any()) @if($errors->any())
<div class="text-red-500"> <div class="text-red-500">
@ -11,33 +13,21 @@
</div> </div>
@endif @endif
<div class="flex flex-col"> <div class="flex flex-col gap-2">
<label class="py-5" for="email">Email</label> <label class="font-bold" for="email">Email</label>
<input <input class="bg-white p-2" type="email" name="email" wire:model.live="form.email"/>
class="bg-white"
type="email"
name="email"
wire:model.live="form.email"
/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col gap-2">
<label class="py-5" for="password">Password</label> <label class="font-bold" for="password">Password</label>
<input <input class="bg-white p-2" type="password" name="password" wire:model.live="form.password"/>
class="bg-white"
type="password"
name="password"
wire:model.live="form.password"
/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col gap-2">
<label class="py-5" for="password_confirmation">Confirm Password</label> <label class="font-bold" for="password_confirmation">Confirm Password</label>
<input <input class="bg-white p-2" type="password" name="password_confirmation" wire:model.live="form.password_confirmation"/>
class="bg-white"
type="password"
name="password_confirmation"
wire:model.live="form.password_confirmation"
/>
</div> </div>
<button type="submit">Submit</button>
<button class="bg-green-400 rounded p-2" type="submit">Reset Password</button>
</form> </form>
</div> </x-ui.card>
</div>
</x-layouts.auth>