مظهر مادة Daemonite: تعديلات واسعة على التخطيط

الدافع

تعديل التخطيط العام لـ Daemonite Material Theme ليصبح أكثر جرأة قليلاً، وذلك بشكل رئيسي من خلال استخدام أحجام خطوط أكبر وأبعاد عناصر أكبر. من ناحية أخرى، قلل بعض أحجام الخطوط لتحسين العرض على الأجهزة المحمولة.

الخلفية

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

التفاصيل

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

لقطات الشاشة

انظر أدناه.

الإعداد

التثبيت

التكوين

حاليًا، لا يحتوي مكون الموضوع هذا على أي إعدادات تكوين.

7 إعجابات

Some screenshots by example…


Topic item (verbose)

Larger font size, don’t limit avatar size.

Before

image

After

image


Topic item (narrow)

Before

image

After

image


Category item

Removed font size limitation on category title and description.

Before

image

After

image


Title sizes on topic page / in header

Decreased font size here. Especially on mobile, this makes a huge difference.

Topic title on desktop

Before

After

Topic title on mobile, before/after

 

Header/title layout on mobile

Before

image

After

image


Increase topic post item width

Before

After

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

When combining this with some other tweaks using the Category badge adjustment component, which is basically about making the corners of the category badges less rounded and emphasizing the category label, you will get these results:

Before

image

After

image

إعجابَين (2)

I’m guessing there is a bit more to it :stuck_out_tongue:

Using Safari 12.0.2:

إعجابَين (2)

That’s probably due to our amendments in Daemonite Material Theme: Ample layout adjustments. We really didn’t know what we were doing actually. Thanks for noticing!

Bummer. This indeed works fine with Safari Version 11.0.3, the only one available to me. Haven’t been able to look at this through Safari 12.x yet.

I would like to avoid spamming the main topic when working on this, so could someone from the Discourse team please divert this discussion (i.e. the last three topic items) to Daemonite Material Theme: Ample layout adjustments? Thanks!

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

Here we are. Thanks, @Johani!

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

I will be happy to run further tests and report back if you provide me with instructions.

Thanks @_vincent. I just gave it a try on browserstack.com as there’s no Safari 12.x currently around us.

Results for Safari 11.1 and 12.0

https://www.browserstack.com/screenshots/9438a3becc3af763386c60bd955bf1c91bd78ae2

Thumbnails


OS X High Sierra: Safari 11.1


OS X Mojave: Safari 12


This looks reasonably good to me. Do you have an idea what could have gone wrong? Do you have more details about your devices or setup, if this might actually matter resolving this issue? I feel a bit silly now.

Did you switch back to default theme?

Currently yes, in order to investigate the brand header overlapping issue on the account activation page reported by @LittleLebowsky.

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


الصورة الرمزية للنظام غير صحيحة