Initial commit
This commit is contained in:
Ahrom
287
resources/views/components/grid/puzzle.blade.php
Normal file
287
resources/views/components/grid/puzzle.blade.php
Normal file
@@ -0,0 +1,287 @@
|
||||
@props(['blogs'])
|
||||
|
||||
<div>
|
||||
|
||||
@php
|
||||
$count=0;
|
||||
$num=0;
|
||||
@endphp
|
||||
|
||||
@foreach($blogs->chunk(4) as $key => $chunk)
|
||||
|
||||
<div class="grid my-5 grid-cols-2 gap-10 h-[66vh] ">
|
||||
|
||||
|
||||
{{-- @dd($blogs->chunk(4))--}}
|
||||
@if($count%4==0 && $chunk->has($count))
|
||||
@php
|
||||
|
||||
$blog=$chunk->all()[$count];
|
||||
|
||||
$num=0;
|
||||
|
||||
@endphp
|
||||
<div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
"
|
||||
class=" rounded-xl">
|
||||
|
||||
<a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>
|
||||
|
||||
<div class="p-5 h-full rounded-xl"
|
||||
style="background-image: linear-gradient(180deg, transparent, black);">
|
||||
|
||||
<div class="h-full flex flex-col gap-1 justify-end">
|
||||
|
||||
<div>
|
||||
<div style="background: {{$blog->category->color}}"
|
||||
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
||||
<svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="5" cx="5" cy="6.5" fill="black" />
|
||||
</svg>
|
||||
{{$blog->category->title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->subject !!}
|
||||
</div>
|
||||
<div>
|
||||
{!! $blog->preview !!}
|
||||
</div>
|
||||
<div class="flex gap-5 text-white">
|
||||
|
||||
<div>
|
||||
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->likes ??0 !!}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
@php $count=$count+1; @endphp
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
<div class="">
|
||||
<div class="grid gap-10 h-full">
|
||||
|
||||
@if($count%4==1 && $chunk->has($count))
|
||||
@php
|
||||
|
||||
$blog=$chunk->all()[$count];
|
||||
|
||||
@endphp
|
||||
<div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;"
|
||||
class=" rounded-xl ">
|
||||
|
||||
<a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>
|
||||
|
||||
<div class="p-5 h-full rounded-xl"
|
||||
style="background-image: linear-gradient(180deg, transparent, black);">
|
||||
|
||||
<div class="h-full flex flex-col gap-1 justify-end">
|
||||
|
||||
<div>
|
||||
<div style="background: {{$blog->category->color}}"
|
||||
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
||||
<svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="5" cx="5" cy="6.5" fill="black" />
|
||||
</svg>
|
||||
{{$blog->category->title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->subject !!}
|
||||
</div>
|
||||
<div>
|
||||
{!! $blog->preview !!}
|
||||
</div>
|
||||
<div class="flex gap-5 text-white">
|
||||
|
||||
<div>
|
||||
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->likes ??0 !!}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
@php $count=$count+1; @endphp
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<div class="grid grid grid-cols-2 gap-10 h-full">
|
||||
|
||||
@if($count%4==2 && $chunk->has($count))
|
||||
@php
|
||||
|
||||
$blog=$chunk->all()[$count]
|
||||
|
||||
@endphp
|
||||
<div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;"
|
||||
class=" rounded-xl ">
|
||||
|
||||
<a {{route('detail',['id'=>$blog->id])}} wire:navigate>
|
||||
|
||||
<div class="p-5 h-full rounded-xl "
|
||||
style="background-image: linear-gradient(180deg, transparent, black);">
|
||||
|
||||
<div class="h-full flex flex-col gap-1 justify-end">
|
||||
|
||||
<div>
|
||||
<div style="background: {{$blog->category->color}}"
|
||||
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
||||
<svg height="12" width="12"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="5" cx="5" cy="6.5" fill="black" />
|
||||
</svg>
|
||||
{{$blog->category->title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->subject !!}
|
||||
</div>
|
||||
<div>
|
||||
{!! $blog->preview !!}
|
||||
</div>
|
||||
<div class="flex gap-5 text-white">
|
||||
|
||||
<div class="text-xs">
|
||||
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
||||
</div>
|
||||
|
||||
<div class="text-xs">
|
||||
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
||||
</div>
|
||||
|
||||
{{-- <div class="text-xs">--}}
|
||||
{{-- {!! $blog->likes ??0 !!}--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
@php $count=$count+1; @endphp
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
@if($count%4==3 && $chunk->has($count))
|
||||
@php
|
||||
|
||||
$blog=$chunk->all()[$count]
|
||||
|
||||
@endphp
|
||||
<div style="background-image: url('{{asset('images/'.$blog->image)}}');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;" class=" rounded-xl">
|
||||
|
||||
<a {{route('detail',['id'=>$blog->id])}} wire:navigate>
|
||||
|
||||
<div class="p-5 h-full rounded-xl"
|
||||
style="background-image: linear-gradient(180deg, transparent, black);">
|
||||
|
||||
<div class="h-full flex flex-col gap-1 justify-end">
|
||||
|
||||
<div>
|
||||
<div style="background: {{$blog->category->color}}"
|
||||
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
||||
<svg height="12" width="12"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="5" cx="5" cy="6.5" fill="black" />
|
||||
</svg>
|
||||
{{$blog->category->title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!! $blog->subject !!}
|
||||
</div>
|
||||
<div>
|
||||
{!! $blog->preview !!}
|
||||
</div>
|
||||
<div class="flex gap-5 text-white">
|
||||
|
||||
<div class="text-xs">
|
||||
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
||||
</div>
|
||||
|
||||
<div class="text-xs">
|
||||
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
||||
</div>
|
||||
|
||||
{{-- <div class="text-xs">--}}
|
||||
{{-- {!! $blog->likes ??0 !!}--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
@php $count=$count+1; @endphp
|
||||
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user