تمكين الدردشة يغير حشوة المخرج الرئيسي على الهاتف المحمول

تمكين الدردشة يغير الحشو على main-outlet الخاص بي على الهاتف المحمول كالتالي:

قبل

بعد

CSS الدردشة ذو الصلة هنا:


(يتم استبدال الحشو من 1em إلى 0)

أتفهم أنه لا يزال قيد التطوير وقد تتغير الأشياء. أعتقد أنه من المنطقي تعيين الحشو إلى صفر في صفحة الدردشة ولكنه ينتهي بتطبيقه على كل صفحة.


شيء آخر لاحظته هو أنه على الهاتف المحمول، تغطي لوحة المفاتيح ما أكتبه (Android/Chrome):

قارن ذلك بـ Discord، حيث يتم وضع مربع النص فوق لوحة المفاتيح

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

هل لديك إصدار Android / إصدار Chrome من فضلك؟

هل أنت متأكد من أن هذا قادم من الدردشة؟ ليس لدينا ملف chat-mobile.scss على حد علمي.

دعني أوضح أولاً ما إذا كنت قد قمت بتثبيت الدردشة بالطريقة الصحيحة،
لقد قمت بإعادة بناء نسختي الليلة الماضية. لم أقم بتضمين الدردشة في ملف app.yml الخاص بي - فهمي هو أنها الآن مكون إضافي يأتي مع جوهر discourse؟


الرابط يشير إلى هنا: discourse/plugins/chat at main · discourse/discourse · GitHub

سأجد من أين يأتي هذا الملف chat-mobile.scss.

نعم، هذه الآن إضافة أساسية

من المحتمل أنني أفتقد شيئًا ما هنا… ولكن من الذاكرة، لا أعرف أين يمكن أن يكون هذا في الإضافة حاليًا. لدينا شيء يتعلق بالحشو ولكن من المفترض أن يكون هذا مقصورًا على .has-full-page-chat ونتيجة لذلك لا ينبغي أن يؤثر على الصفحات الأخرى.

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

وجدتها، يبدو أنها من سمة Discourse Air التي أستخدمها

أستخدم ذلك مع بعض تجاوزات CSS الخاصة بي، لذا أعتقد أن هذه مشكلة “خاصة بي” في هذه الحالة.

سأبحث في مشكلة لوحة المفاتيح، أفترض أن هذا السلوك ليس مقصودًا، أليس كذلك؟

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

نعم، غير مقصود :slight_smile:

لقد قمت بعزل المشكلة. لدي مكونان يستخدمان منفذ below-site-header (مثل لافتة دوارة وشريط تنقل). هل تخمن أن ارتفاعهما لم يتم حسابه بشكل صحيح؟

لقطة شاشة كاملة

هذه مكونات مخصصة كتبتها بنفسي، لذا قد تكون مشكلة أخرى خاصة بي، ولكن قد يكون أيضًا أن أي شيء في below-site-header يمكن أن يكون مشكلة، وفي هذه الحالة تصبح مشكلة جماعية :slight_smile:

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

كيف سيعمل ذلك؟ سيتبقى لديك 50 بكسل من الارتفاع لعرض الدردشة.

أعتقد أن المشكلة الأساسية هي أنه عندما تلمس مربع نص الدردشة، تقفز الشاشة إلى أعلى الصفحة ويصبح ما بداخل below-site-header مرئيًا.

مثال فيديو

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

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