Diseño del modo de incrustación fullApp

Contribuir Error
,
1

¡Hola equipo!

Cuando salió el embed fullApp, intenté rápidamente adoptarlo en mi sitio y tuve que corregir algunos aspectos del diseño. Pensé que podría compartirlos aquí; quizás los encuentren interesantes:

  1. cuando el texto en la página es lo suficientemente estrecho (alrededor de 700 px), el ancho del embed parecía correcto, pero con contenido de unos 900 px o más, aparecía un área en blanco a la izquierda,

  2. cuando corregí eso, apareció otro área en blanco a la derecha,

  3. resulta que, por defecto, la altura de la sección es igual a la altura del contenido que hay encima. Con contenido más largo, aparece otro área en blanco debajo de la sección del embed, que puede medir de 2 a 3 pantallas de altura,

  4. después de corregir los tres problemas anteriores, un colega observó que la sección de comentarios parpadea 1 px hacia arriba/abajo en Ubuntu con Chrome (no es observable en Mac); otro CSS personalizado solucionó el problema.

Finalmente, todos los problemas se resolvieron con el siguiente fragmento:

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

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

… aplicado al tema Predeterminado.

Estaré encantado de proporcionar el HTML completo para reproducir el problema.

¡Gracias!

1 me gusta