Layout des fullApp Embed-Modus

Beitragen Fehler
,
1

Hallo Team!

Als der fullApp-Embed veröffentlicht wurde, habe ich ihn schnell auf meiner Website ausprobiert und musste einige Layout-Probleme beheben. Ich dachte, ich teile sie hier, vielleicht findet ihr sie interessant:

  1. Wenn der Text auf der Seite schmal genug ist (ca. 700 px), sah die Breite des Embeds gut aus, aber bei Inhalten von etwa 900 px oder mehr gab es einen leeren Bereich links,

  2. Als ich das behoben hatte, erschien ein weiterer leerer Bereich rechts,

  3. Es stellte sich heraus, dass die Höhe des Abschnitts standardmäßig der Höhe des Inhalts darüber entspricht. Bei längeren Inhalten entsteht unter dem Embed-Abschnitt ein weiterer leerer Bereich, der 2–3 Bildschirme lang sein kann,

  4. Nachdem ich alle drei oben genannten Probleme behoben hatte, stellte ein Kollege fest, dass der Kommentarbereich unter Ubuntu in Chrome um 1 px nach oben/unten flackert (auf einem Mac nicht beobachtbar) – eine weitere benutzerdefinierte CSS-Regel hat das Problem behoben.

Letztendlich wurden alle Probleme durch das folgende Snippet behoben:

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

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

… angewendet auf das Standard-Theme.

Gerne stelle ich den vollständigen HTML-Code zur Verfügung, um das Problem zu reproduzieren.

Vielen Dank!

1 „Gefällt mir“