حجم زر الرد يتأثر بتفضيل حجم النص

متابعةً للنقاش من ضوابط المواضيع الجديدة على ميتا:

أعتقد أن جزءًا من

اجعل جميع الأزرار بنفس حجم الخط

لا يعمل في جميع الحالات.

لقد اخترت حجم نص أصغر في تفضيلاتي ويبدو أن هذا يؤثر على حجم زر الرد. إنه أصغر من الأزرار الأخرى. ومن المثير للاهتمام أنه لا يصبح أكبر عندما أختار حجم خط أكبر.

6 إعجابات

لدي حجمي في الوضع الطبيعي وأرى هذه المشكلة أيضًا.

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

مرحباً @Moin شكراً للإبلاغ، مصممنا على علم بالمشكلة ولكنه لم يجد حلاً بعد، هل لديك أي أفكار حول كيفية حلها؟

هل هذا في أسفل المواضيع على الهاتف المحمول؟
ربما يتأثر بحجم نص “رد” على سطح المكتب/الجهاز اللوحي، والذي لا يظهر على الهاتف المحمول

أعتقد أن زر الرد بالحجم المناسب والأزرار الموجودة على اليسار ليست كذلك.

بخلاف الأزرار الأخرى في منطقة .topic-footer-main-buttons، فإن زر إشعارات الموضوع محاط بعنصر div (.topic-notifications-button).

جميع الأزرار في المنطقة، بما في ذلك زر الرد (رمز مبسط):

<button></button>

زر الإشعارات (رمز مبسط):

<div class="topic-notifications-button">
  <button></button>
</div>

المشكلة هي، بسبب هذا السطر،

يتم تطبيق خاصية font-size: var(--font-up-1) على كل من غلاف زر الإشعارات والزر بداخله.
كما تعلم، تتضاعف قيم em بشكل متزايد من الأصل إلى الفرع.

يمكن توضيح النتيجة على النحو التالي:

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1.15 × 1.15 هي المشكلة. القيمة النهائية لـ font-size على عنصر زر الإشعارات <button> أكبر من المتوقع.

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

إزالة السطر المميز في onebox الخاص بـ GitHub أعلاه يجب أن يحل المشكلة:


  1. يمكن توضيح ذلك إذا أضفنا بضعة أزرار إضافية في الحاوية لجعل المحتوى يلتف:



    تحصل الأزرار في السطر الأول كلها على الارتفاع المتوقع.

    ومع ذلك، فإن زر الإشعارات، الأكبر من المتوقع بسبب مضاعفة em، يجعل الزر المجاور في نفس السطر يزيد تلقائيًا في الارتفاع. ↩︎

7 إعجابات

شكرا جزيلا على تصحيح الأخطاء، سأمرر هذا إلى المصممين لدينا :hugs:

3 إعجابات

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

شكرًا لك! :clap:

6 إعجابات

يجب إصلاح هذا (PR)

إعجابَين (2)

في المواضيع المثبتة مثل Share your feedback about the 🆕 iOS Discourse Hub app لا يزال زر الرد أصغر

إعجابَين (2)

النص غير المرئي \u200B بجوار أيقونة svg في مجموعة التحديد :pushpin: يزيد من ارتفاع الزر. أي نص في أي زر يزيد من ارتفاعه بالمثل (وتقوم الأزرار الشقيقة بتعديل ارتفاعها وفقًا لذلك، مثل السلوك الذي تمت مناقشته أعلاه).

نعم، هذا شيء سأفتح له موضوعًا داخليًا. لست متأكدًا مما إذا كانت &ZeroWidthSpace; تسبب مشاكل بسبب تغييراتي، أم أنها كانت دائمًا الحالة وقمنا بملاحظتها الآن في هذا الإعداد.

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

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