Horizon theme bug: حاوية عنوان الفئة ثابتة في قوائم المواضيع

مرحباً يا رفاق

عندما أضيف صورة أو أيقونة أو رمز تعبيري إلى فئة، فإن رأس الفئة category-heading يلتصق عند التمرير لأسفل ويشغل مساحة كبيرة.

CleanShot 2025-10-31 at 14.03.16

يتأثر أيضاً مكون سمة رأس الفئة حيث أنظر إلى ما بعد مشاركتي كمرجع.

3 إعجابات

نعم، أتفق على أن هذا تأثير جانبي مزعج.

للأسف ليس لدي حل لذلك. عنوان الفئة موجود في نفس العنصر اللاصق مثل التنقل، ولا يمكنني نقل الخاصية اللاصقة إلى مستوى أدنى، لأن اللاصق لا يعمل داخل عنصر مرن…

أنصحك بإخفاء أو تصغير الشعار باستخدام CSS على الهاتف المحمول.

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

يزعجني أيضًا شريط التنقل الثابت (Sticky navigation). إنه يشغل مساحة كبيرة جدًا.

كيف يمكنني إيقافه؟

لا يوجد إعداد لذلك. سيتعين عليك تجاوز تنسيق CSS.

يحتوي سِمَة (Theme) Horizon على ميزة أنيقة، حيث يظل وصف الفئة مرئيًا أثناء تمرير قائمة المواضيع:

في حين أن هذا رائع على سطح المكتب، إلا أنه عندما تصبح المساحة ضيقة (على سبيل المثال على الهاتف المحمول) يجعل قائمة المواضيع صعبة القراءة للغاية (خاصة إذا كان النص طويلاً جدًا)

إعجابَين (2)

هذا تأثير جانبي غير مقصود للرغبة في إبقاء التنقل مرئيًا في الواقع. لست متأكدًا مما إذا كان يمكن إصلاحه (قد يكون كلا العنصرين في نفس الحاوية أو شيء من هذا القبيل؟ :thinking: ) وإذا كان عليّ الاختيار، فسألتزم بنيتي الأصلية.

إذا شعر أي شخص برغبة في إلقاء نظرة، فأهلاً به.

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

تم حلها باستخدام CSS.

/* تعطيل عناصر التحكم في القائمة الثابتة على الجوال */
@media (max-width: 767px) {
  .list-controls {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}
3 إعجابات

ألا يؤدي ذلك ببساطة إلى “إلغاء التثبيت” لكل من الوصف والتنقل على الهاتف المحمول؟

نريد حقًا أن يختفي الوصف بينما يثبت التنقل في مكانه.

إعجابَين (2)

استحوذت شريط التنقل على مساحة كبيرة أيضًا.

حاليًا، نحن نفكر في استخدام أزرار قابلة للتمرير (scrollable pills).

أود أن أجعلها ثابتة (sticky)، لكنني لم أتمكن من تحقيق ذلك بعد.

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

صحيح، للأسف لا توجد طريقة بسيطة للقيام بذلك باستخدام CSS دون إعادة هيكلة التخطيط أيضًا.
حاليًا، يجعل قالب Horizon حاوية .list-controls بأكملها ثابتة، بما في ذلك رأس الفئة. لا يمكننا جعل العنصر الفرعي .navigation-container ثابتًا بمفرده، لأن العناصر الثابتة تظل ملتصقة بسياق التمرير الخاص بالوالد.

يمكننا إعادة هيكلة هذا القسم، لكنه أحد التغييرات التي ستؤثر على جميع القوالب التي تستخدم التنسيق بناءً على البنية الحالية… لذا فهناك احتمال كبير لحدوث انتكاسة في قوالب أخرى وتخصيصات، حتى لو لم يكن لديها شريط تنقل ثابت مثل هذا.

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

إذن، ما هو المسار الأمثل للمضي قدمًا في هذا الشأن؟

أتساءل عما إذا كان ينبغي لنا ببساطة إخفاء وصف الفئة على الأجهزة المحمولة في Horizon. فالحقيقة أن هذه المعلومات تتكرر إلى حد ما، في مساحة ضيقة جدًا.

لقد حققت ذلك باستخدام بعض أكواد CSS البسيطة في تبويب Mobile في TC:

.category-heading.--has-logo {
    display: none;
}

ربما ينبغي تضمين هذا الحل في Horizon؟

لقد وضعتَ أنتَ بالفعل الطريقة المثلى للمضي قدمًا: استخدم CSS مخصصًا لتعديل الإعدادات حسب تفضيلاتك :+1:

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

نعم، لكن في هذه الحالة المشكلة أوسع من مجرد تفضيل شخصي، بل تتعلق بالموضوع نفسه. يصعب عليّ تخيل شخص قد يعجب حقًا بوصف فئة كبير وثابت على الأجهزة المحمولة — لا أعتقد أن هذا كان مقصودًا في التصميم من الأساس.

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

في الحقيقة، من المستحيل التنبؤ بما يريده الناس في مجتمعهم. لذا، أختار ترك الأمر كما هو؛ فمن السهل إخفاؤه إذا اختار المستخدمون ذلك، وهذه الطريقة أقل إرباكًا من التساؤل عن سبب عدم ظهور شريط فئة على الجوال.

ماذا عن خطط الاستضافة (أي الخطة المجانية) حيث لا يستطيع المشرفون إضافة CSS مخصص؟

إذا كان بعض الأشخاص يرغبون في ذلك حقًا (وهو ما أشك فيه)، فهل يمكن أن يكون هناك إعداد في السمة يتحكم في ذلك؟

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