Fix issue #251 et d'un probleme similaire avec les bullet points

[sarahdaher]

L'issue #251 du projet traitait 2 problèmes :

• le premier : un souci avec la mise en forme de la taille des cases, en effet, la case contenu ne s'agrandissait pas quand la case review s'agrandit, or, avec mes tests, je me suis rendue compte que ce problème a déjà été résolu
• le deuxième : un problème dans les listes ordonnées, quand on en crée, on observe que dans l'aperçu les numéros de la liste sortent de la case aperçu, donc pour remédier à ce problème, j'ai ajouter dans le fichier CSS un padding left à 1rem ce qui a réglé ce souci.

J'ai aussi remarqué que pour les ul (liste non ordonnée), il y a un souci, en effet, quand on met des tirets "-", ces derniers ne s'affichent pas dans l'aperçu or ils le sont dans le site web généré c'est pourquoi j'ai rajouté un list-style:disc aux ul et en plus d'un padding-left:1rem pour que ce soit bien dans la case aperçu et ne déborde pas.

avant ces modifications on avait :


et après ces modifications on a :

[Ynote]

Bonjour @sarahdaher ! Merci beaucoup pour ta contribution 💜 C'est vraiment super de nous proposer de fixer cette issue et désolée de te répondre aussi tardivement sur cette PR.

Pour le fix que tu proposes, je pense que l'endroit adéquat pour changer le style des listes, ce serait plutôt dans le fichier Svelte Editeur.svelte à la ligne 282 où on gère le CSS de cette page.

En effet, si on change les styles globaux du site via le fichier assets/styles/styles.css, la modification va affecter toutes les listes du site. Donc par exemple le menu ou la page de choix des plateformes Git :

Est-ce que ce serait ok pour toi de déplacer les modifications CSS dans le fichier Svelte et de repusher tes modifications ? Si ce que j'écris n'est pas clair, je peux me rendre dispo pour qu'on le fasse ensemble.

[sarahdaher]

Bonjour, merci pour votre retour, c'est très clair, je vais m'en occuper et repush après

[sarahdaher]

Le problème, c’est que les styles définis dans assets/styles/styles.css affectent l’ensemble du site. Du coup, les modifications que je fais dans Editeur.svelte (par exemple à la ligne 282 comme mentionné) ne changent pas le comportement global du site.
Ce que j'ai essayé de faire c'est de rajouter à la fin:

:global(.markdown-preview ul) {
  list-style-type: disc !important;
  padding-left: 1rem !important;
}

:global(.markdown-preview ol) {
  list-style-type: decimal !important;
  padding-left: 1rem !important;
}

:global(.markdown-preview li) {
  margin-bottom: 0.5rem !important;
}

et à la ligne 241

- <div>{@html preview}</div>
+ <div class="markdown-preview">{@html preview}</div>

Il me semble que ces changements donnent bien le bon comportement.

[Ynote]

@sarahdaher Merci beaucoup d'avoir trouvé cette astuce ! Effectivement,on tente d'appliquer un style sur de HTML qui n'est pas dans le markup de l'éditeur. J'avais complètement oublié que Svelte retire/nettoie le CSS sur les éléments qu'il ne trouve pas dans le composant.

Je pense que c'est bien comme proposition d'utiliser le :global pour notre cas présent. Ça a du sens de le laisser dans le fichier de l'éditeur (comme ça concerne l'éditeur) et ça me semble ok d'utiliser le :global vu qu'on utilise une variable preview générée qui contient du HTML qu'on maîtrise.

Cette PR est validée pour moi :) On s'occupe de merger. Merci beaucoup pour votre contribution 💜

[maiwann]

Merci pour cette contribution !! 🙏 🎉