170 lines
7.9 KiB
PHP
170 lines
7.9 KiB
PHP
@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 |