usite-sas-bic/sirpremiumv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update category selection UI for mobile responsiveness

Browse Source 
Refactored the selected category display to improve mobile responsiveness by adjusting container classes and image sizing. Added category name display below images for mobile view. These changes enhance the user experience on smaller screens.
This commit is contained in:
Juan Felipe Duarte
2025-10-16 16:13:26 -05:00
parent bde877d07f
commit 084a766187
1 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/show-promociones.blade.php
+6 -12
View File
@@ -52,15 +52,8 @@
}"
class="w-full"
>
<div x-show="seleccionada"
x-transition
class="mb-6 bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 max-w-4xl m-auto">
<img :src="seleccionada.imagen"
class="w-full h-24 sm:h-36 md:h-56 object-cover object-center"
alt="imagen de categoría seleccionada">
<div class="p-4 text-center">
<h2 class="text-xl font-semibold text-gray-800" x-text="seleccionada.nombre"></h2>
</div>
<div x-show="seleccionada" x-transition class="md:hidden bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 w-40 xs:w-5 sm:w-60 m-auto">
<img :src="seleccionada.imagen" class="w-full object-cover object-center" alt="imagen de categoría seleccionada">
</div>
<div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
@@ -75,9 +68,10 @@
$wire.set('categorian', '{{ $categoria1->nombre }}')
"
>
<img src="{{ asset($categoria1->imagen) }}"
class="w-full h-12 md:h-32 object-cover object-center"
alt="imagen de {{ $categoria1->nombre }}">
<img src="{{ asset($categoria1->imagen) }}" class="w-full h-12 md:h-full object-cover object-center" alt="imagen de {{ $categoria1->nombre }}">
<div class="p-2 text-center md:hidden">
<h2 class="text-xs font-semibold text-gray-800">{{ $categoria1->nombre }}</h2>
</div>
</div>
@endforeach
</div>