هذا كود CSS (أو بالأدق Less لأنه فيه متغير @xf-responsiveMedium خاص بـ XenForo) وظيفته:
media query (@media (min-width: @xf-responsiveMedium) {...}):
يعني الكود هذا ينطبق فقط لما تكون الشاشة أعرض من @xf-responsiveMedium
(اللي عادةً هو حجم معين للتابلت أو الديسكتوب، وليس الجوال).
داخل الشرط:
.message-user (جزء بيانات العضو بجانب الرد مثل الاسم والصورة الرمزية):
position: sticky;: يعني يبقى مثبت في مكانه لما تسكرول الصفحة،
لكن مش بالكامل ثابت مثل fixed، بل يبقى عادي إلى أن يوصل نقطة معينة ويثبت.
top: 37px;: يبدأ يثبت لما يوصل بعد 37 بكسل من أعلى الشاشة.
.message-userArrow (غالباً السهم الصغير اللي يربط بين بيانات العضو والمحتوى):
right: -11px;: يحرك السهم 11 بكسل خارج جهة اليمين ليظبط مكانه بالنسبة للوضعية الجديدة للعضو.
لما تتصفح المنتدى بشاشة واسعة (مثل كمبيوتر)،
بيانات العضو تظل ظاهرة وثابتة جزئياً وانت تقرأ الردود
(عشان سهولة رؤية اسم العضو بدون الحاجة للرجوع للأعلى).
السهم يتعدل مكانه ليتماشى مع التثبيت.
media query (@media (min-width: @xf-responsiveMedium) {...}):
يعني الكود هذا ينطبق فقط لما تكون الشاشة أعرض من @xf-responsiveMedium
(اللي عادةً هو حجم معين للتابلت أو الديسكتوب، وليس الجوال).
داخل الشرط:
.message-user (جزء بيانات العضو بجانب الرد مثل الاسم والصورة الرمزية):
position: sticky;: يعني يبقى مثبت في مكانه لما تسكرول الصفحة،
لكن مش بالكامل ثابت مثل fixed، بل يبقى عادي إلى أن يوصل نقطة معينة ويثبت.
top: 37px;: يبدأ يثبت لما يوصل بعد 37 بكسل من أعلى الشاشة.
.message-userArrow (غالباً السهم الصغير اللي يربط بين بيانات العضو والمحتوى):
right: -11px;: يحرك السهم 11 بكسل خارج جهة اليمين ليظبط مكانه بالنسبة للوضعية الجديدة للعضو.
لما تتصفح المنتدى بشاشة واسعة (مثل كمبيوتر)،
بيانات العضو تظل ظاهرة وثابتة جزئياً وانت تقرأ الردود
(عشان سهولة رؤية اسم العضو بدون الحاجة للرجوع للأعلى).
السهم يتعدل مكانه ليتماشى مع التثبيت.
CSS:
@media (min-width: @xf-responsiveMedium) {
.message-user {
position: sticky;
top: 37px;
.message-userArrow {
right: -11px;
}
}
}
