هل هناك أي أفكار حول جعل Horizon بعرض كامل؟ أجد أنه يبدو مقيدًا بعض الشيء في المنتصف (مثل المشد؟)، وجعله كاملاً سيمنحه راحة لطيفة.
4 إعجابات
لا، لا أخطط للقيام بذلك. نحن نحافظ على عرض محدود، والذي يتوافق مع الطول الأمثل للقراءة.
إعجابَين (2)
لقد اختبرت للتو (على الهاتف المحمول) ويعمل بشكل جيد بالنسبة لي. هل هناك أي شيء في وحدة التحكم؟ أو هل يمكنك تجربة متصفح مختلف للتحقق؟
إعجاب واحد (1)
شكرًا @chapoi! وحدة التحكم الخاصة بي:
إعجاب واحد (1)
حسنًا، نعم يمكنني بالتأكيد إعادة إنتاج المشكلة. أعتقد أن السبب هو نقل Horizon إلى النواة (core) على الأرجح. سأحتاج إلى معرفة كيفية إصلاح رابط المعاينة، إن كان ذلك ممكنًا على الإطلاق. (سيكون المعاينة على ميتا (Meta) هي الأسهل - تم تحديث الموضوع)
ومع ذلك، يمكنك معاينته هنا على ميتا (Meta) عن طريق التبديل إلى السمة.
إعجابَين (2)
شكراً جزيلاً، لقد نجح الأمر الآن!
إعجاب واحد (1)
لوحة التحكم: نص الزر غير مرئي افتراضيًا + عدم محاذاة التخطيط في “أهم المواضيع المحالة” و “مصطلحات البحث الشائعة”
مرحباً،
أنا أستخدم سمة Horizon وقد حددت عدة مشكلات في واجهة المستخدم في لوحة تحكم المسؤول، وتحديداً في أقسام أهم المواضيع المحالة ومصطلحات البحث الشائعة.
المشكلة 1: نص الزر غير مرئي حتى التمرير فوقه
الموقع: الأزرار في كلا القسمين (على سبيل المثال، “عرض الموضوع”، “مشاهدة مصطلح البحث”)
السلوك المتوقع: يجب أن يكون تسمية الزر مرئية في جميع الأوقات (الحالة العادية).
المشكلة 2: عدم توازن عرض العمود والتفاف النص
الموقع: أعمدة الجدول في كلتا الأداتين
التخطيط الملاحظ:
عمود الموضوع / المصطلحات: ضيق جداً ← تتغير العناوين الطويلة إلى أسطر متعددة عمودياً (على سبيل المثال، نص متعدد الأسطر داخل صف واحد).
الأعمدة الرقمية (المشاهدات، النقرات، عمليات البحث، إلخ): واسعة جداً ← مساحة بيضاء مفرطة.
مشكلة إضافية: القيم الرقمية محاذاة لليمين (الافتراضي للأرقام)، ولكن في سياقات اتجاه النص من اليمين إلى اليسار (مثل الفارسية/العربية)، يخلق هذا تناقضاً بصرياً. لتحسين تجربة المستخدم في اللغات التي تُقرأ من اليمين إلى اليسار، يجب أن تظل الأعمدة الرقمية محاذاة لليمين، ولكن يجب أن تكون أعمدة الموضوع/المصطلحات محاذاة لليسار — حالياً تبدو محاذاة لليمين في سياق اليمين إلى اليسار، مما يسبب عدم محاذاة.
شكراً لعملكم على سمة Horizon.
إعجاب واحد (1)
شكرًا على هذه التقارير، سيتم إصلاحها!
ولكن في المرة القادمة: بعض لقطات الشاشة مفيدة جدًا لتحديد ما يدور حوله الأمر بشكل أسرع من النص.
إعجاب واحد (1)
حاوية إعلان الهاتف المحمول تفيض بسبب عدم تطابق تخطيط RTL/LTR
مرحباً،
أنا أستخدم سمة Horizon مع إضافة House Ads الرسمية، وقد قمت بإنشاء مكون مخصص لتنسيق الإعلانات باستخدام متغيرات CSS وقواعد التخطيط المتوافقة مع نظام تصميم Discourse.
المشكلة: تجاوز حاوية الإعلان لعرض الرؤية على الهاتف المحمول (لكل من LTR و RTL)
- السمة: Horizon (غير قابلة للاستنساخ في السمة الافتراضية أو السمات الأخرى مثل Material، إلخ.)
- الإضافة: House Ads + مكون مخصص
- الجهاز: الهاتف المحمول
- السلوك:
- عندما تكون لغة الموقع = الإنجليزية (LTR) ← يتم قص الحافة اليسرى لـ
.ad-container(تفيض إلى اليسار). - عندما تكون لغة الموقع = الفارسية/العربية (RTL) ← يتم قص الحافة اليمنى (تفيض إلى اليمين).
- عندما تكون لغة الموقع = الإنجليزية (LTR) ← يتم قص الحافة اليسرى لـ
- المتوقع: يجب أن تكون بطاقة الإعلان محتواة بالكامل داخل عرض الرؤية، ومُتوسطة أو محاذية لعرض محتوى المنشور.
كود CSS الخاص بي:
ملخص
:root {
/* ألوان أساسية */
--ad-bg: var(--secondary);
--ad-border: var(--highlight);
--ad-text: var(--primary);
/* التسمية */
--ad-label-bg: var(--highlight);
--ad-label-text: var(--danger);
}
.house-creative {
margin-left: 0 !important;
}
.house-creative a.between-posts-ad {
display: block;
text-decoration: none;
color: inherit;
background-color: transparent;
font-family: inherit;
}
/* ===============================
حاوية البطاقة
=============================== */
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
margin-bottom: 20px;
padding: 10px 5px;
max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
border: 2px solid var(--ad-border);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.7;
color: var(--ad-text);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.2s ease;
}
.house-creative a.between-posts-ad:hover .ad-container {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.house-creative .ad-label {
display: inline-block;
text-align: center;
margin-bottom: 6px;
padding: 4px 12px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
background-color: var(--ad-label-bg);
color: var(--ad-label-text);
border-radius: 999px;
}
.house-creative .ad-container .ad-text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ad-text);
direction: rtl ;
text-align: center !important ;
unicode-bidi: isolate;
}
@media (max-width: 480px) {
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
padding: 16px 12px;
width: 100%;
max-width: 100%;
}
}
Horizon ليس متوافقًا مع جميع المكونات والإضافات (بعد).
إعجاب واحد (1)