256 lines
6.9 KiB
Markdown
256 lines
6.9 KiB
Markdown
# ✅ 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:**
|
|
|
|
```tsx
|
|
// 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
|
|
|
|
```tsx
|
|
// 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
|
|
|
|
```tsx
|
|
<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)
|
|
|
|
```tsx
|
|
<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
|
|
|
|
```tsx
|
|
<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
|
|
|
|
```tsx
|
|
{/* 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
|
|
```bash
|
|
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:
|
|
|
|
1. **Envolver contenido en grid de 2 columnas (solo desktop):**
|
|
```tsx
|
|
<div className="space-y-6 lg:grid lg:grid-cols-[1fr_280px] lg:gap-6 lg:items-start">
|
|
```
|
|
|
|
2. **Columna principal:**
|
|
```tsx
|
|
<div className="space-y-6">
|
|
{/* Contenido principal */}
|
|
</div>
|
|
```
|
|
|
|
3. **Sidebar desktop:**
|
|
```tsx
|
|
<div className="hidden lg:block space-y-4 lg:sticky lg:top-20">
|
|
{/* Información relacionada */}
|
|
</div>
|
|
```
|
|
|
|
4. **Mantener contenido relacionado en móvil:**
|
|
```tsx
|
|
<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
|
|
|