diff --git a/docs/RESPONSIVE.md b/docs/RESPONSIVE.md new file mode 100644 index 0000000..05dd051 --- /dev/null +++ b/docs/RESPONSIVE.md @@ -0,0 +1,324 @@ +# Responsive Design Documentation + +## Overview + +Karibeo está completamente optimizado para funcionar en dispositivos móviles, tablets y escritorio. Esta documentación detalla las estrategias de diseño responsivo implementadas. + +## Breakpoints + +El proyecto utiliza breakpoints estándar de Tailwind CSS: + +```typescript +const BREAKPOINTS = { + mobile: 768, // < 768px + tablet: 1024, // 768px - 1023px + desktop: 1280, // 1024px - 1279px + largeDesktop: 1280+ // >= 1280px +} +``` + +## Hooks Personalizados + +### useResponsive + +Hook para detectar el breakpoint actual: + +```typescript +import { useResponsive } from '@/hooks/useResponsive'; + +const { isMobile, isTablet, isDesktop, width } = useResponsive(); +``` + +### useOrientation + +Hook para detectar orientación del dispositivo: + +```typescript +import { useOrientation } from '@/hooks/useResponsive'; + +const orientation = useOrientation(); // 'portrait' | 'landscape' +``` + +## Frontend Responsive + +### Dashboard Layout + +- **Sidebar**: Oculto en móvil, colapsable en desktop +- **Top Navigation**: Componentes adaptados según tamaño de pantalla +- **Content Area**: Padding responsive (3 en móvil, 6 en desktop) + +```tsx +// Ejemplo de uso +
+ {/* Content adapts padding based on screen size */} +
+``` + +### Grid Layouts + +Todos los grids utilizan configuración responsive: + +```tsx +// ExploreSection +
+ {/* Cards automatically adjust */} +
+ +// PlacesSection +
+ {/* Stacks vertically on mobile, side-by-side on desktop */} +
+``` + +### Typography + +Tamaños de texto adaptados: + +```tsx +

+ {/* Smaller on mobile, larger on desktop */} +

+``` + +### Images + +Alturas responsive en tarjetas: + +```tsx +
+ {/* Image height scales with screen size */} +
+``` + +## Backend Responsive + +### Middleware API + +El archivo `src/middleware/responsiveAPI.ts` proporciona funciones para optimizar las respuestas del backend: + +#### detectDevice + +Detecta tipo de dispositivo desde User-Agent: + +```typescript +import { detectDevice } from '@/middleware/responsiveAPI'; + +const deviceType = detectDevice(userAgent, width); +// Returns: 'mobile' | 'tablet' | 'desktop' +``` + +#### optimizePayload + +Optimiza payload para dispositivos móviles: + +```typescript +import { optimizePayload } from '@/middleware/responsiveAPI'; + +const optimized = optimizePayload(data, deviceType); +// Reduces image quality, limits array sizes for mobile +``` + +#### addDeviceHeaders + +Añade headers de dispositivo a requests: + +```typescript +import { addDeviceHeaders } from '@/middleware/responsiveAPI'; + +const headers = addDeviceHeaders(); +// Adds: X-Device-Type, X-Screen-Width, X-User-Agent +``` + +#### getAdaptivePagination + +Paginación adaptativa según dispositivo: + +```typescript +import { getAdaptivePagination } from '@/middleware/responsiveAPI'; + +const { limit, offset } = getAdaptivePagination(deviceType); +// mobile: 10, tablet: 20, desktop: 50 +``` + +## Utilities + +### responsive.ts + +Funciones útiles para comportamiento responsive: + +```typescript +import { + responsiveClass, + getResponsiveValue, + isTouchDevice, + formatTextForMobile +} from '@/utils/responsive'; + +// Clases responsive +const classes = responsiveClass('base', 'mobile-class', 'tablet-class', 'desktop-class'); + +// Valores responsive +const value = getResponsiveValue(10, 20, 50, width); + +// Detectar touch +const isTouch = isTouchDevice(); + +// Formatear texto +const text = formatTextForMobile(longText, 100, isMobile); +``` + +## Mejores Prácticas + +### 1. Mobile-First + +Siempre diseñar primero para móvil: + +```tsx +// ✅ Correcto +
+ +// ❌ Incorrecto +
+``` + +### 2. Ocultar Elementos + +Usar clases de Tailwind para ocultar: + +```tsx +// Oculto en móvil +
+ +// Solo visible en móvil +
+``` + +### 3. Espaciado Responsive + +Adaptar gaps, padding y margin: + +```tsx +
+ {/* Spacing increases with screen size */} +
+``` + +### 4. Touch Targets + +Asegurar áreas táctiles suficientes en móvil (mínimo 44x44px): + +```tsx + +``` + +### 5. Overflow Handling + +Prevenir overflow horizontal: + +```tsx +
+
+ {/* Wide content scrolls horizontally */} +
+
+``` + +## Testing + +### Breakpoints de Prueba + +Probar en estos anchos mínimos: + +- **Mobile**: 320px, 375px, 414px +- **Tablet**: 768px, 834px +- **Desktop**: 1024px, 1280px, 1920px + +### Orientación + +Probar tanto portrait como landscape en móvil/tablet. + +### Touch Events + +Verificar que todos los elementos interactivos funcionen con touch. + +## Rendimiento + +### Lazy Loading + +Implementar lazy loading para imágenes: + +```tsx +{alt} +``` + +### Code Splitting + +React.lazy para componentes pesados: + +```typescript +const HeavyComponent = lazy(() => import('./HeavyComponent')); +``` + +### Responsive Images + +Usar srcset para diferentes resoluciones: + +```tsx + +``` + +## Accesibilidad + +### Viewport Meta Tag + +Ya incluido en index.html: + +```html + +``` + +### Focus States + +Asegurar estados de focus visibles: + +```tsx + +``` + +## Mantenimiento + +### Auditorías Regulares + +- Ejecutar Lighthouse para móvil y desktop +- Verificar responsive en DevTools +- Probar en dispositivos reales + +### Actualización de Breakpoints + +Si se necesitan breakpoints custom, actualizar en: + +1. `tailwind.config.ts` +2. `src/hooks/useResponsive.tsx` +3. Documentación + +## Recursos + +- [Tailwind Responsive Design](https://tailwindcss.com/docs/responsive-design) +- [MDN Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) +- [Web.dev Responsive Images](https://web.dev/responsive-images/) diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx index a6ec4b5..1e33d95 100644 --- a/src/components/DashboardLayout.tsx +++ b/src/components/DashboardLayout.tsx @@ -268,8 +268,8 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
- {/* Sidebar */} -