بطاقات الموضوع

[Discourse]

	ملخص	بطاقات الموضوعات تعيد تصميم قائمة الموضوعات لعرضها كبطاقات مع صورة مصغرة
: eyeglasses:	معاينة	معاينة على منشئ سمات Discourse
: hammer_and_wrench:	المستودع	\u003chttps://github.com/discourse/discourse-topic-cards\u003e
: open_book:	جديد على سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

نظرًا لأن هذا مكون سمة #رسمي تحتفظ به فريق Discourse، يمكن تقديم طلبات #الدعم، #الأخطاء، #تجربة_المستخدم، و #الميزات في الفئات المعنية هنا على Meta، ووضع علامة عليها بعلامة مكون السمة المناسبة. انقر على أحد الروابط أدناه لبدء أحدها.

\u003ckbd\u003e \u0026nbsp;الدعم \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;خطأ \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;تجربة المستخدم \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;ميزة\u003c/kbd\u003e

\u003e قد يسبب مكون السمة هذا تعارضًا مع التخصيصات الأخرى لقائمة الموضوعات

الميزات

يستلهم هذا المكون من صور مصغرة للموضوعات، ويبسط الاستخدام، ويضيف مقتطفات ونقرات على البطاقة الكاملة، ويضيف بعض السحر الإضافي لـ CSS.

• اجعل البطاقة الكاملة قابلة للنقر (باستثناء صورة ملف تعريف المنشئ الأصلي)
• عرض المقتطف
• عرض صورة مصغرة للموضوع، إذا كانت متاحة
• عرض تاريخ النشر
• إزالة بعض البيانات الوصفية وجعل الإعجابات أكثر بروزًا

سطح المكتب

الهاتف المحمول

الإعدادات

الترجمة	الافتراضي
published	Published

\u003cbr\u003e

\u003e:discourse2: مستضاف بواسطة؟ مكونات السمة متاحة للاستخدام على خططنا القياسية، والأعمال، والمؤسسات.

[Moin]

الخط الأزرق العمودي يغطي أجزاء من النص

(لا يبدو أنه يعتمد على المتصفح/الجهاز، لقد جربت Edge/Windows و Chrome/Android و Firefox/Android)

[frold]

عمل بشكل مباشر في كروم على ويندوز وكروم على آيفون 8

[chapoi]

@Moin

يغطي الخط الأزرق العمودي أجزاء من النص

صحيح، نسيت هذا. سأقوم بإصلاحه - شكراً لك

[jayme]

كيف يمكنني التخلص من علامتي التبويب “الردود” و"النشاط" أسفل زر “+ موضوع جديد”؟
إنها تجعل موضوعي قصيرًا جدًا ويبدو سيئًا هههه

[Lilly (Lillian Louis)]

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

[chapoi]

لا تعمل خاصية Border/box-shadow بشكل جيد مع البطاقات، لذلك كان لا بد من الارتجال قليلاً للحصول على مؤشر بديل

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

لذلك اضطررت إلى الارتجال قليلاً للحصول على مؤشر بديل

بطريقة ما لا أرى أي مؤشر الآن

[chapoi]

هل تستخدم أوامر j/k للتنقل؟

[Moin]

لا، لقد استخدمت علامة الجدولة للتو. حسنًا، لقد استخدمت جهازي اللوحي في الواقع. بعد استخدام زر الرجوع، عادةً ما يتم تمييز المنشور. لم يحدث هذا هنا. لقد جربت هذا على الكمبيوتر فقط للتسجيل.

[derak (Cristian Deraco)]

مكون سمة رائع!

[Gonerdot]

لقد حاولت تثبيت هذه المكونات على العديد من السمات، لكنها تبدو ملتوية قليلاً في كل مكان. ما الخطأ الذي أرتكبه؟

[chapoi]

من الصعب تحديد ذلك. يبدو أن ارتفاع البطاقات مقيد بطريقة ما، والمحتوى أكبر من المعتاد.

هل يمكنك التحقق أولاً من أنه ليس بسبب تعارض مع مكونات أخرى أو سمة؟ أرى أن الشريط الجانبي الأيمن ممكّن لديك أيضًا وقد يؤثر ذلك على بعض حسابات الحجم ربما.

لذا يرجى التحقق من ذلك وإخباري؟

[Gonerdot]

لقد قمت بتعطيل جميع المكونات الأخرى، لكن المشكلة لم تُحل.

[chapoi]

غريب! هل يمكنني إلقاء نظرة على المنتدى الذي قمت بتثبيته عليه؟

[Gonerdot]

bearblog.ru

ولكن تحتاج إلى تغيير السمة إلى dracula في إعدادات ملفك الشخصي.

[chapoi]

شكرا، سألقي نظرة!

[Gonerdot]

يبدو لي أن المشكلة يمكن حلها عن طريق تحديد عدد الأحرف في المعاينة، لكنني لا أعرف كيف أفعل ذلك

[chapoi]

حسنًا، تحتاج بطاقات الموضوع إلى max-height، وإلا فستواجه مشكلات مثل:

لا يمكنني معرفة سبب عدم ملاءمة بطاقتك بشكل جيد، لأنه في المثال الموجود في منشئ السمات، يمكنني أيضًا استخدام عناوين متعددة الأسطر ولا تزال مناسبة:

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

الحل الممكن هو، كما قلت، قصر العنوان على سطر واحد فقط، والذي يمكنك القيام به عن طريق إضافة CSS هذا:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;

     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}