تحديث سمة Foundation

يعمل فريق التصميم على إجراء تغييرات/تعديلات صغيرة ولكنها قوية على سمة foundation (الأساس) لمواءمتها بشكل أوثق مع معايير الويب الحديثة. لعرض هذه التغييرات مباشرة على meta، انضم إلى هذه المجموعة:

https://meta.discourse.org/g/modernized-foundation

سنقوم بتطبيق هذا التغيير مباشرةً من خلال ميزة Upcoming Changes (التغييرات القادمة) المتاحة في Discourse. سيتيح هذا لمالكي المواقع تمكين التغييرات لأي مجموعة يحددونها، وذلك لاختبار طرح التغييرات دون الخوف من إمكانية إتلاف السمات أو التخصيصات الحالية.

ما الذي سيتغير؟

تقلص ارتفاع الرأس (Header)

لقد قللنا حجم الرأس إلى جانب بعض الأيقونات والصورة الرمزية (avatar) قليلاً للاستفادة من مساحة الشاشة.

الأزرار الافتراضية (Default buttons)

ننتقل من خلفية زر رمادية افتراضية إلى خلفية شفافة / “ثانوية” مع حدود.

  • إزالة الخلفية الرمادية
  • إضافة حدود
  • يتطابق لون الأيقونة مع لون النص
  • أصبحت الأزرار الآن ذات ارتفاع محدد

زر إنشاء موضوع جديد في صفحة قائمة المواضيع

مطابقة لـ Horizon وإعطاء هذا اللون الخلفي لـ “دعوة لاتخاذ إجراء” (CTA) وهو tertiary (ثالثي).

إزالة الكثير من الخلفيات الرمادية

قائمة المواضيع

  • إزالة الحد العلوي السميك بحجم 3 بكسل
  • تقليل حجم خط بيانات رأس الجدول
  • لون متسق لعناصر بيانات الجدول
  • تغيير قيمة اللون للقراءة/غير مقروء
  • زيادة طفيفة في وزن الخط للعناصر غير المقروءة

الفئات (Categories)

  • محاذاة النص إلى اليسار
  • إزالة الحد الملون السميك الأيسر
  • شارات مستديرة قليلاً
  • حد أرق على الصندوق

شريط التنقل (Nav bar)

  • ستكون أقراص التنقل في صفحات قائمة المواضيع بنفس ارتفاع الأزرار في هذه المنطقة
  • لون نص وأيقونة أغمق على المجموعة المحددة (select kit)

الشريط الجانبي (Sidebar)

  • يتطابق لون الأيقونة والنص
  • نص وأيقونات أغمق
  • خلفية “نشط” أفتح
  • وزن خط نشط أثقل

لافتة الترحيب (Welcome banner)

  • مسافات متوازنة
  • تمت إضافة متغيرات لتسهيل المحاذاة لليسار/اليمين/الوسط عبر التخصيص
  • انخفاض وزن خط العنوان
  • انخفاض حجم خط العنوان الفرعي

التقويم (Calendar)

  • إزالة الخلفية الرمادية من “الأزرار”
  • استخدام اللون الرمادي فقط للإشارة إلى “نشط”
  • التبديل إلى نمط زر “شفاف ذو حدود”

القوائم المنسدلة (Drop downs)

  • تمت إضافة مسافة بادئة إلى حاوية القائمة المنسدلة
  • يتطابق الارتفاع والمسافة والفجوة الآن مع عناصر الشريط الجانبي
    • توحيد “القوائم القابلة للنقر”
  • يرث الحد المتغير --d-border-radius

متغيرات جديدة (New Variables)

سيتم تقديم بعض التغييرات هنا من خلال متغيرات إضافية تمت إضافتها إلى core (الأساس).

محاذاة لافتة الترحيب

ستتمكن الآن من تغيير محاذاة لافتة الترحيب عبر:

// الافتراضي
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// مخصص
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

ارتفاع الزر

سيكون لدينا الآن ارتفاع زر محدد عبر:

// الافتراضي
  --button-height: var(--space-8);

تنعيم الخط (Font smoothing)

نحن نقوم بذلك بالفعل في Horizon، ومن المنطقي إحضاره إلى foundation.

// الافتراضي الجديد
--webkit-font-smoothing: antialiased;
29 إعجابًا

تحتوي قائمة زر الـ gist المنسدلة على شريط تمرير (ربما overflow على fk-d-menu)، ومن المحتمل أنها لا تحتاج إلى نفس min-width: 200px مثل فئات dropdown-menu الأخرى المماثلة.

تعديل: لا تهتم، تم الإصلاح بالفعل :smiley:

6 إعجابات

أستطيع رؤية سمة الأساس الحديثة، ولكن لماذا لا يزال لدي تخطيط الفئات القديم؟

أعتقد أن ميتا (Meta) لا تستخدم “صناديق مع فئات فرعية” بل “فئات فقط” في إعداد موقعها المسمى Desktop category page style.

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

عفوًا، افترضت أن لقطات الشاشة أُخذت على ميتا (meta) ولكني لم أفكر حتى في التحقق من ذلك.


سلوك غريب ولكنه بسيط. في السمة العادية، عندما نرفع زر الماوس عن ، يتم تشغيل الرسوم المتحركة لإظهار الشريط الجانبي أو إغلاقه على الفور.

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


هل يمكنني مغادرة المجموعة لمقارنة التغييرات مع السمة القديمة؟ لا أرى خيار المغادرة.

إعجابَين (2)

أوه نعم، لقد أصلحت ذلك… يجب أن تكون قادرًا على المغادرة حسب الرغبة الآن

4 إعجابات

هل تسمح لي بمغادرة مجموعة @modernized-foundation.
تعديل: الآن، بعد مغادرة المجموعة، يمكنني إضافة لقطة شاشة للمقارنة لزر الموضوع الجديد.
image

يبدو أن بعض ألوان الأيقونات لا تعمل جيدًا مع لوحة ألوان WCAG.
image

وعلى سبيل المثال، محدد المجموعة في أعلى اليسار من صفحة المجموعة لا يدعم سطرين حقًا.

هذا ما تبدو عليه عندما أسجل الخروج.

إعجابَين (2)

أعجبني معظم التغييرات. إنها دقيقة. بعضها لا أرى الفرق فيه إلا إذا نظرت إلى قيم CSS :smile: (ألوان أيقونة وشريط الشريط الجانبي، ألوان قراءة الموضوعات وغير المقروءة)

قبل / بعد
image image

أعجبني زر الموضوع الجديد المُشدد عليه. لقد قمت بتخصيصه بهذه الطريقة في منتدى خاص بي منذ وقت طويل (حتى تعطل الكود الخاص بي ولم أهتم بإصلاحه).


قبل / بعد


أعجبني هذا أيضًا؛ على الأقل في اللوحة الداكنة، كان اللون الأزرق الداكن على الرمادي الداكن مزيجًا غريبًا.


قبل / بعد

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

4 إعجابات

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

ولكن بمجرد تقليل العرض قليلاً، تبدو “الردود” و “النشاط” كبيرة جدًا (هذه مشكلة أيضًا في /latest)

هناك مشكلة مماثلة مع “تم التحديث” و “النشاط” في /my/activity/bookmarks

مثال آخر حيث لا يتطابق لون الأيقونة مع لون النص هو زر التوسيع في ملفي الشخصي

هذا ما يبدو عليه عندما أغادر المجموعة:

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

5 إعجابات

شكرًا جزيلاً لك على قبل/بعد. اعتقدت أنها مفقودة من المنشور الأصلي.

كلا هذين التغييرين يبدوان غريبين: الجانب بعد يبدو أقل تباينًا وقد يسبب مشاكل في إمكانية الوصول (A11y)، أليس كذلك؟

أنا متوجه إلى المجموعة الجديدة لتجربة قيادة!

إعجابَين (2)

تظهر كلمة “link” (رابط) في خريطة الموضوع جزئيًا فقط بعد انضمامي إلى المجموعة:

لقطة الشاشة مأخوذة من Add link to sidebar category setting to new admin menu in categories section of the sidebar

والنص في هذا المربع الحواري يصعب قراءته عند التمرير فوقه. أعتقد أن التباين كان أفضل من قبل

أتطلع إلى هذا التغيير في النمط الافتراضي، متى سيتم إصداره تقريبًا؟

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

مدخل البحث وزر الإرسال مضغوطان!

squish!

تعديل: على الهاتف المحمول فقط

3 إعجابات

كل الملاحظات/اكتشافات الأخطاء رائعة حتى الآن. شكرًا على التحديثات.

4 إعجابات

هذه ملاحظة جيدة. أعتقد أن ألوان الأزرار الجديدة لطيفة أيضًا، ولكن لسبب ما في هذا القسم (مع وجود الكثير منها معًا)، لا تبدو مناسبة تمامًا.

4 إعجابات

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

يبدو لي غليظًا بعض الشيء.

لقد أعجبني أن ديسكورس (Discourse) اختارت في الغالب مجرد تغيير في اللون، وهو ما بدا أكثر أناقة من اختلاف الوزن التقليدي الذي نراه في العديد من برامج المنتديات.

الآن لدينا كليهما. الفرق دقيق، ولكني أفضل مجرد تغيير في اللون :paintbrush:

3 إعجابات

من المفترض أن تكون أحدث مجموعة من التغييرات متاحة قريبًا من طلب السحب هذا: