✨ Add header explanations and solution link

worldline · Nov 17, 2023 · 43ba19a · 43ba19a
1 parent e86d972
commit 43ba19a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/docs/src/figma/exercice/app-1.md b/docs/src/figma/exercice/app-1.md
@@ -20,4 +20,15 @@ En recopiant un design depuis une capture d'écran, le résultat ne peut évidem
 
 Vous pouvez par exemple utiliser des polices et icônes différentes, ce n'est pas cela qui est important.
 
+:::
+
+::: tip Correction
+
+[Un exemple de solution est disponible ici](https://www.figma.com/file/uUvHGlJITQbQQnn4zMxJku/Blablacar?type=design&node-id=0%3A1&mode=design&t=ebOpGpn3qxmYY7BI-1).
+
+Essayez d'abord par vous même avant de regarder la correction !
+
+
+( Il y a plusieurs pages au Figma ;) )
+
 :::
diff --git a/docs/src/figma/exercice/app-5.md b/docs/src/figma/exercice/app-5.md
@@ -4,6 +4,10 @@
 ![](../../assets/img/figma/exercice/app/header.png)
 :::
 
-Ce header n'est pas le plus intéressant à réaliser, je vous conseille plutôt de travailler sur d'autres vues si vous voulez continuer à vous exercer.
+La barre de recherche peut être créé en imbriquant des autolayout horizontaux.
 
-Si malgré tout vous souhaitez finir la vue, la difficulté ici est de créer la barre de recherche. Cela va être plus compliqué de séparer la barre en composants comme on a pu le faire précédemment. La meilleure solution est peut être de tout réaliser avec des imbrications d'auto-layout horizontaux.
+J'ai fait le choix de donner aux cases de destination départ et arrivée une largeur dynamique et de donner aux autres cases une largeur fixe.
+
+Une fois votre header créé, vous pouvez assembler votre écran !
+
+Mettez-le dans un autolayout vertical pour pouvoir tester son comportement responsive: le contenu de la page et de la barre de recherche doivent avoir une largeur fixe alors que le haut du header prend toute la largeur de l'écran (nous ne testerons pas ici le cas d'un appareil mobile).