تفاصيل تغييرات تنسيق الموضوع - ملاحظات

[quote=“Jarek Radosz, post:28, topic:285364, username:cvx”]
(وهو ليس نفس أيقونة شيفرون؟ :eyes:)
[/quote]أنت لست مخطئًا، ولكن الخطأ يكمن في الطريقة المختلفة التي تم بها إعداد هذه المكونات، حيث يستخدم أحدهما d-icon والآخر لا يسهل ذلك في الوقت الحالي. أود أن أرى ذلك يتغير، لذا لا تتردد في المساعدة إذا كنت تعرف كيف.

[quote=“Jarek Radosz, post:16, topic:285364, username:cvx”]
عنصر الزر/الملخص يأخذ مساحة أكبر (سابقًا كان عنصرًا شبه مضمن)
[/quote]مع التصميم الجديد، سيحتاج إلى مساحة أكبر، لكنني أتفق على أن الحشو الحالي مفرط.

[quote=“Jarek Radosz, post:28, topic:285364, username:cvx”]
أيضًا إضافة إلى 2.
فيما يتعلق بالاتجاه الذي تشير إليه الأيقونة: نظرًا لأنها تعمل كمفتاح تبديل، ألن يكون من المنطقي عكسها بحيث تشير إلى الحالة الحالية بدلاً من الإجراء/الحالة المستقبلية (ينطبق هذا أيضًا على زر “الردود”)
[/quote]كان هذا نقاشًا مستمرًا بين المصممين منذ بداية المفتاح. لا توجد إجابة صحيحة أو خاطئة.


Screenshot 2023-11-14 at 1.48.35 PM

كانت هذه إحدى الأفكار من جلسة التصميم التي أعجبتني شخصيًا كثيرًا. إنها تحل (بعض) ملاحظات sam و cvx. سأجرب هذا في التكرار التالي.

3 إعجابات
أفكاري حول هذا حتى الآن...

يبدو جيدًا جدًا بالنسبة لي!

4 إعجابات

أعتقد أن السهم سيكون أفضل على اليسار. أعتقد أن معظم الناس لن يروه على اليمين. يبدو كنص عادي (نوعًا ما مثل كتلة التعليمات البرمجية) ما لم يمر الماوس فوقه. كدت أن أفوت رؤيته.

3 إعجابات

(14. :wink:) يعني الإضافة الأخيرة لمعالج النقر أن النقر على رابط، أو استخدام زر نسخ الرمز، أو محاولة توسيع صورة، أو حتى محاولة تحديد أي نص سيؤدي إلى انهيار كتلة التفاصيل… :flushed_face:

4 إعجابات

أتفق تمامًا مع هذا. لقد كدت أن أفوت قراءة كتل تفاصيل متعددة في الأيام القليلة الماضية. أعتقد أن السبب هو أنها تبدو مشابهة لكتل التعليمات البرمجية عند النظرة الأولى.

هذا ليس كود

فارغ

هذا كود
8 إعجابات

غريب، النقر على رابط يعمل بالنسبة لي. يغلق التفاصيل ولكن الرابط يفتح أيضًا. لم أجرب السيناريوهات الأخرى. وأوافق على أنه يمكن تحسينه ببعض أعمال JavaScript أكثر دقة :winking_face_with_tongue:

بخصوص موضع السهم، @jordan.vidrine ما رأيك؟
هل أقوم بتكرار آخر؟ ربما كما كان في ذهني في الأصل، مع المثلث العادي بدلاً من السهم وفقط خلفية عند الفتح؟

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

أعتقد أنه لا يزال ينبغي استخدام السهم، ولكن يبدو أن وضعه على اليسار فكرة جيدة.

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

هل تشير إلى شيء آخر؟ لم نضف معالج نقر هنا.

كان هناك معالج. قام تشارلي بإزالته اليوم في 2c941c4. :slightly_smiling_face:

ها! واو، كنت أتساءل ما الذي كان يفعل هذا. مباشرة في الصميم ولم أره

إعجابَين (2)

نعم، لقد أعجبتني حقًا فكرة القدرة على التحويم في أي مكان > تمييز > النقر للإغلاق، بدلاً من القدرة على النقر فقط على جزء الملخص، لكنني أغفلت انتشار النقرات الأخرى :woman_facepalming:

من السهل جدًا أيضًا تفويت التفاصيل في الاقتباسات، لأن تمييز الخلفية غير مرئي تقريبًا والرمز المائل بعيد عن النص

5 إعجابات

بعض الأفكار الدقيقة حول التكرار الأخير…

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

توسيط

خط الأساس

هل يجب أن تتطابق المسافة مع علامات الاقتباس؟ يبدو الجزء العلوي ضيقًا قليلاً في الوقت الحالي

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

details > :last-child {
  padding-bottom: 0;
}

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

Summary

This text will be hidden

أعتقد أنه يمكننا ربما الحصول على نوع من المتغير الذي يمكن أن يساعد في ذلك… إذا كان details يحتوي على الخلفية المعينة بواسطة شيء مثل

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

ثم يمكن للاقتباس أن يتجاوزه… ربما يمكننا حتى الحصول على متغير عام “يحتاج إلى أن يكون أغمق” في الاقتباس؟ لا أتذكر ما إذا كان لدينا مواقف أخرى مثل هذه…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg);
}
4 إعجابات

100% هذا - إذا لم يكن السبب حاليًا، فهذا مجرد خطأ

3 إعجابات

أحب استخدام شيء مثل rgba(var(--primary-rgb),0.25) لهذا الغرض لأنه يجعل الخلفية الحالية للعنصر الذي تم تضمينه فيه أغمق قليلاً.

إعجابَين (2)

بشكل عام، أشعر أن أحدث تكرار قريب جدًا من أن يكون جاهزًا للشحن :hugs:

هناك اعتراض بسيط لست متأكدًا مما إذا كان يمكن حله:

ليس عائقًا بأي حال من الأحوال، لكن اللوحة الرمادية تجعلك تعتقد أنك تنظر إلى كيان واحد.

3 إعجابات

نعم، أنا متأكد من أنه يمكننا حلها ربما بحدود أو شيء من هذا القبيل لجعلها أكثر وضوحًا. سألقي نظرة اليوم.

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

بشكل عام، تعجبني. ومع ذلك، لفت هذا الاقتراح انتباهي.

أحيانًا يبدو اختيار لون خلفية عنصر نصي وكأنه البحث عن الدرجة المثالية من اللون الرمادي الفاتح.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

لكن يبدو أنك قريب، وبشكل عام، تعجبني.

5 إعجابات

أنا أضيف نفس تعتيم الخلفية لكتلة التعليمات البرمجية كما هو الحال بالنسبة لاقتباس الكتلة

هذا يجب أن يحل المشكلة يا @sam

إعجابَين (2)

شيئان آخران (15. و 16. إذا أردت :wink:)

  • منطقة النقر الفعلية لعنصر الملخص أصغر من العنصر الذي يغير المؤشر ويبرز عند التحويم
  • بسبب لون الخلفية عند التحويم والتغيير التالي عند توسيع عنصر - هناك وميض قصير للون الخلفية عند توسيع عنصر

تعديل:
17. تباين بين منشور معروض والمنشئ:


مقابل

إعجابَين (2)