العلامة غير قابلة للنقر في قائمة الموضوعات على الهاتف المحمول

خطوات إعادة الإنتاج (أي موضوع بعلامات على ميتا):

  • سطح المكتب:
    • يمكن النقر على كل من الفئة والعلامات في كل من قائمة الموضوع وعنوان الموضوع
  • الجوال:
    • يمكن النقر على الفئة في قائمة الموضوع (تغيير حديث، أعتقد) وفي عنوان الموضوع
    • يمكن النقر على العلامات فقط في عنوان الموضوع

تمت مناقشة هذا من قبل (Opening the category in the topic-list on mobile - #2 by codinghorror, Extra padding makes it hard for users to click on tag and category under topic title - #8 by awesomerobot)، والسبب في أن عرض قائمة الموضوع على الجوال لا يسمح بالنقر على الفئة والعلامات هو صغر حجم العناصر على الجوال، ولكن في نفس الوقت كان من الممكن دائمًا النقر على الفئة والعلامات في عنوان الموضوع، حيث تكون العناصر بنفس الحجم والمساحة بينها أضيق.

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

3 إعجابات

مرحباً @md-misko :wave:

يمكنني إعادة إنتاج المشكلة.

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

4 إعجابات

أعتقد أن التغيير بالكامل بواسطة @awesomerobot يمكن تجاوزه باستخدام CSS. ربما جرب مكون سمة على موقعك لبضعة أسابيع وأبلغنا بالتغيير الذي توصي به في CSS؟

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

سام، هل تشير إلى هذا:

لقد جربت هذا بالفعل في مكون سمة باستخدام CSS أعلاه، ولكنه لم يبدو أنه يعمل.

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

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

من أجل الاتساق، هل توافق على أن كلا العنصرين يؤديان وظائف مماثلة ويجب أن يعملا بنفس الطريقة فور إخراجهما؟

بالطبع، لن أمانع في إصلاح هذا باستخدام CSS، ولكنه لا يبدو أنه يعمل بالنسبة لي (جربت على كل من الإنتاج وبيئة الاختبار).

يبدو أن هناك تراجعًا ما… ما أراه الآن على نظام iOS هو أن الفئات تنتقل إلى صفحة الفئة والعلامات هي منطقة ميتة (لذلك لا تنتقل حتى إلى الموضوع). يمكنني النظر في هذا. هذا الـ CSS قديم أيضًا… في الوقت الحالي سيكون (سأقوم بتحديث هذا المنشور):

.topic-list .topic-item-stats__category-tags { 
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all; 
  }
}

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

الحد الأدنى للحجم الموصى به للعنصر القابل للنقر على جهاز محمول هو عمومًا حوالي 45 بكسل مربع، وسيتعين علينا مضاعفة ارتفاع الفئات والعلامات تقريبًا للوصول إلى هذا. هذا ممكن إذا كانت الفئات والعلامات مقصورة على سطر واحد، ولكن لدى العديد من المواقع ما يكفي من المحتوى هنا لجعله يلتف… ولن يكون التباعد مثل هذا رائعًا:

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

إعجابَين (2)

شكرًا على الـ CSS المحدث، يعمل على أحدث إصدار.

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

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

لحسن الحظ، مكون سمة الموضوع القابل للنقر حسن التنقل على الهاتف المحمول بشكل كبير بالنسبة لي، حيث أستخدم الآن بشكل شبه حصري المساحة السلبية في قائمة الموضوعات للانتقال إلى الموضوع نفسه، وأستخدم عناصر الفئة والعلامة للتصفية السريعة إلى عرض الفئة أو العلامة (فقط لأتفاجأ، مرارًا وتكرارًا، بأنها لا تعمل :upside_down_face:).

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

وعندما أكون داخل الموضوع نفسه، يكون هناك مساحة أقل بين عنوان الموضوع وعناصر الفئة والعلامة، وكان النقر عليها ممكنًا دائمًا.

إعجابَين (2)