Le style DiscoTOC est cassé s'il n'y a pas de réponse sur mobile

UX
, ,
3

Avec mes compétences de base en codage et quelques discussions avec ChatGPT, je pense que j’ai réussi.

J’ai créé un composant personnalisé et mis ceci dans l’onglet 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;
    }
}

et ceci dans l’onglet JS

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

export default apiInitializer((api) =
> {
  api.onPageChange(() =
> {
    const observer = new MutationObserver(() =
> {
      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,
    });
  });
});

Cela semble fonctionner parfaitement, même sans réponse.
Encore une fois, je ne suis pas un expert, je suis juste un bon « poseur de questions » et après quelques échanges avec ChatGPT avec les bonnes questions et les bons défis, cela semble fonctionner.

Si un expert en JavaScript souhaite l’améliorer, qu’il partage.

1 « J'aime »