O estilo DiscoTOC está quebrado se não houver resposta no celular

Experiência do Usuário
, ,
3

Com minhas habilidades básicas de codificação e alguma conversa com o ChatGPT, acho que consegui fazer funcionar.

Criei um componente personalizado e coloquei isto na aba CSS:

/* CSS para componente do Discourse - Somente mobile */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

e isto na aba 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,
    });
  });
});

Isso parece estar funcionando muito bem, mesmo sem uma resposta.
Novamente, não sou um especialista, sou apenas um bom “perguntador” e, depois de algumas idas e vindas com o ChatGPT com as perguntas e desafios certos, parece estar funcionando.

Se alguém que é especialista em JavaScript quiser melhorar, por favor, compartilhe.

1 curtida