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

[Don]

Bonjour

Le style DiscoTOC est connecté à la classe .with-topic-progress qui est ajoutée à .topic-navigation s’il y a plus d’un message dans le sujet. Donc, sans réponse, le style DiscoTOC sera cassé.

Je pense que la TOC devrait également être active s’il n’y a pas de réponse dans un sujet car cela n’a pas de rapport avec le nombre de réponses. Sur ordinateur, cela fonctionne bien même pour les sujets sans réponse.

Voici un sujet pour tester : Customizing the topic list

Je pense que ce comportement devrait être revu.

Ce n’est probablement pas une nouveauté, mais je ne l’avais pas encore remarqué. Maintenant, nous commençons à l’utiliser plus activement.

Merci

[JammyDodger]

Je viens de rencontrer ce problème ici aussi. (iPhone/Safari) Ce serait formidable si cela pouvait être résolu. Faire défiler jusqu’en bas d’un long document pour accéder à la table des matières est un peu fastidieux.

[alltiagocom (Tiago)]

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.

[Don]

Bonjour

C’est super, merci, mais je pense que nous pouvons le faire uniquement avec du CSS aussi. Il suffit d’utiliser le même CSS sur .topic-navigation qui est utilisé sur .with-topic-progress. La classe .with-topic-progress manquante bloque le style s’il n’y a pas de réponse dans le sujet.

Quelque chose comme ceci devrait fonctionner.

CSS mobile

// Navigation de sujet fixe
.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; // le wrapper peut bloquer les contrôles mobiles
  
  > * {
    pointer-events: auto; // cela désactive la règle ci-dessus afin que les éléments enfants soient interactifs
  }
  
  // Ajouter le style 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;
    }
  }
}

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

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

[chapoi]

Devrait être corrigé avec

UX: add missing disco toc btn