consultoria-as/FRASA-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(responsive): layout 100% width en todas las resoluciones

Browse Source 
- Eliminado max-w-[1280px] de todas las apps (mi-dia, landing, cotizador, cobranza, dashboards, alta-clientes)
- Kanban: sin restricción de ancho, columnas min-w-[220px]
- Grids: xl:grid-cols-4/5 para pantallas grandes
- CSS base: -webkit-text-size-adjust + min-h-screen
- 6 apps construidas
This commit is contained in:
Consult AS Technology
2026-09-08 08:36:53 +00:00
parent 52429c9f14
commit dc6ec786d0
22 changed files with 59 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/mi-dia/src/components/KanbanView.tsx
View File

@@ -57,15 +57,15 @@ export default function KanbanView({ leads, onCambiarEstado }: KanbanViewProps)
}
return (
<div className="flex gap-4 overflow-x-auto pb-4">
<div className="flex gap-4 overflow-x-auto scroll-smooth pb-4">
{COLUMNAS.map((col) => (
<div
key={col.id}
className={`flex min-w-[260px] flex-1 flex-col rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] dark:border-[#334155] dark:bg-[#0F172A] border-t-4 ${col.color}`}
className={`flex min-w-[220px] flex-1 flex-col rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] dark:border-[#334155] dark:bg-[#0F172A] border-t-4 ${col.color}`}
onDragOver={onDragOver}
onDrop={() => onDrop(col.id)}
>
<div className="flex items-center justify-between px-4 pt-3 pb-2">
<div className="flex items-center justify-between px-3 pt-3 pb-2 sm:px-4">
<h4 className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
{col.titulo}
</h4>
@@ -83,7 +83,7 @@ export default function KanbanView({ leads, onCambiarEstado }: KanbanViewProps)
draggable
onDragStart={() => onDragStart(lead.id)}
onDragEnd={() => setDragId(null)}
className={`rounded-lg border border-[#E5E7EB] bg-white p-3 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B] cursor-grab transition-opacity ${
className={`rounded-lg border border-[#E5E7EB] bg-white p-2.5 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B] cursor-grab transition-opacity sm:p-3 ${
dragId === lead.id ? 'opacity-50' : ''
}`}
>

5
apps/mi-dia/src/index.css
View File

@@ -24,8 +24,11 @@
}
@layer base {
html {
-webkit-text-size-adjust: 100%;
}
body {
@apply bg-[#F8FAFC] text-[#111827] antialiased;
@apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
}
*:focus-visible {

12
apps/mi-dia/src/pages/MiDiaPage.tsx
View File

@@ -828,7 +828,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
return (
<>
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
<div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between gap-4 px-4 sm:px-6">
<div className="flex h-14 items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
<div className="flex min-w-0 items-center gap-3">
<a
href="/"
@@ -881,14 +881,14 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
<BannerModoLocal />
{offline && (
<div className="mx-auto max-w-[1280px] px-4 pt-4 sm:px-6">
<div className="px-4 pt-4 sm:px-6 lg:px-8">
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
Modo offline{offlineFecha ? ` — datos de ${offlineFecha}` : ''}
</div>
</div>
)}
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
<main className={`px-4 py-6 sm:px-6 lg:px-8 ${vistaKanban && tabCrm === 'leads' ? 'w-full' : 'mx-auto max-w-[1280px]'}`}>
<div className="mb-6">
<h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">{nombreVendedor}</h1>
<p className="mt-1 text-sm text-[#64748B] dark:text-[#94A3B8]">{formatoFechaCorta(hoy)}</p>
@@ -937,8 +937,8 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
<KpiCard titulo="Leads nuevos esta semana" valor={resumen.conteos.leadsNuevosSemana} />
</section>
<div className="mt-6 flex flex-col gap-6 md:grid md:grid-cols-2 md:gap-6 lg:grid-cols-3">
<div className="order-2 flex flex-col gap-6 md:order-1 md:col-span-2 lg:col-span-2">
<div className={`mt-6 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? '' : 'md:grid md:grid-cols-2 md:gap-6 lg:grid-cols-3'}`}>
<div className={`order-2 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? '' : 'md:order-1 md:col-span-2 lg:col-span-2'}`}>
<section aria-label="CRM personal">
<TabsCrm
activa={tabCrm}
@@ -1202,7 +1202,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
</section>
</div>
<aside className="order-1 flex flex-col gap-6 md:order-2 lg:sticky lg:top-20 lg:self-start">
<aside className={`order-1 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? 'hidden' : 'md:order-2 lg:sticky lg:top-20 lg:self-start'}`}>
<section aria-label="Mis actividades">
<TituloSeccion>Mis actividades</TituloSeccion>
{resumen.misActividadesHoy.length === 0 ? (