تخطيط صناديق الفئات لا يتطابق مع تخطيط القائمة

[rogerco]

إليك بعض لقطات الشاشة:

1. الفئات الافتراضية مع المواضيع المميزة
   
   
   
   بالمناسبة، الشعارات هنا كبيرة جدًا، مما يتسبب في إضاعة مساحة كبيرة — أفضل تقليص ارتفاعها إلى 75 بكسل
2. الصناديق الافتراضية مع الفئات الفرعية
   
   
   
   لاحظ أن بعض فئاتي الفرعية تحتوي على صور شعارات معروضة.
   التخطيط يهدر مساحة كبيرة — حيث يُقيد شعار الفئة بـ 40 بكسل، لكنه موزون في المنتصف فوق العنوان. كما أن شعارات الفئات الفرعية لا تحترم نسبة العرض إلى الارتفاع (حسابات --aspect-image لا تعمل وهي غير ضرورية في الأساس، فإذا ضبطت الارتفاع فقط، ستُحترم النسبة إذا توفرت المساحة الكافية).
   شعارات الفئات الفرعية كبيرة أيضًا، مما يخلق مسافات بين الأسطر.
3. تعديلي الخطوة الأولى
   
   
   
   الشعار يطفو على يسار العنوان الذي يكون في منتصف المساحة المتبقية.
   الفئات الفرعية تظهر سطرًا واحدًا لكل منها مع شريط ملون وأيقونة قفل، لكن شعارات الفئات الفرعية غير معروضة (وهو ما يتوافق مع الوضع الافتراضي).
   في الصندوق، لا أعتقد أنه من المنطقي محاولة حشر عنوانين قصيرين لفئتين فرعيتين في سطر واحد حتى لو توفرت المساحة؛ يبدو أفضل إذا كان لكل منهما سطر منفصل، على الرغم من أن آخرين قد يفضلون تجميعهم إذا كانت هناك فئات فرعية كثيرة.
4. تعديلاتي النهائية:
   
   
   
   تُعرض شعارات الفئات الفرعية بارتفاع 18 بكسل مع النسبة الصحيحة للعرض إلى الارتفاع في نهاية العنوان. هذا اختياري، ويمكن وضعها بين أيقونة القفل والنص، لكنني أفضل أن تتماشى الأشرطة والعناوين.
   سيكون من المنطقي أيضًا توفير خيار لاستخدام شعارات الفئات الفرعية في الترتيبات الافتراضية الأخرى، لكنني لم أتعامل مع تلك.
   هنا أستخدم أيضًا مكون أيقونات الفئات (تم تعيين أيقونة فقط في الفئة الفرعية Niki Test)، لذا فإن موضع الشريط منزاح قليلاً لمحاذاة الأيقونة معه، ولون الأيقونة هو لون الشريط، مما يعني أنها تُستخدم فعليًا بدلًا من الشريط — لكن هذه تعديلات على ذلك المكون وليس على النواة.
5. وأخيرًا، إليك كيف يظهر عند عرض صناديق الفئات الفرعية فوق مواضيع الفئة الأصلية إذا تم تعيين ذلك.
   
   
   
   من الواضح أنه حاليًا لا توجد فئات أحفاد لعرضها، لكن سيكون ذلك بحاجة إلى استيعاب. كما قد يكون من الأفضل طفو الشعار عموديًا عند وجود عنوان طويل جدًا — ربما يكون من الأفضل ببساطة إبقاء عناوين الفئات قصيرة!

إذن، مزيج من HTML النصي/x-handlebars في /head للموضوع يستبدل فعليًا “components/categories-boxes” و SCSS. أنا سعيد بإرسال الكود لأي شخص كفؤ لاختباره وإدخاله إلى GitHub.
هذا يعمل بشكل جيد لموقعي، لكن قد تكون هناك عواقب أخرى لم ألاحظها.