Lo stile DiscoTOC è rotto se non ci sono risposte su mobile

[Don]

Ciao

Lo stile DiscoTOC è collegato alla classe .with-topic-progress che viene aggiunta a .topic-navigation se ci sono più di 1 post nell’argomento. Quindi, senza una risposta, lo stile DiscoTOC si romperà.

Penso che il TOC dovrebbe essere attivo anche se non ci sono risposte in un argomento perché non è correlato al numero di risposte. Sul desktop funziona bene anche per gli argomenti senza risposte.

Ecco un argomento per il test: Customizing the topic list

Penso che si dovrebbe prendere in considerazione la modifica di questo comportamento.

Probabilmente non è una novità ma non l’avevo ancora notata. Ora abbiamo iniziato a usarla più attivamente.

Grazie

[JammyDodger]

Ho appena riscontrato questo problema anche qui. (iPhone/Safari) Sarebbe fantastico se questo potesse essere risolto. Scorrere fino in fondo a un lungo documento per raggiungere il sommario è un po’ macchinoso.

[alltiagocom (Tiago)]

Con le mie basi di programmazione e qualche chiacchierata con ChatGPT, credo di essere riuscito a farlo funzionare.

Ho creato un componente personalizzato e inserito questo nella scheda CSS:

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

e questo nella scheda 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,
    });
  });
});

Questo sembra funzionare bene anche senza una risposta.
Di nuovo, non sono un esperto, sono solo un bravo “richiedente” e dopo qualche “botta e risposta” con ChatGPT con le giuste domande e sfide, sembra funzionare.

Se qualcuno esperto di JavaScript volesse migliorarlo, è pregato di condividerlo.

[Don]

Ciao

Questo è fantastico, grazie, ma penso che possiamo realizzarlo anche solo con CSS. Dobbiamo solo usare lo stesso CSS su .topic-navigation che è stato usato su .with-topic-progress. La classe mancante .with-topic-progress sta bloccando lo stile se non c’è una risposta nell’argomento.

Qualcosa del genere dovrebbe funzionare.

CSS per dispositivi mobili

// Navigazione Sticky dell'Argomento
.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; // il wrapper può bloccare i controlli mobili
  
  > * {
    pointer-events: auto; // questo annulla la regola precedente in modo che gli elementi figli siano interattivi
  }
  
  // Aggiungi Stile 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;
    }
  }
}

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

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

[chapoi]

Dovrebbe essere risolto con

UX: add missing disco toc btn