モバイルで返信がないとDiscoTOCのスタイルが崩れる

UX
, ,
3

私の基本的なコーディングスキルとChatGPTとのやり取りで、機能するようになったと思います。

カスタムコンポーネントを作成し、CSSタブに以下を追加しました。

/* CSS for Discourse component - Mobile only */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

そしてJSタブに以下を追加しました。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =
u003e {
  api.onPageChange(() =
u003e {
    const observer = new MutationObserver(() =
u003e {
      const wrapper = document.getElementById("topic-progress-wrapper");
      const tocButton = wrapper?.querySelector(".d-toc-mini button");

      if (wrapper) {
        if (tocButton) {
          wrapper.classList.add("sticky-bottom");
        } else {
          wrapper.classList.remove("sticky-bottom");
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
});

これは、返信なしでも問題なく動作しているようです。
繰り返しますが、私は専門家ではありません。私は単に「質問が上手」なだけで、適切な質問と課題をChatGPTと何度か「やり取り」した後、機能するようになったようです。

JavaScriptの専門家で改善できる方がいれば、ぜひ共有してください。

「いいね！」 1