DiscoTOC-stijl is defect als er geen reactie is op mobiel

[Don]

Hello

DiscoTOC style is connected to the .with-topic-progress class which is added to .topic-navigation if there are more than 1 post in the topic. So without reply the DiscoTOC style will broke.

I think TOC should also be active if there is no reply in a topic because it doesn’t related with the reply counts. On desktop it works fine topics with no reply too.

Here is a topic for testing: Customizing the topic list

I think that would be consider to change this behaviour.

It’s probably not a new thing but I didn’t notice it yet. Now we started it using more actively.

Thanks

[JammyDodger]

I’ve just run into this here too. (iPhone/Safari) It’d be great if this could be fixed. Scrolling to the bottom of a long doc to get to the toc is a bit cumbersome.

[alltiagocom (Tiago)]

Met mijn basis programmeervaardigheden en wat ChatGPT-praatjes heb ik het werkend gekregen, geloof ik.

Een aangepaste component gemaakt en dit in het CSS-tabblad geplaatst:

@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

en dit in het JS-tabblad

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,
    });
  });
});

Dit lijkt prima te werken, zelfs zonder een reactie.
Nogmaals, ik ben geen expert, ik ben gewoon een goede “vrager” en na een beetje “heen en weer” met ChatGPT met de juiste vragen en uitdagingen, lijkt het te werken.

Als iemand die een expert is in JavaScript en CSS het wil verbeteren, deel het alsjeblieft.

---

Dus, als je wilt:

1. De tekst “Table of Contents” naast het icoon
2. Uitgevouwen koppen
3. Sticky knop zonder afhankelijk te zijn van reacties, is de volledige CSS dit:

/* breidt alle koppen uit in de zijbalk van de inhoudsopgave */
#d-toc li.d-toc-item > ul {
  max-height: 500em !important;
  overflow: visible !important;
  opacity: 1 !important;
}

@media screen and (max-width: 767px) {
    /* maakt de wrapper inclusief de knop van de inhoudsopgave, sticky aan de onderkant */
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* voegt "table of contents" toe aan de knop na het icoon */
    .d-toc-mini button::after {
        content: "Table of Contents";
        margin-left: 5px;
        font-size: 14px;
        vertical-align: middle;
    }
}

De JavaScript verandert niet.

[Don]

Hello

This is great thanks, but I think we can make it with only CSS too. We just have to use the same CSS on .topic-navigation which used on .with-topic-progress. The missing .with-topic-progress class is blocking the style if there is no reply in the topic.

Something like this should work.

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]

Should be fixed with

UX: add missing disco toc btn