mirror/UNIT3D-Community-Edition
1
0
Fork 0
mirror of https://github.com/HDInnovations/UNIT3D-Community-Edition.git synced 2026-02-13 23:19:55 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update: Rebuilt Quick Search Livewire Component for Improved Usability

Browse Source
This commit is contained in:
clandestine8
2021-09-04 17:01:17 -04:00
parent 33ab8e86a1
commit bcb5e40a9d
1 changed files with 74 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
resources/views/livewire/quick-search-dropdown.blade.php
View File

@@ -1,65 +1,81 @@
<div class="text-center form-inline" style="height: 0;">
<div class="form-group" wire:blur ="$set('movie', '')">
<div>
<input wire:model.debounce.250ms="movie" type="text" class="form-control" placeholder="Movie"
autocomplete="off" style="width: 150px;">
<div style="width: 460px; min-height: 50px; display: block;" x-data="{ lock: false }">
<div class="text-center form-inline" @focusout="if (!lock) { $wire.set('movie', ''); $wire.set('series', ''); $wire.set('person', ''); }" >
<div class="form-group" style="position: relative; vertical-align: top;">
<input wire:model.debounce.250ms="movie" type="text" class="form-control" placeholder="Movie"
autocomplete="off" style="width: 150px;" @focusin="$wire.set('series', ''); $wire.set('person', '');">
</div>
<div class="form-group" style="position: relative; vertical-align: top;">
<input wire:model.debounce.250ms="series" type="text" class="form-control" placeholder="Series"
autocomplete="off" style="width: 150px;" @focusin="$wire.set('movie', ''); $wire.set('person', '');">
</div>
<div class="form-group" style="position: relative; vertical-align: top;">
<input wire:model.debounce.250ms="person" type="text" class="form-control" placeholder="Person"
autocomplete="off" style="width: 150px;" @focusin="$wire.set('movie', ''); $wire.set('series', '');">
</div>
@if ($movie)
<div style="position: fixed; z-index: 2; background-color: #2b2b2b;">
@forelse ($search_results as $search_result)
<div class="box">
<a @click.prevent href="{{ route('torrents.similar', ['category_id' => '1', 'tmdb' => $search_result->id]) }}" class="pull-left">
<img src="{{ $search_result->poster }}" style="width: 40px; height: 60px;">
<span class="text-bold">{{ $search_result->title }} ({{ substr($search_result->release_date, 0, 4) }})</span>
</a>
</div>
@empty
<div class="px-3 py-3">No results for "{{ $movie }}"</div>
@endforelse
</div>
@endif
</div>
@if( strlen($movie) > 2 || strlen($series) > 2 || strlen($person) > 2)
<div style="width: 100%; min-height: 60px; margin: 0; padding: 3px; display: block; background-color: #2b2b2b;" @mouseenter="lock = true;" @mouseleave="lock = false">
@forelse ($search_results as $search_result)
@if (strlen($movie) > 2 )
<div id="movie.{{$search_result->id}}" class="row" style="cursor: pointer; margin-bottom: 5px;"
@click="window.location.href = '{{ route('torrents.similar', ['category_id' => '1', 'tmdb' => $search_result->id]) }}'">
<div class="col-xs-3 text-center">
<img src="{{ $search_result->poster }}" style="height: 60px; padding: 0; margin: 0">
</div>
<div class="col-xs-9 text-left">
<span>{{ $search_result->title }} ({{ substr($search_result->release_date, 0, 4) }})</span>
</div>
</div>
@elseif (strlen($series) > 2 )
<div id="series.{{$search_result->id}}" class="row" style="cursor: pointer; margin-bottom: 5px;"
@click="window.location.href = '{{ route('torrents.similar', ['category_id' => '2', 'tmdb' => $search_result->id]) }}'">
<div class="col-xs-3 text-center">
<img src="{{ $search_result->poster }}" style="height: 60px; padding: 0; margin: 0">
</div>
<div class="col-xs-9 text-left">
<span>{{ $search_result->name }} ({{ substr($search_result->first_air_date, 0, 4) }})</span>
</div>
</div>
<div class="form-group" wire:blur="$set('series', '')" >
<div>
<input wire:model.debounce.250ms="series" type="text" class="form-control" placeholder="Series"
autocomplete="off" style="width: 150px;">
</div>
@if ($series)
<div style="position: fixed; z-index: 2; background-color: #2b2b2b;">
@forelse ($search_results as $search_result)
<div class="box">
<a href="{{ route('torrents.similar', ['category_id' => '2', 'tmdb' => $search_result->id]) }}" class="pull-left">
<img src="{{ $search_result->poster }}" style="width: 40px; height: 60px;">
<span class="text-bold">{{ $search_result->name }} ({{ substr($search_result->first_air_date, 0, 4) ?? '' }})</span>
</a>
@elseif (strlen($person) > 2 )
<div id="person.{{$search_result->id}}" class="row" style="cursor: pointer; margin-bottom: 5px;" @click="window.location.href = '{{ route('mediahub.persons.show', ['id' => $search_result->id]) }}'">
<div class="col-xs-3 text-center">
<img src="{{ $search_result->still }}" style="height: 60px; padding: 0; margin: 0">
</div>
@empty
<div class="px-3 py-3">No results for "{{ $series }}"</div>
@endforelse
</div>
@endif
</div>
<div class="form-group" wire:blur="$set('person', '')">
<div>
<input wire:model.debounce.250ms="person" type="text" class="form-control" placeholder="Person"
autocomplete="off" style="width: 150px;">
</div>
@if ($person)
<div style="position: fixed; z-index: 2; background-color: #2b2b2b;">
@forelse ($search_results as $search_result)
<div class="box">
<a href="{{ route('mediahub.persons.show', ['id' => $search_result->id]) }}" class="pull-left">
<img src="{{ $search_result->still }}" style="width: 40px; height: 60px;">
<span class="text-bold">{{ $search_result->name }}</span>
</a>
<div class="col-xs-9 text-left">
<span>{{ $search_result->name }}</span>
</div>
@empty
<div class="px-3 py-3">No results for "{{ $person }}"</div>
@endforelse
</div>
@endif
</div>
@endif
@empty
<div class="px-3 py-3">No results found</div>
@endforelse
</div>
@elseif( $movie || $series || $person)
<div style="width: 100%; min-height: 60px; margin: 0; padding: 3px; display: block; background-color: #2b2b2b;" @mouseenter="lock = true;" @mouseleave="lock = false">
<div class="px-3 my-3">Keep typing to get results</div>
</div>
@endif
</div>
<br>