IONIC - 3.8 Réalisation d'une to do list (4)

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Maintenant que nous avons fini la mise en forme, passons à notre fond avec notre feuille de style “home.page.scss”. Tout d’abord dans le ion-content je vais modifier le “background-color” donc je vais aller mettre une couleur blanche un peu cassée avec cette référence «#f9f9f9» ce qui va nous donner un blanc assez neutre. Par la suite, je vais aller prendre la class “tasks”, et je vais aller insérer un padding assez léger de 10 pixel, je vais également changer le “background-color” et je fais mettre du blanc avec la référence « #ffffff»neutre pour obtenir de la luminosité. Dans la class “task-title” je vais définir un “margin” et un “padding” à 0 qui auront tout deux la valeur nulle comme ceci, voilà comme ceci, pour faire un display inline-block, ce qui va permettre de créer aussi un peu plus de volume dans notre forme, et je vais ajouter un” margin-left” à 14 pixel, comme ça on aura un petit décallage de la gauche vers la droite, je vais également mettre une police avec « font-weight» donc en bold ce qui me permettra d’avoir un peu de gras comme ceci, et donc « font-size» aussi où je vais mettre une valeur à 15 donc un taille de caractère et avec une couleur de police un peu bleu électrique grâce à cette référence #3880ff, après c’es bien évidemment en fonction de vos préférences ce n’est pas obligatoire de faire comme moi, bien au contraire c’est de la personnalisation. Pour la class “task-date”, je vais aussi mettre un “margin” et un “padding” null, les caractères en gras avec le « font-weight» en bold et une taille de police à 11 pixels avec « font-site», c’est suffisant. Je vais insérer un “margin-top” celui-ci sera un peu plus conséquent de 28 pixels. Parfait. Et pour la class “empty”, je vais aussi insérer un “padding” à 10 pixels, 10px, je vais mettre un “text-align” center, ça c’est pour bien centrer le texte, je vais également insérer un “margin-top” donc avec une valeur égale à 50 pixels et une couleur de caractère en noir, du basique. Et voila concernant ma personnalisation, on va regarder le résultat, et c’est nettement mieux qu’au départ avec le fond blanc pour les taches on distingue bien les différences. Je vais insérer une tache “manger un fruit”, et voilà la tâche s’affiche comme ceci, je suis rester sur du basique mais vous pouvez prendre des couleurs plus vives en fonction de vos gouts personnels. Et voilà c’est terminé concernant ces vidéos de projet de to-do list, on se retrouve pour une prochaine vidéo, je vous retrouve dans une prochaine vidéo ou je vous conseille de réviser un peu, on va faire un petit quizz. A bientôt !