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

feat: replace static category grid with swiper carousel and upgrade blog search UI

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-25 06:18:44 +03:00
parent afa92d8f4a
commit b4a81d703a
3 changed files with 54 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/BlogController.php
+4 -4
View File
@@ -167,17 +167,17 @@ class BlogController extends Controller
} }
if (class_exists(\App\Models\BlogCategory::class)) { if (class_exists(\App\Models\BlogCategory::class)) {
// Hoş Geldiniz bölümü altındaki 3'lü kategori vurgusu // Hoş Geldiniz bölümü altındaki 4'lü kategori vurgusu
$highlightCategories = \App\Models\BlogCategory::where('is_active', true) $highlightCategories = \App\Models\BlogCategory::where('is_active', true)
->withCount('blogs') ->withCount('blogs')
->has('blogs') ->has('blogs')
->orderBy('sort_order') ->orderBy('sort_order')
->take(3) ->take(4)
->get(); ->get();
if ($highlightCategories->count() < 3) { if ($highlightCategories->count() < 4) {
$highlightCategories = \App\Models\BlogCategory::where('is_active', true) $highlightCategories = \App\Models\BlogCategory::where('is_active', true)
->orderBy('sort_order') ->orderBy('sort_order')
->take(3) ->take(4)
->get(); ->get();
} }
public/assets/img/photos/blog_cat_app.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 758 KiB

After

Width:  |  Height:  |  Size: 1002 KiB

resources/views/blog/index.blade.php
+25 -87
View File
@@ -66,12 +66,9 @@
<!-- Dynamic Highlights Section --> <!-- Dynamic Highlights Section -->
@if(isset($highlightCategories) && $highlightCategories->count() > 0) @if(isset($highlightCategories) && $highlightCategories->count() > 0)
@php <div class="swiper-container blog grid-view !mb-12 relative z-10" data-margin="30" data-dots="true" data-items-xl="4" data-items-lg="4" data-items-md="2" data-items-xs="2">
$catCount = $highlightCategories->count(); <div class="swiper">
// Dynamically select column width based on category count <div class="swiper-wrapper">
$gridClass = $catCount >= 4 ? 'md:w-6/12 lg:w-3/12 xl:w-3/12' : 'md:w-6/12 lg:w-4/12 xl:w-4/12';
@endphp
<div class="flex flex-wrap mx-[-15px] grid-view md:mx-[-20px] lg:mx-[-20px] xl:mx-[-25px] !mt-[-40px] xl:!mt-0 lg:!mt-0 !text-center !mb-8">
@foreach($highlightCategories as $index => $hCat) @foreach($highlightCategories as $index => $hCat)
@php @php
$images = [ $images = [
@@ -83,7 +80,7 @@
$hImg = isset($images[$hCat->slug]) ? asset($images[$hCat->slug]) : asset('assets/img/photos/blog_cat_tech.png'); $hImg = isset($images[$hCat->slug]) ? asset($images[$hCat->slug]) : asset('assets/img/photos/blog_cat_tech.png');
$hUrl = route('blog.index', ['category' => $hCat->slug]); $hUrl = route('blog.index', ['category' => $hCat->slug]);
@endphp @endphp
<div class="{{ $gridClass }} w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0"> <div class="swiper-slide">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"> <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<figure class="card-img-top overlay overlay-1 group"> <figure class="card-img-top overlay overlay-1 group">
<a href="{{ $hUrl }}"> <a href="{{ $hUrl }}">
@@ -93,38 +90,27 @@
<h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Keşfet</h5> <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Keşfet</h5>
</figcaption> </figcaption>
</figure> </figure>
<div class="card-body p-5"> <div class="card-body p-5 !text-center">
<h4 class="!mb-0"> <h4 class="!mb-0">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $hUrl }}">{{ $hCat->name }}</a> <a class="!text-[#343f52] hover:!text-[#e31e24] font-semibold" href="{{ $hUrl }}">{{ $hCat->name }}</a>
</h4> </h4>
</div> </div>
</div> </div>
</div> </div>
@endforeach @endforeach
</div> </div>
@endif </div>
<!-- Category Filter & Search Bar Wrapper -->
<div class="flex flex-wrap justify-between items-center gap-4 !mb-8 blog-filter-search-wrapper">
@if(isset($categories) && $categories->count() > 0)
<div class="blog-filter-menu !mb-0">
<a href="#" class="category-filter-btn active" data-category="">
Tümü
</a>
@foreach($categories as $category)
<a href="#" class="category-filter-btn" data-category="{{ $category->slug }}">
{{ $category->name }}
</a>
@endforeach
</div> </div>
@endif @endif
<!-- Premium Search Box --> <!-- Premium Search Bar Wrapper -->
<div class="flex justify-center items-center !mb-10 blog-filter-search-wrapper">
<!-- Premium Centered and Larger Search Box -->
<div class="blog-search-box"> <div class="blog-search-box">
<form action="#" class="blog-search-form" id="blog-search-form"> <form action="#" class="blog-search-form" id="blog-search-form">
<input type="text" name="search" id="blog-search-input" placeholder="Yazılarda ara..." autocomplete="off"> <input type="text" name="search" id="blog-search-input" placeholder="Yazılarda ara..." autocomplete="off">
<button type="submit" class="blog-search-submit-btn"> <button type="submit" class="blog-search-submit-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="width: 14px; height: 14px; display: block; color: white;"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="width: 15px; height: 15px; display: block; color: white;">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg> </svg>
</button> </button>
@@ -233,69 +219,24 @@
@push('styles') @push('styles')
<style> <style>
/* Premium Blog Filter Menu */ /* Premium Centered & Large Blog Search Box */
.blog-filter-menu {
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
background: #ffffff !important;
padding: 8px 12px !important;
border-radius: 50px !important;
border: 1px solid #eef2f6 !important;
box-shadow: 0 4px 20px rgba(30, 34, 40, 0.05) !important;
margin-bottom: 0 !important;
align-items: center !important;
}
.category-filter-btn {
font-size: 0.75rem !important;
font-weight: 700 !important;
padding: 8px 20px !important;
border-radius: 50px !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid transparent !important;
color: #60697b !important;
background: transparent !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
text-decoration: none !important;
cursor: pointer !important;
}
.category-filter-btn:hover {
color: #e31e24 !important;
background: rgba(227, 30, 36, 0.05) !important;
text-decoration: none !important;
}
.category-filter-btn.active {
color: #ffffff !important;
background: #e31e24 !important;
border-color: #e31e24 !important;
box-shadow: 0 4px 12px rgba(227, 30, 36, 0.25) !important;
text-decoration: none !important;
}
/* Premium Blog Search Box */
.blog-search-box { .blog-search-box {
background: #ffffff !important; background: #ffffff !important;
border-radius: 50px !important; border-radius: 50px !important;
border: 1px solid #eef2f6 !important; border: 1px solid #eef2f6 !important;
box-shadow: 0 4px 20px rgba(30, 34, 40, 0.05) !important; box-shadow: 0 6px 25px rgba(30, 34, 40, 0.05) !important;
padding: 4px 6px 4px 18px !important; padding: 6px 8px 6px 24px !important;
display: inline-flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
width: 280px !important; width: 100% !important;
max-width: 650px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
} }
.blog-search-box:focus-within { .blog-search-box:focus-within {
border-color: #e31e24 !important; border-color: #e31e24 !important;
box-shadow: 0 4px 20px rgba(227, 30, 36, 0.1) !important; box-shadow: 0 8px 30px rgba(227, 30, 36, 0.12) !important;
width: 320px !important; transform: translateY(-2px) !important;
} }
.blog-search-form { .blog-search-form {
@@ -309,11 +250,11 @@
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
outline: none !important; outline: none !important;
font-size: 0.8rem !important; font-size: 0.95rem !important;
font-weight: 500 !important; font-weight: 500 !important;
color: #343f52 !important; color: #343f52 !important;
width: 100% !important; width: 100% !important;
padding: 6px 0 !important; padding: 8px 0 !important;
} }
#blog-search-input::placeholder { #blog-search-input::placeholder {
@@ -324,8 +265,8 @@
border: none !important; border: none !important;
background: #e31e24 !important; background: #e31e24 !important;
color: #ffffff !important; color: #ffffff !important;
width: 32px !important; width: 38px !important;
height: 32px !important; height: 38px !important;
border-radius: 50% !important; border-radius: 50% !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
@@ -345,15 +286,12 @@
@media (max-width: 991px) { @media (max-width: 991px) {
.blog-filter-search-wrapper { .blog-filter-search-wrapper {
flex-direction: column !important; align-items: center !important;
align-items: stretch !important;
gap: 15px !important; gap: 15px !important;
}
.blog-filter-menu {
justify-content: center !important;
width: 100% !important; width: 100% !important;
} }
.blog-search-box { .blog-search-box {
max-width: 100% !important;
width: 100% !important; width: 100% !important;
} }
} }