البطاقات موزعة بشكل خاطئ عند التغليف في ديسكورش

مطور
1

مرحباً :waving_hand:

عندما أحاول تغطية كامل مساحة discourse لتمكين أعمدة جانبية بألوان مختلفة، أواجه مشكلة في سوء وضع العناصر المنبثقة (overlays) مثل بطاقة المستخدم على سبيل المثال.

17
171113×780 58.9 KB

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

شكراً جزيلاً :clinking_beer_mugs:

2

نعم، واجهت هذه المشكلة عند إضافة لافتة كبيرة جدًا أثناء تطوير إضافة كبيرة لعميل. في حالتي، كان الإزاحة سخيفًا تمامًا (كان خارج الشاشة!)

قد يكون هناك حل أبسط، لكن اتضح أن الأمر يتطلب بعض التعقيد ويتطلب منك تجاوز دالة، على سبيل المثال لبطاقة المستخدم:

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

هذا يأتي من مزيج (mixin) موجود هنا: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

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

بصراحة، مثالك لا يبدو سيئًا إلى هذا الحد - سأفكر في تركه كما هو؟

3

المشكلة هي أن جميع الطبقات فوقية موضوعة بشكل خاطئ تقريبًا. لا أريد حقًا تجاوز طريقة تحديد الموضع لكل طبقة فوقية قد تكون موجودة.

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

4

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

5

لم قمت بتخصيص أي عرض معين. أريد وضع المنتدى بأكمله داخل حاوية لتلوين الجوانب بشكل مختلف.

6

كيف تنجز ذلك؟ هل تقوم بإضافة حاوية جديدة حول div #main؟

قد يكون من الأسهل إذا قمت بدلاً من ذلك بإضافة لون خلفية إلى #main-outlet ثم تضيف لون الخلفية للجوانب على body.

7

نعم، لقد فكرت في ذلك لاحقًا! إذن:

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

ما زال هناك مشكلة في اللافتة السميكة، لكنها ليست كبيرة.