Стиль DiscoTOC сломан, если нет ответа на мобильном

Внести вклад UX
, ,
3

С моими базовыми навыками программирования и некоторыми подсказками от ChatGPT, я, думаю, добился успеха.

Создал пользовательский компонент и добавил следующее в вкладку CSS:

@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        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 и CSS захочет улучшить это решение, пожалуйста, поделитесь.

Итак, если вы хотите:

  1. Текст «Оглавление» рядом с иконкой
  2. Раскрытые заголовки
  3. Закреплённую кнопку, не зависящую от наличия ответов, то полный код CSS выглядит так:
/* раскрывает все заголовки в боковой панели оглавления */
#d-toc li.d-toc-item > ul {
  max-height: 500em !important;
  overflow: visible !important;
  opacity: 1 !important;
}

@media screen and (max-width: 767px) {
    /* делает обёртку, включая кнопку оглавления, закреплённой внизу */
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* добавляет «оглавление» к кнопке после иконки */
    .d-toc-mini button::after {
        content: "Оглавление";
        margin-left: 5px;
        font-size: 14px;
        vertical-align: middle;
    }
}

JavaScript-код остаётся без изменений.

1 лайк
DiscoTOC - automatic table of contents