هل هناك أي طريقة لجعل روابط اللافتة في الإصدار المحمول تظهر أفقيًا بدلاً من عمودي؟ شكرا!
4 إعجابات
4 إعجابات
شكراً جزيلاً، لسبب ما لم ألاحظ ذلك. إنه يعمل بشكل مثالي!
4 إعجابات
5 إعجابات
إليك مثال برمجي حول كيفية تخصيص اللافتة لتبدو أقل ارتفاعًا على الشاشات الصغيرة:
ضع هذا في علامة التبويب mobile لتخصيص السمة الخاص بك!
// يجعل لافتة الترحيب متوافقة مع أحجام الشاشات الصغيرة
.below-site-header-outlet.welcome-link-banner-connector {
.welcome-link-banner-wrapper {
background-image: url($mobile-banner-bg);
background-size: cover;
.welcome-wrapper {
.featured-banner-link {
flex-direction: row;
padding-bottom: 0.5em;
&div a {
padding: 0 5px;
h3 {
font-size: 0.75em;
white-space: normal;
}
}
}
}
}
}
سيتم تعديلها وفقًا لاحتياجاتك (لهذا السبب توجد تداخلات SCSS “فارغة”).
كما هي، تبدو هكذا في مشروعي الحالي:
تعديل: @Moin كان أسرع مني في ذكر تعديلاتي الخاصة… أحسنت 
11 إعجابًا
هذا تحسين هائل في المظهر المتوافق مع الأجهزة المحمولة لافتة الترحيب. بالأمس فقط شاهدت مستخدمًا جديدًا يسجل في موقعي عبر الهاتف المحمول، وتعثر بسبب الحجم الكبير للافتة؛ بشكل أساسي لم يدرك أنه كان عليه التمرير لأسفل لرؤية الإجراء. ومن ثم كنت أبحث عن شيء أفضل، وهذا المقتطف من CSS رائع.
اضطررت إلى إزالة background-image: url($mobile-banner-bg); لأنه من الواضح أنك استخرجت ذلك من نسخة متفرعة من TC.
@awesomerobot، هل ستنظر في طلب سحب (PR) لإضافة هذا التحسين للجوال إلى مكون السمة؟
6 إعجابات
بالتأكيد، طلبات السحب (PRs) مرحب بها دائمًا
3 إعجابات
Hi @awesomerobot, given that I haven’t seen a PR for that so far, I just created a PR to add the enhancement made by @Canapin, and added two locales. 
6 إعجابات
نظرت ورأيت أنك قمت بإزالة تغييرات اللغة كما طلب @team. ومع ذلك، تم إغلاق طلب السحب (PR) لذا فتحت لك واحدًا جديدًا:
6 إعجابات
رائع! متى تعتقد أنه سيتم دمجه؟
إعجابَين (2)
لست متأكدًا - @awesomerobot، هل طلب السحب الخاص بي جيد؟
5 إعجابات
يبدو جيدًا بالنسبة لي، تم الدمج الآن. شكرًا!
6 إعجابات
جميل! لكن مشكلة الأيقونات العمودية تحدث أيضًا على الأجهزة اللوحية، لذا فإن استخدام CSS المخصص للجوال فقط يبدأ من حجم شاشة صغير جدًا. للأسف، لا يتيح لك CSS المخصص لـ Discourse استهداف الأجهزة اللوحية. كان حلي هو وضع النص التالي في علامة التبويب common CSS المخصص.
كما أنه يتضمن إصلاحات للمسافات غير المرغوب فيها على اليمين في عرض الجهاز اللوحي، واخترت أيضًا زيادة حجم الخط للروابط إلى 1em.
@media (max-width: 768px) {
.below-site-header-outlet.welcome-link-banner-connector {
.welcome-link-banner-wrapper {
background-size: cover;
.welcome-wrapper {
.welcome-content {
p {
max-width: initial;
}
}
.featured-banner-link {
flex-direction: row;
padding-bottom: 0.5em;
div a {
padding: 0 5px;
h3 {
font-size: 1em;
white-space: normal;
}
}
}
}
}
}
}
3 إعجابات
شكرا لهذه المعلومات!
لم أقم بطلب سحب (pull request) لمكون السمة (theme component) بنسختي للهاتف المحمول لأنني لم أختبرها في تكوينات مختلفة. ورسالتك تظهر أن كود الهاتف المحمول سيحتاج بالفعل إلى عمل إضافي 
3 إعجابات
تم إغلاق هذا الموضوع تلقائيًا بعد 801 يومًا. لم يعد الرد على استفسارات جديدة مسموحًا به.