From 43ba19a6922eaf5daba4375b505799bf3f05dc15 Mon Sep 17 00:00:00 2001 From: Simon Date: Fri, 17 Nov 2023 11:42:09 +0100 Subject: [PATCH] :sparkles: Add header explanations and solution link --- docs/src/figma/exercice/app-1.md | 11 +++++++++++ docs/src/figma/exercice/app-5.md | 8 ++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/docs/src/figma/exercice/app-1.md b/docs/src/figma/exercice/app-1.md index a9142e1..96d6064 100644 --- 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 ;) ) + ::: \ No newline at end of file diff --git a/docs/src/figma/exercice/app-5.md b/docs/src/figma/exercice/app-5.md index f2e6016..5f57059 100644 --- 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. \ No newline at end of file +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). \ No newline at end of file