nurmuhammet/hoshal-market
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance DatabaseSeeder and Home view functionality

Browse Source 
- Updated DatabaseSeeder to check for existing admin user before creation.
- Modified Home view to include max-height for collection items and added filter functionality for product categories.
- Introduced JavaScript for dynamic filtering of product cards based on selected categories.
This commit is contained in:
Mekan1206
2026-06-04 22:43:51 +05:00
parent 57002c184c
commit 06d2999c74
4 changed files with 180 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/home.blade.php
View File

@@ -57,7 +57,7 @@
</div>
<div class="flex overflow-x-auto hide-scrollbar gap-6 pb-8 snap-x snap-mandatory" id="carousel-{{ $collection->id }}">
@foreach($collection->collectionItems as $item)
<div class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
<div style="max-height: 420px;" class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
<div class="absolute inset-4 border border-outline/30 z-10 pointer-events-none transition-transform duration-500 group-hover:scale-95"></div>
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80" data-alt="{{ $item->subtitle }}" style="background-image: url('{{ $item->image ? Storage::url($item->image) : asset('assets/images/collection-chocolate-cake.jpg') }}');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/90 via-primary-container/30 to-transparent"></div>
@@ -74,11 +74,11 @@
<section class="py-16 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto bg-surface-container-low border-y border-outline/10" id="menu">
<div class="flex overflow-x-auto hide-scrollbar gap-4 pb-8 mb-8 justify-center animate-on-scroll">
<button class="px-6 py-2 rounded-full bg-ink-brown text-surface-container-lowest font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap">
<button class="filter-btn px-6 py-2 rounded-full bg-ink-brown text-surface-container-lowest font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap" data-category="all">
<span class="material-symbols-outlined text-[16px]">cake</span> Hemmesi
</button>
@foreach($categories as $category)
<button class="px-6 py-2 rounded-full border border-outline/30 text-on-surface-variant hover:border-antique-gold hover:text-ink-brown transition-colors font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap bg-surface">
<button class="filter-btn px-6 py-2 rounded-full border border-outline/30 text-on-surface-variant hover:border-antique-gold hover:text-ink-brown transition-colors font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap bg-surface" data-category="{{ $category->id }}">
@if($category->icon)
<span class="material-symbols-outlined text-[16px]">{{ $category->icon }}</span>
@endif
@@ -88,7 +88,7 @@
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
@foreach($products as $index => $product)
<div class="group animate-on-scroll" style="transition-delay: {{ ($index % 4) * 100 }}ms;">
<div class="product-card group animate-on-scroll" data-category="{{ $product->category_id }}" style="transition-delay: {{ ($index % 4) * 100 }}ms;">
<div class="aspect-square mb-4 overflow-hidden relative bg-surface-variant">
<img alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="{{ $product->name }}" src="{{ $product->image ? Storage::url($product->image) : asset('assets/images/product-macaron.jpg') }}"/>
<div class="absolute inset-0 border border-outline/10 pointer-events-none m-2"></div>
@@ -128,4 +128,42 @@
</div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", () => {
const filterBtns = document.querySelectorAll('.filter-btn');
const productCards = document.querySelectorAll('.product-card');
const activeClasses = ['bg-ink-brown', 'text-surface-container-lowest'];
const inactiveClasses = ['border', 'border-outline/30', 'text-on-surface-variant', 'bg-surface'];
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
const category = btn.getAttribute('data-category');
// 1. Update button styles
filterBtns.forEach(b => {
b.classList.remove(...activeClasses);
b.classList.add(...inactiveClasses);
});
btn.classList.remove(...inactiveClasses);
btn.classList.add(...activeClasses);
// 2. Filter products
productCards.forEach(card => {
if (category === 'all' || card.getAttribute('data-category') === category) {
card.style.display = 'block';
// Small timeout to allow display:block to apply before re-animating
setTimeout(() => {
card.classList.add('is-visible');
}, 50);
} else {
card.style.display = 'none';
card.classList.remove('is-visible');
}
});
});
});
});
</script>
</x-layouts.app>