Freecodecamp: تصميم القائمة المنسدلة للمجتمع في الوضع الليلي

تم إنشاؤها على ١٥ يناير ٢٠١٧  ·  16تعليقات  ·  مصدر: freeCodeCamp/freeCodeCamp

وصف المشكلة

في https://github.com/freeCodeCamp/freeCodeCamp/pull/12288 ، تمت إضافة قائمة منسدلة إلى التنقل. أثناء التحقق من https://github.com/freeCodeCamp/freeCodeCamp/pull/12532 ، لاحظت أن هذه القائمة المنسدلة ساطعة جدًا في الوضع الليلي. أعتقد أنه يمكن استخدام بعض تحديثات التصميم.

أعتقد أن التغييرات يجب أن تتم في مكان ما هنا .

هل لدى أي شخص أي أفكار حول الشكل الذي يجب أن يبدو عليه ، وتحديد الألوان التي يجب أن يستخدمها؟
/ ccQuincyLarson @ freeCodeCamp / moderators

لقطة شاشة

firefox_2017-01-15_15-14-22
firefox_2017-01-15_15-14-31

help wanted UI

التعليق الأكثر فائدة

متفق عليه مع جاستن ، ويمكن أخذ رموز الألوان المحددة من هنا
https://www.freecodecamp.com/design-style-guide/

ال 16 كومينتر

حسنًا ، ماذا لو نجرب العكس؟ الحفاظ على اللون الرمادي الداكن ، باستخدام الضوء للنص نفسه؟
سأساعدsystimotic QA إذا كان أي شخص

متفق عليه مع جاستن ، ويمكن أخذ رموز الألوان المحددة من هنا
https://www.freecodecamp.com/design-style-guide/

systimoticraisedadeadhallaathrad
مرحبًا يا شباب أيضًا ، ماذا عن هذا:
image

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

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

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

@ no-stack-dub-sack يمكنك المضي قدمًا في إصلاح القائمة المنسدلة 👍
قد يكون من الأفضل ترك النموذج ، حيث تتم إزالته على أي حال.

😕 لقد تحققت للتو ، والشروط متاح في التدريج. أعتقد أن هذا تم إرجاعه. لست متأكدًا من الوضع في ذلك ، سواء عاد بشكل مؤقت أو دائم.
تمت إعادته في https://github.com/freeCodeCamp/freeCodeCamp/pull/11253. مما يمكنني قوله إنه يعود بشكل دائم ، لكنني لست متأكدًا.

raisedadeadsystimotic طيب، حتى أتمكن من المضي قدما في إصلاح حد سواء - وإذا كان ينتهي يتم إزالتها - لا بيغي!

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

image

بافتراض أن هذا غير مقصود ، ستحاول النظر إلى ذلك أيضًا.

تضمين التغريدة

متفق عليه مع جاستن ، ويمكن أخذ رموز الألوان المحددة من هنا
https://www.freecodecamp.com/design-style-guide/

يثير هذا في الواقع نقطتين جيدتين:

  1. العديد من ألوان الوضع الليلي غير موجودة في دليل الأسلوب هذا
  2. وهناك العديد من حالات "Free Code Camp" في دليل الأسلوب هذا ، والتي يجب تغييرها لكل إصدار رقم 12472

ومع ذلك ، لا يمكنني العثور على هذا في قاعدة البيانات ، فهل يعرف أحد أين يعيش هذا؟

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

وإليك القائمة المنسدلة:
image
image

ولكن ، عندما بدأت في النقر ، على سبيل المثال ، الذهاب إلى المتجر ، ثم العودة إلى الخريطة ، يعود التصميم مرة أخرى إلى الألوان الفاتحة. تعود الصفحة للحظات إلى "الوضع النهاري" ، ثم عندما تعود إلى الوضع الليلي ، عادت أنماط القائمة المنسدلة. أي أفكار لماذا قد يكون هذا؟

هذا هو الكود الخاص بي ، أدخله في السطر 1073 من main.less:

.hamburger-dropdown {
    .dropdown .dropdown-menu,
    .open a {
      background-color: @gray;
      a {
        color: @night-text-color;
        &:hover {
          background-color: #666;
          color: @brand-primary;
        }
      }
    }
    a:focus,
    a:active {
      background-color: #666 !important;
      color: @brand-primary !important;
    }
  }

النماذج - لقد عملت على هذا قليلاً ، لكنها تأتي مع مجموعة كاملة من المشكلات الأخرى التي تعبت من الدخول فيها الآن. لأن هناك أيضًا مشروط "الخطأ" ...

هناك العديد من حالات "Free Code Camp" في دليل الأسلوب هذا

لدي علاقات عامة معلقة دمج. راجع https://github.com/freeCodeCamp/design-style-guide/pull/7

يعجبني ما فعلته بالقائمة المنسدلة ، فربما يحتاج النص إلى مزيد من التباين (أكثر بياضًا) ، لكنه يبدو رائعًا!

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

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

يوم الاثنين ، 16 يناير 2017 ، mrugesh mohapatra [email protected]
كتب:

هناك العديد من حالات "Free Code Camp" في دليل الأسلوب هذا

لدي علاقات عامة معلقة دمج. المرجع freeCodeCamp / design-style-guide # 7
https://github.com/freeCodeCamp/design-style-guide/pull/7

يعجبني ما فعلته بالقائمة المنسدلة ، ربما يحتاج النص إلى المزيد
على النقيض (أكثر بياضا) ، ولكن يبدو كوول!

-
أنت تتلقى هذا لأنك في فريق تم ذكره.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
.

@ no-stack-dub-sack لست متأكدًا من أنني أحفر النص الأخضر فوق اللون الرمادي عند التمرير / النشط. لا يبدو أن لديه تباينًا كافيًا ليكون قابلاً للقراءة. ماذا عن خلفية رمادية فاتحة مع نص رمادي غامق؟

systimoticraisedadeadhallaathrad لذلك أنا أعتقد أن هذا يبدو أفضل قليلا في جوستين وMrugesh في تعليق بخصوص المزيد من النقيض من ذلك، لقد استخدمت @link-hover-color فار وهو @brand-primary مظلمة بنسبة 15٪، لذلك لا يزال يحتفظ تلميحًا للعلامة التجارية الخضراء ، ولكنه يقدم تباينًا أفضل بكثير. هذا داخل القائمة المنسدلة ، وللتحويم ، والتركيز النشط على روابط التنقل.
image

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

هذا يبدو جيدا بالنسبة لي.

روعة !!! لنحصل على طلب سحب بالفعل! 😉

عليه!

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات