تخطيط وضع تضمين fullApp

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

عندما أُطلق تضمين fullApp، حاولت بسرعة اعتماده في موقعي، واضطررت لإصلاح بعض الأمور المتعلقة بالتخطيط. فكرت في مشاركتها هنا، ربما تجدها مثيرة للاهتمام:

  1. عندما يكون النص في الصفحة ضيقًا بما يكفي (حوالي 700 بكسل)، يبدو عرض التضمين جيدًا، ولكن مع محتوى يبلغ حوالي 900 بكسل أو أكثر، تظهر مساحة فارغة على اليسار،

  2. عندما أصلحت ذلك، ظهرت مساحة فارغة أخرى على اليمين،

  3. اتضح أنه افتراضيًا، ارتفاع القسم يساوي ارتفاع المحتوى أعلاه. ومع المحتوى الأطول، تظهر مساحة فارغة أخرى أسفل قسم التضمين، قد تمتد لـ 2-3 شاشات،

  4. بعد إصلاح جميع المشكلات الثلاث المذكورة أعلاه، لاحظ زميل أن قسم التعليقات يومض بمقدار 1 بكسل لأعلى/لأسفل على نظام Ubuntu باستخدام متصفح Chrome (غير ملحوظ على Mac) — وتم حل المشكلة عبر CSS مخصص آخر.

في النهاية، تم حل جميع المشكلات بواسطة مقتطف الكود أدناه:

body.embed-mode #main-outlet-wrapper { 
  display: block !important;
}
body.embed-mode {
  --topic-body-width: 100%;
}

// height
body.embed-mode .topic-post:first-child {
    display: none !important;
}
.post-stream--cloaked { min-height: 0 !important; }

… تم تطبيقه على السمة الافتراضية.

سأكون سعيدًا بتوفير HTML كامل لإعادة إنتاج المشكلة.

شكرًا لكم!

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