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


حالياً، الصفحة الرئيسية تظهر بشكل غير صحيح على هاتف Samsung S23 Ultra. منشور واحد يتسبب في تجاوز النص وكسر التخطيط بالكامل.

هل هذه المشكلة ناتجة عن المنشور نفسه أم عن خطأ في مكون القالب؟

شكراً لك!

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

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

إذا كان الرابط بالتنسيق maps.google.com، فإنه يعمل بشكل جيد.

إعجابَين (2)

هل المكون Topic Cards يستعد لـ https://meta.discourse.org/t/upcoming-topic-list-changes-how-to-prepare-themes-and-plugins/343404؟ لقد قمت للتو بترقية discourse وحصلت على إشعار للمسؤولين يقول إن هذا المكون يحتاج إلى تحديث.

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

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

آه، صحيح! خطأي. لقد نسيت أننا نقوم بتشغيل GitHub - communiteq/discourse-topic-cards: This changed the topic list into cards with a modified layout, and a thumbnail if available.. https://github.com/communiteq/discourse-topic-cards

@RGJ آسف لإزعاجك، هل تعرف ما هو الفرق الحالي بين نسختك المستودع الرئيسي؟

إعجابَين (2)

نعم، المستودع الرئيسي تتم صيانته بشكل صحيح… سأقوم بالتعامل مع هذا في بداية الأسبوع المقبل.

إعجابَين (2)

الإصدار المحمول، لسبب ما، معطل عندما يتم تفعيل مكون ‘مقتطف الموضوع’ وأيضًا بدون ذلك (لدي مصلحتان بوجود هذا المكون وبدونه وكلها كُسرت) ¯\_(ツ)_/¯ لذلك هذا CSS كافٍ

ملاحظة: قم بلصق هذا الكود في ملف SCSS الخاص بالهاتف المحمول من لوحة الإدارة

.topic-card__excerpt-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    white-space: normal !important; 
}

.topic-card__excerpt {
    max-width: 100% !important;
    overflow: hidden !important;
}

.topic-list-item {
    overflow: hidden !important;
    max-width: 100% !important;
    white-space: normal !important;
}

td {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
}
إعجابَين (2)

كيف يمكن تطبيق هذا على فئة واحدة فقط، أو قائمة فئات، مثل صور مصغرة للمواضيع؟

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

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

نعم، هذا شيء سنحتاجه بالتأكيد أيضًا. @jordan-violet هل قمت بما اقترحه @manuel

ليس لدي الخبرة التقنية للقيام بذلك. :disappointed_face:

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

لقد اتخذنا اتجاهًا مختلفًا أعجبنا أكثر. نستخدم Topic List Thumbnails ثم أضفنا بعض CSS الخاص بنا لجعله يبدو/يتصرف بالطريقة التي أردناها. يمكنك رؤيته أثناء العمل هنا:

5 إعجابات

يبدو جيدًا

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

هذا يعني الكثير قادمًا منك! شكرًا!

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

هل لديك فكرة لماذا بعض العناوين سوداء بينما البعض الآخر أزرق؟ لقد قرأت جميع المواضيع الثلاثة.

ها! أجبت على سؤالي بنفسي بعد النشر مباشرة. اللون الأسود يدل على وجود ردود غير مقروءة. ولكن بما أن فقاعة # موجودة هناك، فمن المحتمل أنها لا تحتاج إلى تمييز اللون أيضًا.

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

إذا كنت أريد أن يكون للبطاقات المواضيعية نفسها لون مختلف عن بقية الخلفية، فما هو CSS الذي يجب أن أقوم بتغييره؟

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

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

[اقتباس=“tknospdr, المشاركة:78، الموضوع:296048”]
ماذا سأغير في CSS؟
[/اقتباس]

انقر بزر الماوس الأيمن على العنصر الذي ترغب في تغييره واختر فحص (inspect). ستفتح أدوات مطوري المتصفح (browser devtools) ويجب أن ترى محدد CSS (CSS selector)

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

شكرًا، لقد أضفت:

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

وهو يعمل بشكل مثالي مع لوحة ‘Shades of Blue’ (ظلال الأزرق) الافتراضية.

حسنًا، الجزء الثاني. كيف يمكنني تعديله ليعمل مع مجموعتي ألوان؟ بدا جيدًا حتى تحول المتصفح إلى الوضع الداكن.

أجيب على سؤالي بنفسي مرة أخرى…

لقد تعلمت عن @media (prefers-color-scheme: light/dark) الليلة الماضية، لذا كل شيء على ما يرام.

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

شكرًا جزيلاً @eisammy!!!
لقد كنت أواجه مشكلات في هذا الأمر وأكاد أفقد صوابي!
لسبب ما، لا يمكنني الحصول على أي روابط خارجية لـ onebox، لذا فإن الرابط الطويل في المقتطفات قام بتمديد النص بشكل فعال خارج الصندوق وأفسد واجهة المستخدم لموقعي. بمساعدتكم، تم حل المشكلة!

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

هناك شيء يحدث مع هذه المكونة: إذا نقرت على عنوان الموضوع، فإنه يعيد تحميل الصفحة حتى بعد الانتقال إلى الصفحة كما هو متوقع مع Discourse. لذا، يتم تحميلها للمرة الأولى، ثم يتم إعادة تحميل الصفحة مرة أخرى دون سبب واضح. لقد قمت مؤخرًا بالتحديث إلى الإصدار الحالي واختبرت جميع الاحتمالات عدة مرات، ولم يتوقف السلوك غير العادي إلا بعد تعطيل المكونة.

Discourse 3.5.0.beta7-dev - https://github.com/discourse/discourse version 773ae006b7d4315c01a37170b1ebad27332d515e

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

هل هناك أي فرصة أن يأتي هذا في المستقبل؟