Disposition du mode d'intégration fullApp

Contribuer Bug
,
1

Bonjour à toute l’équipe !

Lorsque l’embed fullApp est sorti, j’ai rapidement essayé de l’intégrer sur mon site, et j’ai dû corriger quelques éléments de la mise en page. J’ai pensé que je pourrais les partager ici, peut-être les trouverez-vous intéressants :

  1. lorsque le texte de la page est suffisamment étroit (environ 700 px), la largeur de l’embed semblait correcte, mais avec un contenu d’environ 900 px ou plus, il y avait un espace vide à gauche,

  2. lorsque j’ai corrigé cela, un autre espace vide est apparu à droite,

  3. il s’avère que par défaut, la hauteur de la section est identique à celle du contenu qui la précède. Avec un contenu plus long, un autre espace vide apparaît sous la section d’embed, pouvant atteindre 2 à 3 hauteurs d’écran,

  4. après avoir corrigé les trois problèmes ci-dessus, un collègue a remarqué que la section des commentaires clignotait de 1 px vers le haut ou le bas sur Ubuntu avec Chrome (non observable sur Mac) — un autre CSS personnalisé a résolu le problème.

Finalement, tous les problèmes ont été résolus par l’extrait de code ci-dessous :

body.embed-mode #main-outlet-wrapper { 
  display: block !important;
}
body.embed-mode {
  --topic-body-width: 100%;
}

// hauteur
body.embed-mode .topic-post:first-child {
    display: none !important;
}
.post-stream--cloaked { min-height: 0 !important; }

… appliqué au thème par défaut.

Je serai ravi de fournir le code HTML complet pour reproduire le problème.

Merci !

1 « J'aime »