Layout of fullApp embed mode

貢献 バグ
,
1

チームの皆さん、こんにちは！

fullApp 埋め込み機能がリリースされた際、すぐに自サイトでの導入を試みました。その際、レイアウトに関するいくつかの問題を修正する必要がありました。もしかしたら皆さんにも参考になるかもしれないと思い、ここに共有させていただきます。

  1. ページ内のテキスト幅が狭い場合（約 700px 程度）は、埋め込みの幅は適切に見えますが、コンテンツが 900px 以上ある場合、左側に空白領域が現れました。

  2. それを修正すると、今度は右側に空白領域が現れました。

  3. 調べてみると、デフォルトではセクションの高さがその上のコンテンツの高さと同じになることが分かりました。コンテンツが長い場合、埋め込みセクションの下にもう一つの空白領域が現れ、それが 2〜3 画面分にも及ぶことがありました。

  4. 上記 3 つのすべてを修正した後、同僚が Ubuntu 上の Chrome（Mac では確認できませんでした）でコメントセクションが上下に 1px 点滅していることに気づきました。これもカスタム CSS で解決できました。

最終的に、すべての問題は以下のスニペットを「Default」テーマに適用することで解決しました。

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

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

問題の再現に必要な完全な HTML も提供できますので、必要であればお知らせください。

ありがとうございます！

「いいね！」 1