root/besttechfrom.eu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lots of design improvements

Browse Source
This commit is contained in:
Doar Mihai
2026-02-14 16:11:09 +02:00
parent 56b593d9ca
commit 67de095a03
25 changed files with 1942 additions and 1477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/products/index.blade.php
+45 -24
View File
@@ -42,15 +42,20 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Filters & Sorting -->
<div class="mb-8">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<form method="GET" action="{{ route('products.index') }}" class="space-y-4 lg:space-y-0" x-data="{ showFilters: false }">
<!-- Filter Toggle (Mobile) -->
<div class="lg:hidden">
<div class="lg:hidden mb-4">
<button @click="showFilters = !showFilters"
type="button"
class="w-full btn-secondary flex items-center justify-between">
<span>Filters & Sort</span>
<svg class="h-5 w-5" :class="{ 'rotate-180': showFilters }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
class="w-full inline-flex items-center justify-between px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span class="flex items-center">
<svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
Filters & Sort
</span>
<svg class="h-5 w-5 transition-transform" :class="{ 'rotate-180': showFilters }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
@@ -58,20 +63,24 @@
<!-- Filters Grid -->
<div :class="{ 'hidden': !showFilters }"
class="lg:block grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
class="lg:flex lg:items-end lg:gap-4 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-4">
<!-- Search (hidden on desktop as it's in hero) -->
<div class="lg:hidden">
<div class="lg:hidden sm:col-span-2">
<label for="mobile-search" class="block text-sm font-medium text-gray-700 mb-2">Search</label>
<input type="text"
id="mobile-search"
name="search"
value="{{ request('search') }}"
placeholder="Search..."
class="input">
placeholder="Search products..."
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
</div>
<!-- Category Filter -->
<div>
<label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
<select name="category" id="category" class="input">
<div class="lg:flex-1">
<label for="category" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
<select name="category"
id="category"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
<option value="">All Categories</option>
@foreach($categories as $category)
<option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
@@ -82,9 +91,11 @@
</div>
<!-- Date Range Filter -->
<div>
<label for="date_range" class="block text-sm font-medium text-gray-700 mb-1">Time Period</label>
<select name="date_range" id="date_range" class="input">
<div class="lg:flex-1">
<label for="date_range" class="block text-sm font-medium text-gray-700 mb-2">Time Period</label>
<select name="date_range"
id="date_range"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
<option value="">All Time</option>
<option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option>
<option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option>
@@ -94,9 +105,11 @@
</div>
<!-- Sort By -->
<div>
<label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
<select name="sort" id="sort" class="input">
<div class="lg:flex-1">
<label for="sort" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
<select name="sort"
id="sort"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
<option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option>
<option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
<option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option>
@@ -104,11 +117,19 @@
</div>
<!-- Action Buttons -->
<div class="flex items-end space-x-2">
<button type="submit" class="btn-primary flex-1 lg:flex-none">
<div class="flex gap-2 sm:col-span-2 lg:col-span-auto lg:flex-shrink-0">
<button type="submit"
class="flex-1 lg:flex-none inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
Apply
</button>
<a href="{{ route('products.index') }}" class="btn-outline flex-1 lg:flex-none">
<a href="{{ route('products.index') }}"
class="flex-1 lg:flex-none inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
Clear
</a>
</div>
@@ -179,11 +200,11 @@
@endif
</p>
@auth
<a href="{{ route('products.create') }}" class="btn-primary inline-flex items-center space-x-2">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<a href="{{ route('products.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
<span>Submit a Product</span>
Submit a Product
</a>
@endauth
</div>