homelab_automation/documentation/MOBILE_RESPONSIVE_GUIDE.md

Guide de Responsive Mobile - Homelab Automation Dashboard

Résumé des Modifications

Ce document détaille les modifications apportées pour rendre l'application Homelab Automation Dashboard entièrement responsive et optimisée pour les appareils mobiles.

---

1. Navigation Mobile

Menu Hamburger

• Breakpoint: md: (768px)
• Composants ajoutés:
  • #mobile-nav-overlay - Overlay semi-transparent avec blur
  • #mobile-nav-sidebar - Sidebar glissante depuis la gauche
  • #mobile-menu-btn - Bouton hamburger animé

Fonctionnalités

• Animation du bouton hamburger (transformation en X)
• Fermeture par swipe vers la gauche
• Fermeture par touche Escape
• Fermeture automatique au redimensionnement vers desktop
• Liens de navigation avec icônes
• Toggle de thème intégré

Classes CSS

.mobile-menu-btn
.mobile-nav-overlay
.mobile-nav-sidebar
.mobile-nav-links
.desktop-nav-links

---

2. Breakpoints Utilisés

Breakpoint	Taille	Usage
Base	< 640px	Mobile (téléphones)
sm:	≥ 640px	Petits écrans (grands téléphones)
md:	≥ 768px	Tablettes
lg:	≥ 1024px	Desktop
xl:	≥ 1280px	Grands écrans

---

3. Touch Targets

Tous les éléments interactifs respectent la taille minimale de 44x44px :

.touch-target {
    min-width: 44px;
    min-height: 44px;
}

Éléments concernés

• Boutons de navigation
• Filtres de tâches/schedules
• Boutons d'action (kebab menu)
• Éléments de dropdown
• Boutons de formulaire

---

4. Adaptations par Section

Dashboard

• Hero: Titre réduit de text-5xl à text-3xl sur mobile
• Métriques: Grille 2x2 au lieu de 4 colonnes
• Actions Rapides: Grille 2x2 avec labels courts
• Boutons: Empilés verticalement sur mobile

Hosts

• Header: Layout en colonne sur mobile
• Boutons: Labels condensés ("Ajouter" au lieu de "Ajouter Host")
• Dropdown groupes: Padding augmenté pour touch

Playbooks

• Recherche: Pleine largeur sur mobile
• Filtres catégories: Scroll horizontal avec masquage scrollbar
• Bouton nouveau: Texte condensé sur mobile

Tasks

• Filtres status: Scroll horizontal
• Calendrier date: Adapté à la largeur de l'écran
• Cartes tâches: Layout empilé

Schedules

• Stats: Grille 2x2 sur mobile
• Filtres: Empilés avec recherche pleine largeur
• Calendrier: Cellules réduites

Logs

• Boutons: Icônes seules sur mobile
• Container: Hauteur max réduite (400px vs 600px)

Aide

• Table des matières: Masquée sur mobile/tablette
• Contenu: Pleine largeur

---

5. Modales Mobile

Comportement

• Plein écran sur mobile (< 640px)
• Scroll interne avec prevention du scroll body
• Bouton de fermeture fixe en haut à droite

@media (max-width: 640px) {
    #modal .glass-card {
        min-height: 100vh;
        max-height: 100vh;
        width: 100%;
        border-radius: 0;
    }
}

---

6. Animations Optimisées

Désactivation sur Mobile

• Animation float désactivée
• Hover transforms supprimés
• Transitions réduites à opacity seulement

Respect de prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

---

7. Interactions Tactiles

Swipe Gestures

• Swipe droite (bord gauche): Ouvre la navigation
• Swipe gauche (nav ouverte): Ferme la navigation
• Seuil: 80px minimum

Kebab Menu

• Visible uniquement sur mobile (< 640px)
• Remplace les boutons d'action inline
• Fermeture au clic extérieur

function toggleKebabMenu(element, event) {
    // Toggle menu dropdown
}

---

8. Utilitaires CSS Ajoutés

/* Masquer scrollbar */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Safe area pour iPhone X+ */
.safe-area-bottom {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Touch target minimum */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

---

9. Support Orientation Paysage

@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding-top: 60px;
        padding-bottom: 20px;
    }
}

---

10. Thème Clair Mobile

Tous les composants mobiles supportent le thème clair :

• Navigation sidebar
• Action bar
• Kebab menus
• Dropdowns

---

Guide d'Implémentation Future

Pour ajouter un nouveau composant responsive :

1. Commencer par le mobile (mobile-first)
2. Utiliser les classes Tailwind sm:, md:, lg:
3. Respecter les touch targets (min 44x44px)
4. Tester sur plusieurs appareils :
   • iPhone SE (375px)
   • iPhone 14 Pro (393px)
   • iPad (768px)
   • Desktop (1024px+)

Pattern de bouton responsive :

<button class="btn-primary flex-1 sm:flex-none text-sm touch-target">
    <i class="fas fa-icon mr-1 sm:mr-2"></i>
    <span class="hidden sm:inline">Texte complet</span>
    <span class="sm:hidden">Court</span>
</button>

Pattern de grille responsive :

<div class="grid grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4">
    <!-- Items -->
</div>

Pattern de layout empilé :

<div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
    <!-- Items -->
</div>

---

Tests Recommandés

1. Chrome DevTools - Device Mode
2. Safari - Responsive Design Mode
3. BrowserStack - Appareils réels
4. Lighthouse - Performance mobile

Checklist de validation :

• Navigation mobile fonctionne
• Touch targets ≥ 44px
• Pas de scroll horizontal non voulu
• Textes lisibles (min 14px)
• Boutons accessibles
• Modales plein écran
• Thème clair/sombre fonctionne
• Animations fluides
• Safe area respectée (notch)

---

Dernière mise à jour: Décembre 2025