Layout della modalità di embedding fullApp

Contribuisci Bug
,
1

Ciao team!

Quando è uscito l’embed fullApp, ho subito provato a integrarlo nel mio sito e ho dovuto sistemare alcuni aspetti del layout. Ho pensato di condividerli qui, forse potrebbero interessarvi:

  1. quando il testo nella pagina è abbastanza stretto (circa 700px), la larghezza dell’embed sembrava corretta, ma con contenuti di circa 900px o più, appariva un’area vuota a sinistra,

  2. quando ho risolto quel problema, è comparsa un’altra area vuota a destra,

  3. risulta che, di default, l’altezza della sezione è uguale all’altezza del contenuto sopra di essa. Con contenuti più lunghi, appare un’altra area vuota sotto la sezione dell’embed, che può misurare da 2 a 3 schermate,

  4. dopo aver risolto tutti e tre i problemi sopra menzionati, un collega ha notato che la sezione dei commenti sfarfallava di 1px su e giù su Ubuntu Chrome (non osservabile su Mac) — un altro CSS personalizzato ha risolto il problema.

Alla fine, tutti i problemi sono stati risolti dal frammento di codice sottostante:

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

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

… applicato al tema Predefinito.

Sarò felice di fornire l’HTML completo per riprodurre il problema.

Grazie!

1 Mi Piace