style: volver a object-cover con los cuadros de promoción un 5% más grandes
Se revierte el object-contain del commit anterior: dejaba franjas de fondo
y se prefiere que la imagen llene el cuadro. A cambio los cuadros crecen
un 5%.
grilla h-24 -> h-[6.3rem]
sm:h-36 -> sm:h-[9.45rem]
sm:h-44 -> sm:h-[11.55rem]
modal promo h-64 -> h-[16.8rem]
modal "ver todas" 250/350px -> 262/368px
Las miniaturas de subida se quedan en object-contain a propósito: ahí lo
útil es ver entera la imagen que se acaba de elegir.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
e7ff4bf248
commit
7f4053ea62
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -5,7 +5,7 @@
|
||||
"isEntry": true
|
||||
},
|
||||
"resources/css/app.css": {
|
||||
"file": "assets/app.c0db9522.css",
|
||||
"file": "assets/app.d1255de1.css",
|
||||
"src": "resources/css/app.css",
|
||||
"isEntry": true
|
||||
}
|
||||
|
||||
@@ -71,9 +71,8 @@
|
||||
<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.
|
||||
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"
|
||||
{{-- URL de runtime: no puede ser clase arbitraria de Tailwind --}}
|
||||
<div class="w-full bg-cover bg-center rounded-t-lg h-[16.8rem]"
|
||||
style="background-image: url('{{ asset($this->imagen) }}');">
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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-contain object-center bg-white h-24 sm:h-36 shadow">
|
||||
class="w-full m-auto rounded-lg object-cover object-center h-[6.3rem] sm:h-[9.45rem] 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-contain object-center bg-white h-24 sm:h-44 shadow">
|
||||
class="w-full m-auto rounded-lg object-cover object-center h-[6.3rem] sm:h-[11.55rem] shadow">
|
||||
|
||||
</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 bg-contain bg-no-repeat bg-center bg-gray-50 rounded-t-lg h-64"
|
||||
<div class="w-full bg-cover bg-center rounded-t-lg h-[16.8rem]"
|
||||
style="background-image: url('{{ asset($this->imagen) }}');">
|
||||
|
||||
</div>
|
||||
@@ -1124,11 +1124,11 @@
|
||||
{{-- 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"
|
||||
<div class="cursor-pointer transition hover:scale-[1.05] w-[262px] h-[262px] sm:w-[368px] sm:h-[368px] 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-contain object-center bg-white h-full shadow"
|
||||
class="w-full m-auto rounded-lg object-cover object-center h-full shadow"
|
||||
alt="">
|
||||
</a>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user