Improve category selection UI in promociones view
Refactored the category selection in show-promociones.blade.php to display the selected category's image and name above the swiper. Updated the swiper to set the selected category and synchronize with Livewire. Wrapped the logout button in navigation.blade.php with additional padding for better spacing.
This commit is contained in:
Juan Felipe Duarte
@@ -218,15 +218,17 @@
|
||||
@endif
|
||||
|
||||
<!-- Logout -->
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="w-full text-left py-2 px-3 rounded flex items-center justify-start gap-2 bg-red-600 text-white hover:bg-red-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
||||
</svg>
|
||||
<span>Cerrar sesión</span>
|
||||
</button>
|
||||
</form>
|
||||
<div class="pt-6">
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="w-full text-left py-2 px-3 rounded flex items-center justify-start gap-2 bg-red-600 text-white hover:bg-red-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
||||
</svg>
|
||||
<span>Cerrar sesión</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,42 +41,49 @@
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
{{-- <div class=" gap-2 hidden sm:flex">
|
||||
<select name="categoria_id" id="categoria_id" wire:model.debounce.500ms="categoria_id"
|
||||
class="w-[8rem] border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
||||
<option value="" selected>Categoria</option>
|
||||
@foreach ($categorias as $categoria)
|
||||
<option value="{{ $categoria->id }}">{{ $categoria->nombre ?? '' }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div>
|
||||
@if (auth()->user()->rol->nombre == 'super' || auth()->user()->rol->nombre == 'administrador')
|
||||
<button x-on:click="newCategoria=true" x-transition.duration.300ms
|
||||
class="w-10 h-10 float-right bg-[#B221FD] hover:bg-[#7a02b8] rounded-full active:shadow-lg mouse shadow ease-in focus:outline-none">
|
||||
<svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
|
||||
<path fill="#FFFFFF"
|
||||
d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
|
||||
C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
|
||||
C15.952,9,16,9.447,16,10z" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div> --}}
|
||||
</div>
|
||||
|
||||
<div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
|
||||
<div class="swiper-wrapper">
|
||||
@foreach ($categorias as $i => $categoria1)
|
||||
<div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white" x-on:click="categorian='{{ $categoria1->nombre }}'">
|
||||
<img src="{{ asset($categoria1->imagen) }}" class="w-full h-12 md:h-32 object-cover object-center text-xs" alt="imagen de {{ $categoria1->nombre }}">
|
||||
</div>
|
||||
@endforeach
|
||||
<div
|
||||
x-data="{
|
||||
seleccionada: {
|
||||
nombre: '{{ $categorias->first()->nombre }}',
|
||||
imagen: '{{ asset($categorias->first()->imagen) }}'
|
||||
}
|
||||
}"
|
||||
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>
|
||||
|
||||
<div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
|
||||
<div class="swiper-wrapper">
|
||||
@foreach ($categorias as $categoria1)
|
||||
<div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white"
|
||||
x-on:click="
|
||||
seleccionada = {
|
||||
nombre: '{{ $categoria1->nombre }}',
|
||||
imagen: '{{ asset($categoria1->imagen) }}'
|
||||
};
|
||||
$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 }}">
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-center mt-2 mb-4">
|
||||
<button x-on:click="verPro=true" class="max-w-md rounded-lg text-sm md:text-base px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5">
|
||||
Ver todas las promociones
|
||||
@@ -1133,10 +1140,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user