كيفية تحقيق تخطيط جنب إلى جنب لمشاركات الموضوع مثل هذا؟

أود تحقيق تخطيط جنباً إلى جنب لمثيل Discourse الخاص بي (انظر الصورة المرفقة). هل يمكن لأي شخص إرشادي حول كيفية القيام بذلك؟ أقدر أي مساعدة يمكنك تقديمها!

إعجابَين (2)

ربما Flexboxes في CSS؟ فقط من الأعلى. ثم ربما استخدام API/requests لجلب بيانات أخرى مثل عدد المنشورات.

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

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

لقد حاولت بعض التجارب الأساسية على فليكس بوكس لكن ذلك فقط أدى إلى كسر التخطيط.

مرحبًا @Canapin! بشكل أساسي أريد تفاصيل مؤلف المنشور على اليسار ومحتوى المنشور على اليمين بدلاً من أن يكونوا واحدًا فوق الآخر مثل تصميم discourse الإفتراضي.
سيكون من المفيد إذا كانت هناك أي تعديلات لهذا الأمر.

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

أتفق معك، لا يمكنك إعادة تموضع هذه العناصر بطريقة نظيفة باستخدام CSS. يتم ترتيب الصورة الرمزية والبيانات الوصفية الافتراضية بشكل منفصل في القالب:

أتساءل كيف يتم ذلك فعليًا في منتديات Epic. هل هذا تجاوز للقالب؟ لا أرى أي منفذ إضافي في هذا الموقع:

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

من ما أراه، أعادوا إضافة البيانات (اسم المستخدم، وما إلى ذلك) بعد محتوى أداة post-avatar، وأضافوا عرضًا إلى .topic-avatar، ويخفيون بقية الأشياء باستخدام CSS عدا التاريخ. دعني أرى إذا كان بإمكانني إعادة إنتاج ذلك.

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

يمكنك تجربة مكون السمة الأساسي هذا: GitHub - Arkshine/discourse-topic-avatar-vertical-layout.

  • عرض سطح المكتب فقط
  • إنه متوافق مع التعديلات الأخرى [1]
  • لا يتم تضمين عدد المشاركات. تحتاج إلى إضافة مكون إضافي، مثل هذا: GitHub - Arkshine/discourse-user-post-count.

أخبرني إذا واجهت أي مشاكل.


  1. يقوم بنقل عنصر poster-name أسفل عنصر post-avatar. لا توجد تغييرات أخرى بخلاف تعديلات CSS. ↩︎

9 إعجابات

لقد نجح الأمر بشكل رائع! شكراً جزيلاً يا صديقي.

إعجابَين (2)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.