Responsive Mobile
Avant de commencer la tâche principale, j’ai dû faire quelques petites modifications côté front-end. Même si elles étaient simples, elles m’ont permis de mieux comprendre la structure du projet et de me repérer dans l’arborescence du code.
La première modification consistait à déplacer la colonne "Commercial" en troisième position dans la page Dossier Résa pour ce faire je me suis rendu dans le composant QuoteResaList. Ensuite, j’ai changé l’affichage de la durée dans le titre du devis, en remplaçant "m" par "min" pour que ce soit plus clair dans le composant QuoteTravelTitle.
Bref aperçu de l'arborescence du projet :
Pour mieux me repérer dans l’arborescence du projet, j’ai appris qu’il était possible d’accéder rapidement à la définition d’une fonction, d’un composant ou d’un élément en faisant Ctrl + clic dessus. Cela m’a été très utile pour comprendre où et comment les éléments étaient définis.
Afin de mieux visualiser la structure de la page, j’ai également utilisé des commentaires dans le code pour séparer les différentes parties comme les containers ou les box.
Enfin, pour faire des recherches ciblées dans le projet, j’ai utilisé la fonction de recherche (la loupe) dans VS Code, ce qui m’a fait gagner du temps.
Ces premiers ajustements m’ont permis de prendre en main le projet progressivement, avant de passer à des développements plus complexes.
Objectif & besoins
Pour cette tâche, la cliente souhaitait que l’application soit adaptée aux formats mobiles, car elle avait été initialement conçue uniquement pour un affichage sur ordinateur. L’objectif était de lui permettre d’accéder facilement à l’application depuis son téléphone, notamment en cas d’urgence ou lorsqu’elle n’a pas son ordinateur à disposition. J’ai donc réajusté certains éléments qui ne s’adaptaient pas automatiquement à la taille des petits écrans, afin de garantir un affichage responsive et une utilisation fluide sur mobile.
Barre de recherche
Rendre le header responsive. Sur mobile, deux composants devaient être masqués, et seule
la barre de recherche devait rester visible. J’ai utilisé le composant
isMobile combiné à des conditions et à quelques ajustements CSS
pour y parvenir.
Avant modification :
Après modification :
Code
Pour adapter ce composant au responsive mobile, un hook personnalisé useBreakpoints() a été utilisé pour détecter si l’utilisateur est sur un appareil mobile (isMobile). FolderCounter et UserTimetracker ne sont pas affichés sur mobile : Ces deux composants sont rendus uniquement si isMobile est false, c’est-à-dire sur les écrans desktop.
En ce qui concerne la barre de recherche quelques modifications css on été rajoutés afin de réadapter le visuel en mobile
Résultats après recherche
Responsive à faire au niveau de l'affichage des résultats d'une recherche.
- Réorganiser les résultats en quatre colonnes les unes en dessous des autres : clients, devis, factures et dossiers.
- Ajouter un compteur de résultats pour chaque catégorie en version mobile et desktop.
- Intégrer une icône œil (ouvert/fermé) pour contrôler l’affichage des sections.
- Masquer le contenu par défaut en version mobile.
Optimisation de l’affichage mobile
Pour la version mobile de cette page, j’ai structuré le travail en plusieurs étapes :
- Afficher les blocs les uns en dessous des autres.
- Ajouter une icône œil ouvert/fermé pour afficher ou masquer chaque bloc.
- Afficher le nombre de résultats pour chaque bloc.
- Cacher par défaut le contenu sur mobile pour gagner en lisibilité.
Avant modification :
Après modification :
Code
Dans cette tâche, j’ai modifié le composant InputSearchSection en y ajoutant une nouvelle prop appelée nb_results. Cela permet de transmettre dynamiquement un nombre de résultats à chaque composant, pour pouvoir l’afficher à côté du titre de chaque section.
J’ai également importé une icône de visibilité, à laquelle j’ai appliqué une condition ternaire afin de contrôler son affichage selon le type d’écran (mobile ou desktop).
Enfin, j’ai ajouté un state avec useState pour gérer l’affichage du contenu. Ce state change lorsqu’on clique sur l’ensemble de la section (y compris sur l’icône), ce qui permet d’afficher ou de masquer les résultats associés.
J’ai ensuite modifié le CSS de la box principale qui regroupait toutes les sections, afin de les afficher correctement selon la taille de l’écran. Pour cela, j’ai utilisé une condition ternaire permettant d’adapter le visuel à l’affichage mobile.
Enfin, j’ai transmis la prop nb_results au composant InputSearchSection en lui précisant sa valeur, pour qu’il puisse l’utiliser dans l’affichage.
Un autre ajout a été nécessaire par la suite : ce mode d’affichage devait être réservé uniquement aux customers (clients).
Il a donc fallu ajouter une condition supplémentaire dans le code afin d’afficher le contenu adapté uniquement pour ce type d’utilisateur.
Responsive Mobile - Page Dossiers
Dans cette tâche, j’ai dû réorganiser l’affichage du statut du dossier afin qu’il s’adapte correctement en version mobile. J’ai également ajusté plusieurs éléments de la page qui débordaient ou ne revenaient pas à la ligne comme prévu sur les petits écrans.
La modification la plus longue, mais aussi la plus intéressante à réaliser, a été celle de la frise, qui a nécessité un travail plus approfondi pour assurer un rendu clair et lisible quel que soit le format d’écran.
Avant modification :
Après modification :
Code
Ici je gère la mise à jour du statut au click sur la frise :
Par la suite je gère l'affichage de ma frise en fonction de la taille de l'écran (isMobile === true alors j'affiche) et je modifie le css en conséquence pour obtenir le résultat final.
