Update filter modal designs & Refactor code
This commit is contained in:
102
app/Helpers/FilterCategories.php
Normal file
102
app/Helpers/FilterCategories.php
Normal file
@@ -0,0 +1,102 @@
|
||||
<?php
|
||||
|
||||
namespace App\Helpers;
|
||||
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
use Conner\Tagging\Model\Tag;
|
||||
|
||||
class FilterCategories
|
||||
{
|
||||
public static function getFilterCategories()
|
||||
{
|
||||
$taglist = cache()->remember(
|
||||
'searchtags',
|
||||
300,
|
||||
fn () => Tag::where('count', '>', 0)
|
||||
->orderBy('slug')
|
||||
->get(),
|
||||
);
|
||||
|
||||
$appearances = [
|
||||
'Loli',
|
||||
'Shota',
|
||||
'Milf',
|
||||
'Futanari',
|
||||
'Big Boobs',
|
||||
'Small Boobs',
|
||||
'Dark Skin',
|
||||
'Cosplay',
|
||||
'Elf',
|
||||
'Maid',
|
||||
'Nekomimi',
|
||||
'Nurse',
|
||||
'School Girl',
|
||||
'Succubus',
|
||||
'Teacher',
|
||||
'Trap',
|
||||
'Pregnant',
|
||||
'Glasses',
|
||||
'Swim Suit',
|
||||
'Ugly Bastard',
|
||||
'Monster',
|
||||
];
|
||||
|
||||
$types = [
|
||||
'3D',
|
||||
'4K',
|
||||
'48Fps',
|
||||
'4K 48Fps',
|
||||
'Censored',
|
||||
'Uncensored',
|
||||
'Comedy',
|
||||
'Fantasy',
|
||||
'Horror',
|
||||
'Vanilla',
|
||||
'Ntr',
|
||||
'Pov',
|
||||
'Filmed',
|
||||
'X-Ray',
|
||||
];
|
||||
|
||||
$actions = [
|
||||
'Anal',
|
||||
'Bdsm',
|
||||
'Facial',
|
||||
'Blow Job',
|
||||
'Boob Job',
|
||||
'Foot Job',
|
||||
'Hand Job',
|
||||
'Rimjob',
|
||||
'Inflation',
|
||||
'Masturbation',
|
||||
'Public Sex',
|
||||
'Rape',
|
||||
'Reverse Rape',
|
||||
'Threesome',
|
||||
'Orgy',
|
||||
'Gangbang',
|
||||
];
|
||||
|
||||
$excluded = [...$appearances, ...$types, ...$actions];
|
||||
|
||||
$categories = [
|
||||
'Genres' => $taglist
|
||||
->reject(fn ($tag) => in_array($tag->name, $excluded))
|
||||
->pluck('name')
|
||||
->toArray(),
|
||||
|
||||
'Actions' => $actions,
|
||||
|
||||
'Appearance' => collect($appearances)
|
||||
->reject(function ($tag) {
|
||||
return auth()->guest() && in_array($tag, ['Loli', 'Shota']);
|
||||
})
|
||||
->toArray(),
|
||||
|
||||
'Types' => $types,
|
||||
];
|
||||
|
||||
return $categories;
|
||||
}
|
||||
}
|
||||
@@ -1,165 +1,107 @@
|
||||
<!--Verically centered modal-->
|
||||
<div data-te-modal-init
|
||||
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
|
||||
id="modalBlacklist" tabindex="-1" aria-labelledby="modalBlacklist" aria-modal="true" role="dialog">
|
||||
<div data-te-modal-dialog-ref
|
||||
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[60%]">
|
||||
<div
|
||||
data-te-modal-init
|
||||
id="modalBlacklist"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modalBlacklistLabel"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
|
||||
<x-modal-header :title="__('Blacklist')" />
|
||||
data-te-modal-dialog-ref
|
||||
class="flex min-h-screen items-center justify-center p-4"
|
||||
>
|
||||
<div
|
||||
class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
|
||||
<div>
|
||||
<h2
|
||||
id="modalGenresLabel"
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white"
|
||||
>
|
||||
Genres & Filters
|
||||
</h2>
|
||||
|
||||
<!--Modal body-->
|
||||
<div class="relative p-4">
|
||||
<p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
Select tags to blacklist from your content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="revertFilters"
|
||||
class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<form class="max-h-[75vh] overflow-y-auto">
|
||||
<div class="space-y-8 p-6">
|
||||
@foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
|
||||
<section>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
|
||||
{{ $section }}
|
||||
</h3>
|
||||
|
||||
<div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
@foreach ($items as $tag)
|
||||
@php
|
||||
$taglist = \cache()->remember(
|
||||
'searchtags',
|
||||
300,
|
||||
fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
|
||||
);
|
||||
$appearances = [
|
||||
'Loli',
|
||||
'Shota',
|
||||
'Milf',
|
||||
'Futanari',
|
||||
'Big Boobs',
|
||||
'Small Boobs',
|
||||
'Dark Skin',
|
||||
'Cosplay',
|
||||
'Elf',
|
||||
'Maid',
|
||||
'Nekomimi',
|
||||
'Nurse',
|
||||
'School Girl',
|
||||
'Succubus',
|
||||
'Teacher',
|
||||
'Trap',
|
||||
'Pregnant',
|
||||
'Glasses',
|
||||
'Swim Suit',
|
||||
'Ugly Bastard',
|
||||
'Monster',
|
||||
];
|
||||
$types = [
|
||||
'3D',
|
||||
'4K',
|
||||
'48Fps',
|
||||
'4K 48Fps',
|
||||
'Censored',
|
||||
'Uncensored',
|
||||
'Comedy',
|
||||
'Fantasy',
|
||||
'Horror',
|
||||
'Vanilla',
|
||||
'Ntr',
|
||||
'Pov',
|
||||
'Filmed',
|
||||
'X-Ray',
|
||||
];
|
||||
$actions = [
|
||||
'Anal',
|
||||
'Bdsm',
|
||||
'Facial',
|
||||
'Blow Job',
|
||||
'Boob Job',
|
||||
'Foot Job',
|
||||
'Hand Job',
|
||||
'Rimjob',
|
||||
'Inflation',
|
||||
'Masturbation',
|
||||
'Public Sex',
|
||||
'Rape',
|
||||
'Reverse Rape',
|
||||
'Threesome',
|
||||
'Orgy',
|
||||
'Gangbang',
|
||||
];
|
||||
$slug = Str::slug($tag);
|
||||
@endphp
|
||||
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($taglist as $tag)
|
||||
@if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
|
||||
@continue
|
||||
@endif
|
||||
<li class="inline-block m-1">
|
||||
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
|
||||
id="blacklist-{{ $tag->slug }}" name="blacklist[]" value="{{ $tag->slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="blacklist-{{ $tag->slug }}">{{ $tag->name }}</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<div>
|
||||
<input
|
||||
wire:model="blacklist"
|
||||
type="checkbox"
|
||||
id="blacklist-{{ $slug }}"
|
||||
name="blacklist[]"
|
||||
value="{{ $slug }}"
|
||||
class="peer hidden"
|
||||
>
|
||||
|
||||
<br>
|
||||
<!-- Actions -->
|
||||
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
|
||||
Action
|
||||
</p>
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($actions as $tag)
|
||||
<li class="inline-block m-1">
|
||||
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
|
||||
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
|
||||
id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="blacklist-{{ $slug }}">{{ $tag }}</label>
|
||||
</li>
|
||||
for="blacklist-{{ $slug }}"
|
||||
class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
|
||||
>
|
||||
{{ $tag }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<!-- Character Appearance -->
|
||||
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
|
||||
Appearance
|
||||
</p>
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($appearances as $tag)
|
||||
@guest
|
||||
@php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
|
||||
@endguest
|
||||
<li class="inline-block m-1">
|
||||
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
|
||||
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
|
||||
id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="blacklist-{{ $slug }}">{{ $tag }}</label>
|
||||
</li>
|
||||
</div>
|
||||
</section>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Video Types -->
|
||||
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
|
||||
Type
|
||||
</p>
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($types as $tag)
|
||||
<li class="inline-block m-1">
|
||||
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
|
||||
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
|
||||
id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="blacklist-{{ $slug }}">{{ $tag }}</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Modal footer-->
|
||||
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
|
||||
<button data-te-modal-dismiss wire:click="revertFilters" type="button"
|
||||
class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
|
||||
Close
|
||||
<!-- Footer -->
|
||||
<div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="revertFilters"
|
||||
class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button data-te-modal-dismiss wire:click="applyFilters" type="button"
|
||||
class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
|
||||
Apply
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="applyFilters"
|
||||
class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,163 +1,99 @@
|
||||
<!--Verically centered modal-->
|
||||
<div data-te-modal-init
|
||||
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
|
||||
id="modalGenres" tabindex="-1" aria-labelledby="modalGenres" aria-modal="true" role="dialog">
|
||||
<div data-te-modal-dialog-ref
|
||||
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[60%]">
|
||||
<div
|
||||
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
|
||||
<x-modal-header :title="__('Genres')" />
|
||||
<form>
|
||||
<!--Modal body-->
|
||||
<div class="relative p-4">
|
||||
@php
|
||||
$taglist = cache()->remember(
|
||||
'searchtags',
|
||||
300,
|
||||
fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
|
||||
);
|
||||
$appearances = [
|
||||
'Loli',
|
||||
'Shota',
|
||||
'Milf',
|
||||
'Futanari',
|
||||
'Big Boobs',
|
||||
'Small Boobs',
|
||||
'Dark Skin',
|
||||
'Cosplay',
|
||||
'Elf',
|
||||
'Maid',
|
||||
'Nekomimi',
|
||||
'Nurse',
|
||||
'School Girl',
|
||||
'Succubus',
|
||||
'Teacher',
|
||||
'Trap',
|
||||
'Pregnant',
|
||||
'Glasses',
|
||||
'Swim Suit',
|
||||
'Ugly Bastard',
|
||||
'Monster',
|
||||
];
|
||||
$types = [
|
||||
'3D',
|
||||
'4K',
|
||||
'48Fps',
|
||||
'4K 48Fps',
|
||||
'Censored',
|
||||
'Uncensored',
|
||||
'Comedy',
|
||||
'Fantasy',
|
||||
'Horror',
|
||||
'Vanilla',
|
||||
'Ntr',
|
||||
'Pov',
|
||||
'Filmed',
|
||||
'X-Ray',
|
||||
];
|
||||
$actions = [
|
||||
'Anal',
|
||||
'Bdsm',
|
||||
'Facial',
|
||||
'Blow Job',
|
||||
'Boob Job',
|
||||
'Foot Job',
|
||||
'Hand Job',
|
||||
'Rimjob',
|
||||
'Inflation',
|
||||
'Masturbation',
|
||||
'Public Sex',
|
||||
'Rape',
|
||||
'Reverse Rape',
|
||||
'Threesome',
|
||||
'Orgy',
|
||||
'Gangbang',
|
||||
];
|
||||
@endphp
|
||||
<div
|
||||
data-te-modal-init
|
||||
id="modalGenres"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modalGenresLabel"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
|
||||
>
|
||||
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
|
||||
<div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
|
||||
<div>
|
||||
<h2
|
||||
id="modalGenresLabel"
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white"
|
||||
>
|
||||
Genres & Filters
|
||||
</h2>
|
||||
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($taglist as $tag)
|
||||
@if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
|
||||
@continue
|
||||
@endif
|
||||
<li class="inline-block m-1">
|
||||
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
|
||||
id="tags-{{ $tag->slug }}" name="tags[]" value="{{ $tag->slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="tags-{{ $tag->slug }}">{{ $tag->name }}</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<!-- Actions -->
|
||||
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
|
||||
Action
|
||||
<p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
Select tags to filter your content.
|
||||
</p>
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($actions as $tag)
|
||||
<li class="inline-block m-1">
|
||||
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
|
||||
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
|
||||
id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="tags-{{ $slug }}">{{ $tag }}</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<!-- Character Appearance -->
|
||||
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
|
||||
Appearance
|
||||
</p>
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($appearances as $tag)
|
||||
@guest
|
||||
@php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
|
||||
@endguest
|
||||
<li class="inline-block m-1">
|
||||
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
|
||||
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
|
||||
id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="tags-{{ $slug }}">{{ $tag }}</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Video Types -->
|
||||
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
|
||||
Type
|
||||
</p>
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
@foreach ($types as $tag)
|
||||
<li class="inline-block m-1">
|
||||
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
|
||||
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
|
||||
id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="tags-{{ $slug }}">{{ $tag }}</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Modal footer-->
|
||||
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
|
||||
<button data-te-modal-dismiss wire:click="revertFilters" type="button"
|
||||
class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
|
||||
Close
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="revertFilters"
|
||||
class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<button data-te-modal-dismiss wire:click="applyFilters" type="button"
|
||||
class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
|
||||
Apply
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<form class="max-h-[75vh] overflow-y-auto">
|
||||
<div class="space-y-8 p-6">
|
||||
@foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
|
||||
<section>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
|
||||
{{ $section }}
|
||||
</h3>
|
||||
|
||||
<div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
@foreach ($items as $tag)
|
||||
@php
|
||||
$slug = Str::slug($tag);
|
||||
@endphp
|
||||
|
||||
<div>
|
||||
<input
|
||||
wire:model="tags"
|
||||
type="checkbox"
|
||||
id="tags-{{ $slug }}"
|
||||
name="tags[]"
|
||||
value="{{ $slug }}"
|
||||
class="peer hidden"
|
||||
>
|
||||
|
||||
<label
|
||||
for="tags-{{ $slug }}"
|
||||
class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
|
||||
>
|
||||
{{ $tag }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="revertFilters"
|
||||
class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="applyFilters"
|
||||
class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,40 +1,86 @@
|
||||
<!--Verically centered modal-->
|
||||
<div data-te-modal-init
|
||||
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
|
||||
id="modalStudios" tabindex="-1" aria-labelledby="modalStudios" aria-modal="true" role="dialog">
|
||||
<div data-te-modal-dialog-ref
|
||||
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[60%]">
|
||||
<div
|
||||
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
|
||||
<x-modal-header :title="__('Studios')" />
|
||||
<div
|
||||
data-te-modal-init
|
||||
id="modalStudios"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modalStudios"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
|
||||
>
|
||||
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
|
||||
<div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
|
||||
<div>
|
||||
<h2
|
||||
id="modalGenresLabel"
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white"
|
||||
>
|
||||
Studios
|
||||
</h2>
|
||||
|
||||
<!--Modal body-->
|
||||
<div class="relative p-4">
|
||||
<ul class="list-none text-justify" style="overflow: hidden;">
|
||||
<p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
Select studios to filter your content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="revertFilters"
|
||||
class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<form class="max-h-[75vh] overflow-y-auto">
|
||||
<div class="space-y-8 p-6">
|
||||
@php $studios = \cache()->remember('searchstudios', 300, fn () => App\Models\Studios::orderBy('name', 'ASC')->get()); @endphp
|
||||
<div class="flex flex-wrap gap-3">
|
||||
@foreach ($studios as $studio)
|
||||
<li class="inline-block m-1">
|
||||
<input class="m-5 hidden peer" wire:model="studios" type="checkbox"
|
||||
id="studio-{{ $studio->slug }}" name="studios[]" value="{{ $studio->slug }}">
|
||||
<div>
|
||||
<input
|
||||
wire:model="studios"
|
||||
type="checkbox"
|
||||
id="studio-{{ $studio->slug }}"
|
||||
name="studios[]"
|
||||
value="{{ $studio->slug }}"
|
||||
class="m-5 hidden peer"
|
||||
>
|
||||
<label
|
||||
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
|
||||
for="studio-{{ $studio->slug }}">{{ $studio->name }}</label>
|
||||
</li>
|
||||
for="studio-{{ $studio->slug }}"
|
||||
class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
|
||||
>
|
||||
{{ $studio->name }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Modal footer-->
|
||||
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
|
||||
<button data-te-modal-dismiss wire:click="revertFilters" type="button"
|
||||
class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
|
||||
Close
|
||||
<!-- Footer -->
|
||||
<div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="revertFilters"
|
||||
class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button data-te-modal-dismiss wire:click="applyFilters" type="button"
|
||||
class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
|
||||
Apply
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-te-modal-dismiss
|
||||
wire:click="applyFilters"
|
||||
class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user