모바일에서 답글이 없으면 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) {
    /* 목차 버튼을 포함한 래퍼를 하단에 고정(sticky)합니다 */
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* 아이콘 뒤에 버튼에 "목차"를 추가합니다 */
    .d-toc-mini button::after {
        content: "Table of Contents";
        margin-left: 5px;
        font-size: 14px;
        vertical-align: middle;
    }
}

JavaScript는 변경 사항이 없습니다.

1개의 좋아요
DiscoTOC - automatic table of contents