163 lines
9.8 KiB
PHP
163 lines
9.8 KiB
PHP
<div>
|
|
@if (count($category->mag_blogs()) > 0)
|
|
<div>
|
|
<div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
|
|
<span class="font-bold flex items-center gap-2 text-[#16205b]">
|
|
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
|
|
مطالب {{$category->title}}
|
|
</span>
|
|
<a class="text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px]" href="{{ route('CategoryBlog.index', ['slug' => $category->slug]) . '/' }}" wire:navigate>مشاهده همه</a>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
|
|
@foreach ($category->mag_blogs() 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">
|
|
<div x-data="{
|
|
loaded: false,
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !this.loaded) {
|
|
|
|
const img = new Image();
|
|
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
|
img.onload = () => {
|
|
this.loaded = true;
|
|
|
|
observer.unobserve(this.$el);
|
|
};
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: '200px'
|
|
});
|
|
|
|
observer.observe(this.$el);
|
|
}
|
|
}" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
|
|
|
|
|
<img x-cloak x-show="loaded"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
|
alt="{{ $blog->subject }}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
|
loading="lazy">
|
|
</div>
|
|
</a>
|
|
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col 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="{{ env('APP_URL_IMAGE').'images/static/'.$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>
|
|
<a href=" {{cleanRouteUrl('CategoryBlog.index' , ['slug' => $category->slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر
|
|
</a>
|
|
</div>
|
|
@elseif(count($category->mag_news()) > 0)
|
|
<div>
|
|
<div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
|
|
<span class="font-bold flex items-center gap-2 text-[#16205b]">
|
|
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
|
|
@php
|
|
$parent = App\Models\Category::where('id', $category->parent_id)->first();
|
|
if (!is_null($parent)) {
|
|
$parent = $parent;
|
|
} else {
|
|
$parent = $category;
|
|
}
|
|
@endphp
|
|
{{$parent->title}} {{$category->title}}
|
|
</span>
|
|
<a class="text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px]" href=" {{ route('NewsCategory.show', ['slug' => $category->slug]) . '/' }}" wire:navigate>مشاهده همه</a>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
|
|
@foreach ($category->mag_news() 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">
|
|
<div x-data="{
|
|
loaded: false,
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !this.loaded) {
|
|
const img = new Image();
|
|
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
|
img.onload = () => {
|
|
this.loaded = true;
|
|
observer.unobserve(this.$el);
|
|
};
|
|
}
|
|
});
|
|
}, { rootMargin: '200px' });
|
|
|
|
observer.observe(this.$el);
|
|
}
|
|
}" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
|
|
|
|
|
<img x-cloak x-show="loaded"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
|
alt="{{ $blog->subject }}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
|
loading="lazy">
|
|
</div>
|
|
</a>
|
|
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col 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="{{ env('APP_URL_IMAGE').'images/static/'.$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>
|
|
<a href=" {{ route('NewsCategory.show', ['slug' => $category->slug]) }}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div> |