نمط DiscoTOC معطل إذا لم يكن هناك رد على الهاتف المحمول

تجربة المستخدم
, ,
1

مرحباً :wave:

نمط DiscoTOC متصل بفئة .with-topic-progress التي تتم إضافتها إلى .topic-navigation إذا كان هناك أكثر من منشور واحد في الموضوع. لذا بدون رد، سيتعطل نمط DiscoTOC.

أعتقد أنه يجب أيضًا تنشيط جدول المحتويات إذا لم يكن هناك رد في موضوع لأنه لا يتعلق بعدد الردود. على سطح المكتب، يعمل بشكل جيد للمواضيع التي لا تحتوي على ردود أيضًا.

إليك موضوع للاختبار: Customizing the topic list

أعتقد أنه سيتم النظر في تغيير هذا السلوك.

ربما ليس شيئًا جديدًا ولكني لم ألاحظه بعد. الآن بدأنا في استخدامه بشكل أكثر نشاطًا.

شكراً :slight_smile:

7 إعجابات
2

لقد واجهت هذا هنا أيضًا. :cry: (iPhone/Safari) سيكون رائعًا إذا كان يمكن إصلاح هذا. التمرير إلى أسفل مستند طويل للوصول إلى جدول المحتويات أمر مرهق بعض الشيء.

3 إعجابات
3

بمهاراتي البرمجية الأساسية وبعض محادثات ChatGPT، أعتقد أنني جعلتها تعمل.

أنشأت مكونًا مخصصًا ووضعت هذا في علامة التبويب CSS:

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

وهذا في علامة التبويب 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 ويريد تحسينها، فيرجى المشاركة.

إعجاب واحد (1)
4

مرحباً :wave:

هذا رائع شكراً، ولكن أعتقد أنه يمكننا صنعه باستخدام CSS فقط أيضاً. :thinking: علينا فقط استخدام نفس CSS على .topic-navigation الذي تم استخدامه على .with-topic-progress. الفئة المفقودة .with-topic-progress تمنع النمط إذا لم يكن هناك رد في الموضوع.

شيء مثل هذا يجب أن يعمل.

CSS للجوال

// تنقل الموضوع الثابت
.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; // يمكن للغلاف أن يمنع عناصر التحكم في الجوال
  
  > * {
    pointer-events: auto; // هذا يلغي القاعدة أعلاه حتى تكون العناصر الفرعية تفاعلية
  }
  
  // إضافة نمط جدول المحتويات
  .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
.rtl {
  .topic-navigation .d-toc-wrapper {
    right: unset;
    left: -100vw;

    &.overlay {
      right: unset;
      left: 0;
    }
  }
}
إعجاب واحد (1)
6

يجب إصلاحه باستخدام

إعجابَين (2)
8

تم إغلاق هذا الموضوع تلقائيًا بعد 7 أيام من آخر رد. لم يعد يُسمح بالردود الجديدة.