truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate blog post layout from classic view to responsive isotope grid with dynamic category styling and simulated engagement metrics

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-25 06:19:49 +03:00
parent b4a81d703a
commit 654a7ed175
2 changed files with 108 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/blog/index.blade.php
+11
View File
@@ -329,6 +329,17 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Pagination Overrides matching brand color */
.pagination-alt .page-item.active .page-link {
background: #e31e24 !important;
border-color: #e31e24 !important;
color: #ffffff !important;
}
.pagination-alt .page-link:hover {
color: #e31e24 !important;
border-color: #e31e24 !important;
}
</style>
@endpush
resources/views/blog/partials/posts.blade.php
+96 -100
View File
@@ -1,138 +1,134 @@
<div class="blog classic-view !mt-0">
@forelse($posts as $index => $post)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/tb8.jpg');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : 'Trunçgil';
@endphp
<div class="blog itemgrid grid-view !mt-0">
<div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
@forelse($posts as $post)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/tb10.jpg');
$blogUrl = route('blog.show', $post->slug);
@if($index < 3)
{{-- First 3 posts in Classic View --}}
<article class="post !mb-10">
$colorMap = [
'teknoloji-cozumleri' => '#54a8c7', // Blue
'yapay-zeka' => '#f78b77', // Coral/Red
'muzik-teknolojileri' => '#fab758', // Yellow
'uygulama-gelistirme' => '#7cb798', // Mint/Green
];
$catColor = $colorMap[$categorySlug] ?? '#d16b86'; // default Elemis rose/pink
// Comment count logic
$commentCount = $post->comments_count ?? ($post->comments ? $post->comments->count() : 0);
// Dynamic heart likes count scaled off view_count
$likesCount = max(3, round(($post->view_count ?? 0) * 0.1) + ($post->id % 5));
@endphp
<div class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@if($post->featured_image || $post->featured_image_url)
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" style="height: 420px; object-fit: cover; width: 100%;" loading="lazy">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" style="height: 240px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4 !text-white">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px]">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link !text-[#e31e24]" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
<div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" style="color: {{ $catColor }} !important;" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<h2 class="post-title !mt-1 !leading-[1.35] !mb-0">
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<div class="!relative">
<p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 220) }}</p>
<p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 120) }}</p>
</div>
</div>
<div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
<div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ $authorName }}</span>
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $commentCount }}</span>
</a>
</li>
<li class="post-likes !ml-auto inline-block">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#">
<i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>
<span>{{ $likesCount }}</span>
</a>
</li>
</ul>
</div>
</div>
</article>
@endif
@empty
<div class="text-center py-12">
<p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
</div>
@endforelse
</div>
@empty
<div class="w-full text-center py-12">
<p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
</div>
@endforelse
</div>
</div>
{{-- Subsequent posts in Grid View --}}
@if($posts->count() > 3)
<div class="blog itemgrid grid-view !mt-10">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
@foreach($posts as $index => $post)
@if($index >= 3)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/tb10.jpg');
$blogUrl = route('blog.show', $post->slug);
$authorName = $post->author ? $post->author->name : 'Trunçgil';
@endphp
{{-- Dynamic Custom Pagination --}}
@if(method_exists($posts, 'links') && $posts->hasPages())
<nav class="flex mt-8" aria-label="pagination">
<ul class="pagination pagination-alt">
{{-- Previous Page Link --}}
@if ($posts->onFirstPage())
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
</a>
</li>
@else
<li class="page-item">
<a class="page-link hover:!text-[#e31e24]" href="{{ $posts->previousPageUrl() }}" aria-label="Previous">
<span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
</a>
</li>
@endif
<div class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@if($post->featured_image || $post->featured_image_url)
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" style="height: 240px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4 !text-white">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
@endif
<div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px]">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover !text-[#e31e24] category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<div class="!relative">
<p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 120) }}</p>
</div>
</div>
<div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<span>{{ $authorName }}</span>
</a>
</li>
</ul>
</div>
</div>
</div>
{{-- Pagination Elements --}}
@foreach ($posts->getUrlRange(1, $posts->lastPage()) as $page => $url)
@if ($page == $posts->currentPage())
<li class="page-item active"><a class="page-link" href="#">{{ $page }}</a></li>
@else
<li class="page-item"><a class="page-link hover:!text-[#e31e24]" href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
</div>
</div>
@endif
{{-- Pagination --}}
@if(method_exists($posts, 'links') && $posts->hasPages())
<div class="mt-8 pagination-container flex justify-start">
{{ $posts->links() }}
</div>
{{-- Next Page Link --}}
@if ($posts->hasMorePages())
<li class="page-item">
<a class="page-link hover:!text-[#e31e24]" href="{{ $posts->nextPageUrl() }}" aria-label="Next">
<span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
</a>
</li>
@else
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
</a>
</li>
@endif
</ul>
</nav>
@endif