التحديث الأخير كسر شريط التنقل العلوي الخاص بي

الدعم
1

أحد التحديثات الأخيرة عطل شريط التنقل العلوي الخاص بي - وتحديداً، يُحمّل الشريط (يظهر لجزء من الثانية) لكن رأس Discourse القياسي يضع نفسه فوقه ويخفيه.

أحاول معرفة ما حدث بالضبط و/أو كيفية إصلاحه. هل يمكن لأحد أن يوجهني في الاتجاه الصحيح؟

من خلال فحص الصفحة في المتصفح، اكتشفت أن ضبط

.d-header-wrap {
    margin-top: 48px;
}

سوف يحرك الرأس للأسفل لكشف شريط التنقل (الذي يبلغ ارتفاعه 48 بكسل)، ويبدو أن هذا قد أصلح المشكلة.

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

كما اضطررت إلى إزالة

#main-outlet { margin-top: 48px; padding-top: 75px;}

من المكون الخاص بي لإزالة المساحة البيضاء الإضافية التي ظهرت تحت الرأس. هذا الكود كان يعمل بشكل صحيح لسنوات، لذا أنا فضولي لمعرفة ما تسبب في تعطله…

كما قمت بإزالة شيء آخر، مثل

#main-outlet.docked {
    margin-top: 0px;
    padding-top: 123px
}

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

تعديل: ما ورد أعلاه صحيح لـ CSS سطح المكتب. على الهاتف المحمول، لم أكن بحاجة إلى زيادة قيمة Z الخاصة بشريط التنقل.

إعجابَين (2)
2

تغيّر الرأس من استخدام position: fixed إلى position: sticky (REFACTOR: Remove position fixed from the header and use sticky instea… · discourse/discourse@da5841d · GitHub) - وهذا أحد التحديثات التي تمكّنّا من إجرائها بسبب التخلي عن دعم IE11.

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

عند إجراء التغيير لأول مرة، كان هناك حشوة إضافية على الجوال في CSS الافتراضي، لكن تم إصلاح ذلك بعد يوم أو يومين… أعتقد أنك قمت بالتحديث في اليوم بين التغيير الأولي والإصلاح، وإذا قمت بالتحديث مرة أخرى فستختفي المشكلة (يمكنك بدلاً من ذلك إضافة .mobile-view #main-outlet { padding-top: 0.25em; } إذا لم ترغب في التحديث مرة أخرى).

يبدو لي أن إصلاحك باستخدام .d-header-wrap مستدام.

5 إعجابات
3

انظر أيضًا Header Submenus - #103 by Mark_Schmucker. لست متأكدًا مما إذا كان الإصلاح المستدام المقترح ينطبق على ذلك، لكنني أعتقد أنها مرتبطة بنفس التغيير.

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

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

إذًا، ما حدث هو نفس ما ورد في المنشور الأصلي، إلا أن هذه المرة لم يكن رأس الصفحة (header) الخاص بـ Discourse يغطي شريط التنقل العلوي بل شريط التنقل العلوي يغطي رأس الصفحة . (تعديل: أعتقد الآن أن الرأس غير مغطى بل لم يتم عرضه على الإطلاق). عندما قمت بتعطيل السمة الافتراضية عبر الوضع الآمن، تم عرضها بشكل صحيح.

ومع ذلك، فإن الغريب هو أنه عند التنقل إلى /admin/customize/themes/11/desktop/scss/edit، يظهر كل من رأس صفحة Discourse وشريط التنقل العلوي بشكل صحيح (في الوضع الآمن والوضع العادي على حد سواء). أعتقد أن السبب وراء عدم وجود فرق بين الوضع الآمن والوضع العادي في صفحة السمة هو أن الوضع الآمن لا ينطبق على بعض صفحات الإدارة. لكن ما لا أفهمه هو لماذا يتم عرض كل شيء بشكل صحيح في صفحات الإدارة ولكن ليس في غيرها.

شيء آخر لا أفهمه: عندما أقوم بالوصول إلى الموقع من هاتفي المحمول، يتم عرضه بشكل صحيح أيضًا، حتى عندما أطلب إصدار سطح المكتب صراحة…

سأقوم بالتحقيق أكثر، لكنني أقدر أي تلميحات هنا.

تعديل: إليك ما أراه عند فحص صفحة عامة (في الوضع العادي):

image
image1368×384 32.9 KB

وهذا ما أراه عند فحص صفحة إدارية (في الوضع العادي):

image
image1394×380 32.9 KB

كما ترون، إصلاح CSS الخاص بي موجود في كلتا الحالتين، لكن فقط الحالة الثانية تعرض الصفحة بشكل صحيح…

5

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

إزالته حلّ المشكلة. ربما يفهم @Johani ما الذي يسبب هذا؟ هل قد يكون مرتبطاً بـ

التحكم الإضافي في إطارات الويب (iframes) داخل الصناديق الأحادية (oneboxes)

الذي أُدخل في Discourse Version 2.6 - #2 by neil