تبديل الهامبرغر

مرحباً، أنا جديد على Discourse وآمل أن يكون هذا ملاحظة مفيدة - قائمة الهامبرغر لا تتغير أبدًا إلى واجهة مستخدم “إغلاق” لذا وجدت نفسي أنقر عليها معتقدًا أنني على وشك الكشف عن المزيد من الأشياء، لكنها تغلق بشكل غير متوقع. كانت مفتوحة بالفعل. لدي بضعة أسطر من CSS أخطط لإضافتها كموضوع في فئة “مكون السمة” عندما يكون لدي المزيد من الوصول. لحسن الحظ، يحتوي الكود المصدري على فئات مناسبة حتى نتمكن من ربطها بناءً على ظهور الشريط الجانبي أو عدم ظهوره.

discourse-hamburger-toggle

.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle  svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}
4 إعجابات

شكراً لك على هذا! أقترح أيضاً نقل زر الإغلاق X إلى داخل القائمة نفسها، في الأعلى. (في هذا الموضع، سأضيف أيضاً نص “إغلاق القائمة” إلى الزر، وربما أستخدم سهماً يشير إلى اليسار بدلاً من X.)

< إغلاق القائمة أو << إغلاق القائمة

4 إعجابات

أعتقد أن معظم الناس يستخدمون Discourse مع تمكين الشريط الجانبي دائمًا (سأكون مهتمًا بمعرفة الإحصائيات حول المنتديات المختلفة). وجود علامة X كبيرة تشجع، نوعًا ما، على إغلاق جزء من التخطيط الذي يعتبر دائمًا في الأساس للعديد من المستخدمين سيبدو غريبًا بعض الشيء بالنسبة لي. :thinking:

3 إعجابات

أتفق على أن وجود أيقونة الهامبرغر إلى إغلاق قليلة الاستخدام تشغل المساحة المستهدفة السهلة القيمة في الزاوية العلوية اليسرى من النافذة ليس أمثل.

إليك ما لدى Cloudflare في أسفل الشريط الجانبي الخاص بهم:

يبدو أن شخصًا يعرف أكثر مني عن CSS (أو ربما DOM؟) يمكنه إنشاء مكون سمة بسرعة، ولكن ربما يكون الشيء عبارة عن طلب سحب (PR) يصلح القالب.

يمكن أن يكون حتى العنصر العلوي في الشريط الجانبي. . .

3 إعجابات

كيف تفتحه مرة أخرى إذا كان الزر في الشريط الجانبي المطوي؟

إعجابَين (2)

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


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

3 إعجابات

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

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

نعم، هذا منطقي. أعتقد أن Googlemail لديهم شيء مشابه، على الرغم من أنهم يحتفظون بزر الهامبرغر في أعلى اليسار:

إعجابَين (2)

مع هذا المظهر، يمكنك رؤية أن زر القائمة (الهامبرغر) موجود في الشريط الجانبي، لذا فهو ليس في الزاوية العلوية اليسرى إلى حد ما:

إعجابَين (2)

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

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

لم ألعب بها حقًا من قبل، ولكنها تحتوي أيضًا على شيء “يتوسع عند التمرير” وهو لطيف جدًا.

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

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

لا لعلامات التحويم وأسماء الفئات. التحويم ليس مثاليًا لواجهات الشاشات التي تعمل باللمس أيضًا. استخدام وضع سطح المكتب مع عناصر التحويم على جهاز iPad لا يعمل بشكل جيد حقًا.

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

أنا أحب التأثير عند مرور المؤشر، طالما أن النقر على الشاشة يعمل بنفس طريقة عمل الفأرة.

إليك أحد أنماطي المفضلة، على موقع Ghost CMS مخصص للغاية قمت ببنائه لأحد العملاء، حيث يؤدي مرور المؤشر في أي مكان فوق الشريط الجانبي إلى فتح المكدس العمودي للروابط القابلة للنقر/اللمس للكشف عن قوائم فرعية متتالية… يبدو الأمر سلسًا وسهل التنقل للغاية. يمكنك تجربته هنا:

هل قمت بفحص هذا على الهاتف المحمول؟ مليء بالأخطاء

مرحباً :wave: شكراً للمشاركة.

أستخدم مجموعة أيقونات المسافة البادئة، إخراج المسافة البادئة لتبديل الشريط الجانبي على موقعي.

indent (إظهار الشريط الجانبي)
indent-solid

outdent (إخفاء الشريط الجانبي)
outdent-solid

إعجابَين (2)

احتمال آخر (للسطح المكتب) موضح في Flarum

أتساءل عما إذا كان شخص آخر يعتقد أن هذا يجب أن يتولاه الفريق الأساسي.

هناك العديد من المجتمعات الكبرى التي تستخدم الواجهة القديمة (بدون الشريط الجانبي) على Discourse بسبب ذلك.

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

يبدو أن الأشخاص غير التقنيين لا يعرفون كيفية استخدام منتدياتنا بسبب تفاصيل صغيرة ولكنها مهمة مثل هذه.

هناك دائمًا مجال للتحسين :slight_smile:

في غضون ذلك، أقوم باختبار مكون السمة هذا:

إعجابَين (2)

لدي نفس السؤال أيضًا