Initial commit
This commit is contained in:
Ahrom
163
resources/views/livewire/partials/three-col.blade.php
Normal file
163
resources/views/livewire/partials/three-col.blade.php
Normal file
@@ -0,0 +1,163 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user