Initial commit
This commit is contained in:
Ahrom
170
resources/views/livewire/search.blade.php
Normal file
170
resources/views/livewire/search.blade.php
Normal file
@@ -0,0 +1,170 @@
|
||||
@push('style_css')
|
||||
<style>
|
||||
.max-w-5xl {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@section('robots')
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
@endsection
|
||||
<div x-data="search">
|
||||
<div @click.outside=" searchbar = false , showbackdrop = false , text = '' "
|
||||
class=" gap-4 max-w-5xl mx-auto items-center w-full justify-center px-4 py-8 md:py-4 lg:flex text-slate-900 relative">
|
||||
<div style="z-index: 1001;" class="flex flex-col w-[100%] rounded-xl">
|
||||
<h3 class="my-3 font-bold flex items-center text-[16px] lg:text-[22px] gap-2">
|
||||
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px] "> </div> <span>نتایج جستجو برای {{ $search }}</span>
|
||||
</h3>
|
||||
<div class="gap-2 mb-3">
|
||||
@if (count($blogsSearchs) > 0)
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-8 md:my-4 lg:my-8 w-full">
|
||||
@foreach ($blogsSearchs as $blog)
|
||||
<div
|
||||
class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
|
||||
<a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
|
||||
class="relative w-[80px] md:w-full">
|
||||
<img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||||
src="{{ asset('images/' . $blog->image) . '/' }}" alt="">
|
||||
</a>
|
||||
<div
|
||||
class="flex justify-start md:justify-normal flex-col md:w-full gap-2 h-full md:p-4">
|
||||
<a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
|
||||
class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
||||
{!! $blog->subject !!}
|
||||
</a>
|
||||
<div class="md:block hidden text-[#16205b]">
|
||||
@php
|
||||
$preview = Str::limit($blog->preview, 80, '...');
|
||||
@endphp
|
||||
{!! $preview !!}
|
||||
</div>
|
||||
<div class="flex gap-1 text-white md:mt-auto">
|
||||
<div class="hidden md:flex flex-col justify-center">
|
||||
<img class="bg-cover bg-center rounded-full size-8" src="{{ asset($blog->user->picture) }}" alt="">
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||||
{{ $blog->user->full_name }}
|
||||
</div>
|
||||
<span style="font-variation-settings: 'wght' 500;"
|
||||
class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
|
||||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||||
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
@if (strlen($search) > 0)
|
||||
<div class="flex items-center flex-col mx-auto justify-center gap-4 my-5">
|
||||
<svg height="75px" width="75px" class="cursor-pointer me-2 "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
|
||||
</svg>
|
||||
<span class="text-slate-400">موردی یافت نشد!</span>
|
||||
</div>
|
||||
@else
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@if (count($blogsSearchs) > 0)
|
||||
@if ($blogsSearchs->hasPages())
|
||||
|
||||
<nav class="mt-6">
|
||||
<ul class="pagination flex gap-4">
|
||||
@if ($blogsSearchs->onFirstPage())
|
||||
@else
|
||||
<li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() - 1) }}" wire:navigate rel="prev">«</a></li>
|
||||
@endif
|
||||
|
||||
@foreach ($blogsSearchs->links()->elements as $element)
|
||||
@if (is_string($element))
|
||||
<li class="disabled"><span>{{ $element }}</span></li>
|
||||
@endif
|
||||
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $blogsSearchs->currentPage())
|
||||
<li class="active"><span>{{ $page }}</span></li>
|
||||
@elseif(
|
||||
$page == 1 ||
|
||||
$page == $blogsSearchs->lastPage() ||
|
||||
($page >= $blogsSearchs->currentPage() - 1 && $page <= $blogsSearchs->currentPage() + 1))
|
||||
@if ($page == 1)
|
||||
<li><a href="{{ url('/search?q=' . $search) }}" wire:navigate>{{ $page }}</a></li>
|
||||
@else
|
||||
<li><a href="{{ url('/search?q=' . $search . '&' . 'page=' . $page) }}" wire:navigate>{{ $page }}</a></li>
|
||||
@endif
|
||||
@elseif($page == 2 || $page == $blogsSearchs->lastPage() - 1)
|
||||
<li class="disabled"><span class="pb-[6px]">...</span></li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@if ($blogsSearchs->hasMorePages())
|
||||
<li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() + 1) }}" wire:navigate rel="next">»</a></li>
|
||||
@else
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@script
|
||||
<script>
|
||||
Alpine.data('search', () => ({
|
||||
isFixed: false,
|
||||
btntogglesidebar: false,
|
||||
menuMore: false,
|
||||
searchbar: false,
|
||||
showbackdrop: false,
|
||||
text: '',
|
||||
init() {
|
||||
document.getElementById("buttonside").addEventListener("click", function() {
|
||||
setTimeout(() => {
|
||||
document.getElementById("inputSearchPage").focus();
|
||||
}, 100);
|
||||
});
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.key == "/") {
|
||||
setTimeout(() => {
|
||||
document.getElementById("inputSearchPage").focus();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
const isScrollingUp = this.prevScrollpos > window.pageYOffset;
|
||||
const headerScroll = document.getElementById('headerScroll');
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
checkInputLength() {
|
||||
|
||||
console.log(document.getElementById('inputSearchPage').value.length);
|
||||
if (document.getElementById('inputSearchPage').value.length >= 3) {
|
||||
|
||||
this.showbackdrop = true;
|
||||
this.$wire.searchBox();
|
||||
|
||||
} else {
|
||||
|
||||
this.$wire.refreshsearch();
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}));
|
||||
</script>
|
||||
@endscript
|
||||
Reference in New Issue
Block a user