סגנון DiscoTOC אינו עובד כראוי אם אין תגובה במובייל

[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)]

עם כישורי הקידוד הבסיסיים שלי וקצת שיחות עם ChatGPT, אני מאמין שהצלחתי לגרום לזה לעבוד.

יצרתי רכיב מותאם אישית ושמתי את זה בלשונית ה-CSS:

/* CSS עבור רכיב Discourse - לנייד בלבד */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

ואת זה בלשונית ה-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,
        });
      });
  });

זה נראה שעובד מצוין גם בלי תגובה.
שוב, אני לא מומחה, אני פשוט “שואל” טוב ואחרי כמה “הלוך ושוב” עם ChatGPT עם השאלות והאתגרים הנכונים, זה נראה שעובד.

אם יש מישהו שהוא מומחה ב-JavaScript ורוצה לשפר את זה, אנא שתפו.

[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