Rehace la maquetación móvil de la página de precios
Las filas del catálogo, la configuración general y el formulario de alta no estaban pensados para móvil (input de precio descolgado, etiquetas que desalineaban la cuadrícula, campos sueltos). Ahora las filas apilan nombre + metadatos + controles de forma limpia en móvil y mantienen la fila única en escritorio; la cuadrícula usa etiquetas legibles y alinea los inputs; el alta es una cuadrícula de 2 columnas en móvil. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Carlos Narro
@@ -82,26 +82,33 @@ export default async function PreciosPage() {
|
||||
{/* Config general */}
|
||||
<section className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h2 className="font-bold text-black mb-4">Configuración general</h2>
|
||||
<form action={actualizarConfig} className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<form action={actualizarConfig} className="grid grid-cols-2 md:grid-cols-5 gap-3 items-end">
|
||||
<label className="text-sm">
|
||||
<span className="block text-gray-500 mb-1">Altura techo (m)</span>
|
||||
<span className="block text-xs text-gray-500 mb-1">Altura techo (m)</span>
|
||||
<input
|
||||
name="alturaTechoDefault"
|
||||
type="number"
|
||||
step="0.1"
|
||||
defaultValue={config.alturaTechoDefault}
|
||||
className="w-full border border-gray-300 rounded-lg px-2 py-1"
|
||||
className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
|
||||
/>
|
||||
</label>
|
||||
{(['demolicion', 'fontaneria', 'electricidad', 'mano_de_obra'] as const).map((k) => (
|
||||
{(
|
||||
[
|
||||
['demolicion', 'Demolición'],
|
||||
['fontaneria', 'Fontanería'],
|
||||
['electricidad', 'Electricidad'],
|
||||
['mano_de_obra', 'Mano de obra'],
|
||||
] as const
|
||||
).map(([k, etiqueta]) => (
|
||||
<label key={k} className="text-sm">
|
||||
<span className="block text-gray-500 mb-1">M.O. {k} (€/m²)</span>
|
||||
<span className="block text-xs text-gray-500 mb-1">{etiqueta} (€/m²)</span>
|
||||
<input
|
||||
name={`mo_${k}`}
|
||||
type="number"
|
||||
step="0.01"
|
||||
defaultValue={(config.manoObra[k] ?? 0) / 100}
|
||||
className="w-full border border-gray-300 rounded-lg px-2 py-1"
|
||||
className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
@@ -120,53 +127,94 @@ export default async function PreciosPage() {
|
||||
<div className="space-y-2">
|
||||
{items.length === 0 && <p className="text-sm text-gray-400">Sin materiales.</p>}
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm border-b border-gray-100 pb-2">
|
||||
<span className="w-full sm:w-48 font-medium text-black">{item.nombre}</span>
|
||||
<span className="w-20 text-gray-500 capitalize">{item.calidad}</span>
|
||||
<span className="w-12 text-gray-400">{item.unidad}</span>
|
||||
{item.esDefault && (
|
||||
<span className="text-xs bg-green-100 text-green-700 rounded px-1.5 py-0.5">default</span>
|
||||
)}
|
||||
<form action={actualizarPrecio} className="flex items-center gap-2 ml-auto">
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<input
|
||||
name="precioEuros"
|
||||
type="number"
|
||||
step="0.01"
|
||||
defaultValue={item.precioUnit / 100}
|
||||
className="w-20 border border-gray-300 rounded-lg px-2 py-1 text-right"
|
||||
/>
|
||||
<span className="text-gray-400">€</span>
|
||||
<button className="text-xs text-blue-600 hover:underline">Guardar</button>
|
||||
</form>
|
||||
<form action={borrarMaterial}>
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<button className="text-xs text-red-500 hover:underline">Borrar</button>
|
||||
</form>
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex flex-col gap-2 border-b border-gray-100 pb-3 text-sm sm:flex-row sm:items-center sm:gap-3 sm:pb-2"
|
||||
>
|
||||
<div className="min-w-0 sm:flex-1">
|
||||
<div className="font-medium text-black">{item.nombre}</div>
|
||||
<div className="mt-0.5 flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="capitalize">{item.calidad}</span>
|
||||
<span className="text-gray-300">·</span>
|
||||
<span>{item.unidad}</span>
|
||||
{item.esDefault && (
|
||||
<span className="bg-green-100 text-green-700 rounded px-1.5 py-0.5">default</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<form action={actualizarPrecio} className="flex items-center gap-2">
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<div className="relative">
|
||||
<input
|
||||
name="precioEuros"
|
||||
type="number"
|
||||
step="0.01"
|
||||
defaultValue={item.precioUnit / 100}
|
||||
className="w-28 border border-gray-300 rounded-lg pl-3 pr-7 py-1.5 text-right"
|
||||
aria-label={`Precio de ${item.nombre}`}
|
||||
/>
|
||||
<span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
€
|
||||
</span>
|
||||
</div>
|
||||
<button className="text-xs font-medium text-blue-600 hover:underline">Guardar</button>
|
||||
</form>
|
||||
<form action={borrarMaterial}>
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<button className="text-xs text-red-500 hover:underline">Borrar</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form action={crearMaterial} className="mt-4 flex flex-wrap items-end gap-2 text-sm">
|
||||
<form
|
||||
action={crearMaterial}
|
||||
className="mt-5 grid grid-cols-2 gap-2 border-t border-gray-100 pt-4 text-sm sm:flex sm:flex-wrap sm:items-end sm:border-t-0 sm:pt-0"
|
||||
>
|
||||
<input type="hidden" name="categoria" value={categoria} />
|
||||
<input name="nombre" placeholder="Nombre" required className="border border-gray-300 rounded-lg px-2 py-1" />
|
||||
<select name="calidad" className="border border-gray-300 rounded-lg px-2 py-1">
|
||||
<input
|
||||
name="nombre"
|
||||
placeholder="Nombre"
|
||||
required
|
||||
className="col-span-2 border border-gray-300 rounded-lg px-2 py-1.5 sm:col-auto"
|
||||
/>
|
||||
<select name="calidad" className="border border-gray-300 rounded-lg px-2 py-1.5">
|
||||
<option value="basica">Básica</option>
|
||||
<option value="media">Media</option>
|
||||
<option value="premium">Premium</option>
|
||||
</select>
|
||||
<input name="precioEuros" type="number" step="0.01" placeholder="€" required className="w-24 border border-gray-300 rounded-lg px-2 py-1" />
|
||||
<select name="unidad" className="border border-gray-300 rounded-lg px-2 py-1">
|
||||
<input
|
||||
name="precioEuros"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Precio €"
|
||||
required
|
||||
className="border border-gray-300 rounded-lg px-2 py-1.5 sm:w-24"
|
||||
/>
|
||||
<select name="unidad" className="border border-gray-300 rounded-lg px-2 py-1.5">
|
||||
<option value="m2">m²</option>
|
||||
<option value="ml">ml</option>
|
||||
<option value="ud">ud</option>
|
||||
</select>
|
||||
<input name="descriptorRender" placeholder="Descriptor render" className="flex-1 min-w-40 border border-gray-300 rounded-lg px-2 py-1" />
|
||||
<input name="sku" placeholder="SKU" required className="w-28 border border-gray-300 rounded-lg px-2 py-1" />
|
||||
<label className="flex items-center gap-1 text-gray-500">
|
||||
<input type="checkbox" name="esDefault" /> default
|
||||
<input
|
||||
name="sku"
|
||||
placeholder="SKU"
|
||||
required
|
||||
className="border border-gray-300 rounded-lg px-2 py-1.5 sm:w-28"
|
||||
/>
|
||||
<input
|
||||
name="descriptorRender"
|
||||
placeholder="Descriptor render (opcional)"
|
||||
className="col-span-2 border border-gray-300 rounded-lg px-2 py-1.5 sm:col-auto sm:flex-1 sm:min-w-40"
|
||||
/>
|
||||
<label className="col-span-2 flex items-center gap-2 text-gray-500 sm:col-auto">
|
||||
<input type="checkbox" name="esDefault" /> Marcar como default
|
||||
</label>
|
||||
<button className="bg-black text-white rounded-lg px-3 py-1 font-medium">Añadir</button>
|
||||
<button className="col-span-2 bg-black text-white rounded-lg px-3 py-2 font-medium sm:col-auto sm:py-1.5">
|
||||
Añadir
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user