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

[Don]

Olá

O estilo DiscoTOC está conectado à classe .with-topic-progress, que é adicionada a .topic-navigation se houver mais de 1 postagem no tópico. Portanto, sem uma resposta, o estilo DiscoTOC irá falhar.

Acho que o TOC também deveria estar ativo se não houver resposta em um tópico, porque não está relacionado à contagem de respostas. No desktop, funciona bem para tópicos sem resposta também.

Aqui está um tópico para teste: Customizing the topic list

Acho que isso deveria ser considerado para mudar esse comportamento.

Provavelmente não é algo novo, mas eu ainda não tinha notado. Agora começamos a usá-lo mais ativamente.

Obrigado

[JammyDodger]

Eu também acabei de me deparar com isso aqui. (iPhone/Safari) Seria ótimo se isso pudesse ser corrigido. Rolar até o final de um documento longo para chegar ao índice é um pouco complicado.

[alltiagocom (Tiago)]

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.

[Don]

Olá

Isso é ótimo, obrigado, mas acho que podemos fazer isso apenas com CSS também. Nós apenas temos que usar o mesmo CSS em .topic-navigation que foi usado em .with-topic-progress. A classe .with-topic-progress ausente está bloqueando o estilo se não houver resposta no tópico.

Algo assim deve funcionar.

CSS para celular

// Navegação de Tópico Fixo
.container.posts .topic-navigation:not(.with-topic-progress) {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
  z-index: z("timeline");
  pointer-events: none; // o wrapper pode bloquear controles móveis
  
  > * {
    pointer-events: auto; // isso desativa a regra acima para que os elementos filhos sejam interativos
  }
  
  // Adicionar Estilo do TOC
  .d-toc-wrapper {
    position: fixed;
    margin-top: 0.25em;
    height: calc(100vh - 50px - var(--header-offset));
    opacity: 0.5;
    right: -100vw;
    top: var(--header-offset);
    width: 75vw;
    max-width: 350px;
    background-color: var(--secondary);
    box-shadow: var(--shadow-dropdown);
    z-index: z("modal", "overlay");
    transition: all 0.2s ease-in-out;

    .d-toc-main {
      width: 100%;
      padding: 0.5em;
      height: 100%;

      #d-toc {
        max-height: calc(100% - 3em);
      }
    }

    &.overlay {
      right: 0;
      width: 75vw;
      opacity: 1;

      .d-toc-main #d-toc li.d-toc-item ul {
        transition: none;
      }
    }

    a.scroll-to-bottom,
    a.d-toc-close {
      display: inline-block;
      padding: 0.5em;
    }

    .d-toc-icons {
      text-align: right;
    }
  }
}

// Suporte RTL
.rtl {
  .topic-navigation .d-toc-wrapper {
    right: unset;
    left: -100vw;

    &.overlay {
      right: unset;
      left: 0;
    }
  }
}

[chapoi]

Deve ser corrigido com

UX: add missing disco toc btn