planetazuzu 0014c17873 Actualizar herramientas y contenidos

2026-01-19 09:10:16 +01:00

6.9 KiB

Raw Blame History

✅ FASE 3: Layout Desktop (2 Columnas) - IMPLEMENTADA

Fecha: 2026-01-15
Estado: ✅ COMPLETADA (Parcial - RCP.tsx como ejemplo)
Objetivo: Introducir layout de 2 columnas en desktop sin romper móvil

📋 CAMBIOS IMPLEMENTADOS

1. Contenedor Principal Ampliado (App.tsx)

Archivo: src/App.tsx
Línea: 98
Cambio aplicado:

// ANTES:
<div className="container max-w-2xl md:max-w-3xl lg:max-w-4xl py-4">

// DESPUÉS:
<div className="container max-w-2xl md:max-w-3xl lg:max-w-7xl py-4">

Anchos resultantes:

Móvil (≤767px): max-w-2xl = 672px (sin cambios)
Tablet (≥768px): md:max-w-3xl = 768px (sin cambios)
Desktop (≥1024px): lg:max-w-7xl = 1280px (antes 896px, +384px)

Problema resuelto:

✅ Contenedor más ancho en desktop permite layouts de 2 columnas
✅ Mejor aprovechamiento del espacio horizontal

Por qué no rompe móvil:

Las clases md: y lg: solo aplican en esos breakpoints
En móvil/tablet, se mantienen los anchos anteriores

2. Layout de 2 Columnas en RCP.tsx (Ejemplo)

Archivo: src/pages/RCP.tsx
Líneas: 129, 444-500
Cambios aplicados:

2.1. Grid de 2 Columnas en Desktop

// ANTES:
<div className="space-y-6">

// DESPUÉS:
<div className="space-y-6 lg:grid lg:grid-cols-[1fr_280px] lg:gap-6 lg:items-start">

Estructura resultante:

Móvil/Tablet (≤1023px): space-y-6 = layout vertical (sin cambios)
Desktop (≥1024px): lg:grid lg:grid-cols-[1fr_280px] = 2 columnas (principal + sidebar)

2.2. Columna Principal

<div className="space-y-6">
  {/* SVB */}
  {/* SVA */}
</div>

Contiene todo el contenido del protocolo
Sin cambios en móvil/tablet

2.3. Sidebar Desktop (Nueva)

<div className="hidden lg:block space-y-4 lg:sticky lg:top-20">
  {/* Enlaces relacionados */}
  {/* Guías y Manual */}
</div>

Características:

hidden lg:block = Solo visible en desktop (≥1024px)
lg:sticky lg:top-20 = Sidebar sticky que sigue al hacer scroll
Contiene información relacionada (protocolos, guías, manual)

2.4. Enlaces Relacionados - Móvil/Tablet

<div className="lg:hidden bg-muted/50 border border-border rounded-xl p-4">
  {/* Enlaces relacionados */}
</div>

Mantiene los enlaces relacionados visibles en móvil/tablet
lg:hidden = Oculto en desktop (donde está en la sidebar)

2.5. Enlaces Guías/Manual - Ocultos en Desktop

{/* Puentes Formativos - Móvil/Tablet */}
<div className="flex flex-col sm:flex-row gap-2 pt-2 border-t border-border lg:hidden">
  {/* Enlaces guías/manual */}
</div>

Los enlaces de guías/manual se ocultan en desktop (están en la sidebar)
lg:hidden = Solo visible en móvil/tablet

📊 IMPACTO

Problemas Resueltos

Problema	Estado	Impacto
Layout de una sola columna en desktop	✅ Mejorado	Layout de 2 columnas en desktop
Falta de navegación contextual	✅ Resuelto	Sidebar con información relacionada
Información relacionada dispersa	✅ Mejorado	Consolidada en sidebar sticky

Mejoras de UX

✅ Mejor aprovechamiento del espacio en desktop
✅ Navegación contextual siempre visible (sidebar sticky)
✅ Información relacionada fácilmente accesible
✅ Experiencia móvil intacta (cero cambios en ≤1023px)

🔍 VERIFICACIÓN

Build

npm run build

✅ Sin errores - Compilación exitosa

Móvil (≤767px)

✅ Layout: Vertical (sin cambios)
✅ Enlaces relacionados: Visibles al final del contenido
✅ Guías/Manual: Visibles dentro de cada sección
✅ Comportamiento idéntico al original

Tablet (768px - 1023px)

✅ Layout: Vertical (sin cambios)
✅ Enlaces relacionados: Visibles al final del contenido
✅ Guías/Manual: Visibles dentro de cada sección
✅ Comportamiento idéntico al original

Desktop (≥1024px)

✅ Layout: 2 columnas (principal + sidebar)
✅ Sidebar: Sticky, siempre visible al hacer scroll
✅ Enlaces relacionados: En sidebar
✅ Guías/Manual: En sidebar
✅ Contenido principal: Más espacio para leer

📝 NOTAS TÉCNICAS

Breakpoints Utilizados

lg: = 1024px (desktop)

Clases Tailwind Utilizadas

lg:max-w-7xl = 1280px (contenedor desktop)
lg:grid = Grid solo en desktop
lg:grid-cols-[1fr_280px] = 2 columnas (flexible + 280px fijo)
lg:gap-6 = Espacio entre columnas
lg:items-start = Alineación superior
lg:sticky lg:top-20 = Sidebar sticky (20 = altura header)
lg:hidden = Oculto en desktop
hidden lg:block = Solo visible en desktop

Estrategia

Progressive Enhancement: Solo añadir en desktop (lg:)
Mobile-First: Móvil/tablet sin cambios, mejoras solo en desktop
Reversible: Cambios solo en clases CSS, fácil de revertir
Sticky Sidebar: Sidebar sigue al hacer scroll para mejor accesibilidad

🎯 PÁGINAS MODIFICADAS

✅ RCP.tsx (Completado)

Layout de 2 columnas en desktop
Sidebar con información relacionada
Enlaces relacionados movidos a sidebar

⏸️ Otras Páginas (Pendientes)

Ictus.tsx - Similar estructura, puede aplicar mismo patrón
ViaAerea.tsx - Similar estructura, puede aplicar mismo patrón
Shock.tsx - Similar estructura, puede aplicar mismo patrón
Otras páginas con contenido relacionado

Nota: RCP.tsx sirve como ejemplo/template para aplicar el mismo patrón en otras páginas.

🚀 PRÓXIMOS PASOS

FASE 4: Header Desktop

Ampliar header en desktop
Añadir breadcrumbs o navegación contextual
Mejorar jerarquía visual

Extensión FASE 3 (Opcional):

Aplicar mismo patrón a otras páginas (Ictus, ViaAerea, Shock, etc.)
Crear componente reutilizable si se repite mucho (opcional)

💡 OBSERVACIONES

Patrón Aplicado

El patrón usado en RCP.tsx puede replicarse en otras páginas:

Envolver contenido en grid de 2 columnas (solo desktop):

<div className="space-y-6 lg:grid lg:grid-cols-[1fr_280px] lg:gap-6 lg:items-start">

Columna principal:

<div className="space-y-6">
  {/* Contenido principal */}
</div>

Sidebar desktop:

<div className="hidden lg:block space-y-4 lg:sticky lg:top-20">
  {/* Información relacionada */}
</div>

Mantener contenido relacionado en móvil:

<div className="lg:hidden">
  {/* Mismo contenido, visible solo en móvil/tablet */}
</div>

Ventajas del Patrón

✅ No rompe móvil - Todo el contenido sigue visible
✅ Progressive enhancement - Solo mejora en desktop
✅ Reversible - Fácil de revertir si es necesario
✅ Consistente - Mismo patrón aplicable a otras páginas

Última actualización: 2026-01-15
Estado: ✅ FASE 3 COMPLETADA (RCP.tsx como ejemplo) - Lista para FASE 4

6.9 KiB Raw Blame History