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

fix: que las imágenes de promociones entren completas en sus cuadros

Browse Source 
Las tarjetas usaban object-cover con altura fija, así que a los banners
anchos les recortaba los lados: se veía "plex" en vez de "Plex" y los
logos de Crunchyroll y ViX quedaban cortados.

Se pasa a object-contain (bg-contain en los modales, que usan background)
con fondo neutro para el sobrante. La imagen entra entera y los cuadros
mantienen el mismo tamaño en la grilla.

Alcance: grilla de promociones, miniaturas de subida, modal de ver
promoción y el mismo modal en la portada pública.

Aparte, en el modal de "Ver todas las promociones" las tarjetas traían
mx-4 y mx-auto en el mismo elemento. Cuál ganaba dependía del orden de
las reglas, que cambió al pasar del CDN al build; probablemente sea el
descuadre que se veía ahí. Se deja solo mx-auto.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
2026-08-01 23:20:29 +00:00
co-authored by Claude Sonnet 4.6
parent 203c0808a1
commit e7ff4bf248
5 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/portada-servicio.blade.php
+3 -2
View File
@@ -71,8 +71,9 @@
<div class="grid h-full place-items-center">
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/3 lg:1/3 xl:w-1/4">
{{-- PHOTO --}}
{{-- URL de runtime: no puede ser clase arbitraria de Tailwind --}}
<div class="w-full text-left text-white px-4 bg-cover bg-center py-2 rounded-lg h-64"
{{-- URL de runtime: no puede ser clase arbitraria de Tailwind.
bg-contain para que el banner entre completo, sin recortes. --}}
<div class="w-full bg-contain bg-no-repeat bg-center bg-gray-50 rounded-t-lg h-64"
style="background-image: url('{{ asset($this->imagen) }}');">
</div>
resources/views/livewire/show-promociones.blade.php
+13 -10
View File
@@ -106,7 +106,7 @@
<div wire:click="verPromocion({{ $promocion->id }})" class="">
<img src="{{ asset($promocion->img_publicidad) }}" alt=""
class="w-full m-auto rounded-lg object-cover h-24 sm:h-36 object-center shadow">
class="w-full m-auto rounded-lg object-contain object-center bg-white h-24 sm:h-36 shadow">
</div>
@@ -145,7 +145,7 @@
<div wire:click="verPromocion({{ $promocion->id }})" class="">
<img src="{{ asset($promocion->img_publicidad) }}" alt=""
class="w-full m-auto rounded-lg object-cover h-24 sm:h-44 object-center shadow">
class="w-full m-auto rounded-lg object-contain object-center bg-white h-24 sm:h-44 shadow">
</div>
@@ -197,13 +197,13 @@
<div>
@if ($photo)
<img src="{{ $photo->temporaryUrl() }}" alt=""
class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
@error('photo')
<span class="text-red-400 text-sm">Obligatorio*</span>
@enderror
@else
<img src="" alt=""
class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
@error('photo')
<span class="text-red-400 text-sm">Obligatorio*</span>
@enderror
@@ -417,7 +417,7 @@
<div>
@if ($categoria_photo)
<img src="{{$categoria_photo->temporaryUrl()}}" alt="" class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
<img src="{{$categoria_photo->temporaryUrl()}}" alt="" class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
@endif
</div>
@@ -464,7 +464,7 @@
{{-- La URL sale en runtime, así que no puede ir como clase
arbitraria de Tailwind: el build no la ve y no genera
nada. Va como estilo en línea. --}}
<div class="w-full text-left text-white px-4 bg-cover bg-center py-2 rounded-lg h-64"
<div class="w-full bg-contain bg-no-repeat bg-center bg-gray-50 rounded-t-lg h-64"
style="background-image: url('{{ asset($this->imagen) }}');">
</div>
@@ -523,10 +523,10 @@
<div>
@if ($photo)
<img src="{{ $photo->temporaryUrl() }}" alt=""
class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
@else
<img src="{{ asset($img_ver) }}" alt=""
class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
@endif
</div>
</div>
@@ -1121,11 +1121,14 @@
@foreach ($categorias as $categoria1)
<div class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[250px] sm:w-[350px] sm:h-[350px] mx-4 my-2 mx-auto"
{{-- Iba con mx-4 y mx-auto a la vez: cuál ganaba dependía
del orden de las reglas, que cambió al pasar del CDN
al build. Se deja solo mx-auto, que es el que centra. --}}
<div class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[250px] sm:w-[350px] sm:h-[350px] my-2 mx-auto"
x-on:click="categorian='{{ $categoria1->nombre }}',verPro=false">
<a href="#promo">
<img src="{{ asset($categoria1->imagen) }}"
class="w-full m-auto rounded-lg object-cover h-full object-center shadow"
class="w-full m-auto rounded-lg object-contain object-center bg-white h-full shadow"
alt="">
</a>