DiscoTOC-Stil ist kaputt, wenn auf dem Handy keine Antwort kommt

[Don]

Hallo

Der DiscoTOC-Stil ist mit der Klasse .with-topic-progress verbunden, die zu .topic-navigation hinzugefügt wird, wenn mehr als 1 Beitrag im Thema vorhanden ist. Ohne Antwort funktioniert der DiscoTOC-Stil also nicht.

Ich denke, das Inhaltsverzeichnis sollte auch dann aktiv sein, wenn es keine Antwort in einem Thema gibt, da es nicht mit der Anzahl der Antworten zusammenhängt. Auf dem Desktop funktioniert es auch bei Themen ohne Antwort einwandfrei.

Hier ist ein Thema zum Testen: Customizing the topic list

Ich denke, man sollte dieses Verhalten in Betracht ziehen zu ändern.

Es ist wahrscheinlich nichts Neues, aber ich habe es bisher noch nicht bemerkt. Jetzt haben wir angefangen, es aktiver zu nutzen.

Danke

[JammyDodger]

Ich bin hier auch gerade darauf gestoßen. (iPhone/Safari) Es wäre toll, wenn das behoben werden könnte. Das Scrollen zum Ende eines langen Dokuments, um zum Inhaltsverzeichnis zu gelangen, ist etwas umständlich.

[alltiagocom (Tiago)]

Mit meinen grundlegenden Programmierkenntnissen und etwas ChatGPT-Gespräch habe ich es meiner Meinung nach zum Laufen gebracht.

Ich habe eine benutzerdefinierte Komponente erstellt und dies in den CSS-Tab eingefügt:

/* 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;
    }
}

und dies in den JS-Tab

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

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

Das scheint auch ohne Antwort gut zu funktionieren.
Nochmal, ich bin kein Experte, ich bin nur ein guter „Frager“ und nach ein paar „Hin und Her“ mit ChatGPT mit den richtigen Fragen und Herausforderungen scheint es zu funktionieren.

Wenn jemand, der ein JavaScript-Experte ist, es verbessern möchte, bitte teilt es mit.

[Don]

Hallo

Das ist großartig, danke, aber ich denke, wir können es auch nur mit CSS machen. Wir müssen nur das gleiche CSS auf .topic-navigation anwenden, das auf .with-topic-progress verwendet wird. Die fehlende Klasse .with-topic-progress blockiert den Stil, wenn es keine Antwort im Thema gibt.

Etwas wie das hier sollte funktionieren.

Mobile CSS

// Sticky Topic Navigation
.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; // the wrapper can block mobile controls
  
  > * {
    pointer-events: auto; // this unsets the above rule so the child elements are interactive
  }
  
  // Add TOC Style
  .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;
    }
  }
}

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

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

[chapoi]

Sollte behoben sein mit

UX: add missing disco toc btn