شريط تمرير تحميل أفقي

ملاحظة جانبية فقط، لكنني تذكرت مؤخرًا أن XenForo كانت لديها دائمًا شريط تحميل. يسعدني أن أرى أن Discourse لديها الآن شيء مشابه. :slight_smile:

أتساءل أيهما أكثر إزعاجًا عند وجود شبكة ضعيفة.

رائع! :heart_eyes:

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

يمكنك محاكاة ظروف الشبكة الضعيفة باستخدام وحدة التحكم f12 في Chrome، إذا رغبت في ذلك.

4 إعجابات

تحديث حول iPhone 6s:

المظهر الآن ممتاز مع السمة الداكنة والعديد من السمات الأخرى على الأجهزة المحمولة.

أحسنت!

تحديث حول سطح المكتب:

لا يزال شريط التمرير بالكاد مرئيًا على متصفح Chromium مع شاشات ROG بحجم 27 و34 بوصة.

هل يمكن إضافة خيار في السمات لتمكين/تعطيلها بناءً على الجهاز المحمول أو سطح المكتب؟

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

أود أن أقول نفس الشيء :smiley: خيار ممتاز جدًا.

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

يمكنني إعادة إنتاج هذه المشكلة عند استخدام تسجيل الدخول عبر فيسبوك. يبدو أن هذا يسبب معامل عنوان URL #_=_

تسجيل شاشة 2021-02-07 الساعة 12.57.11|فيديو

4 إعجابات

لقد اكتشفت أن تعطيل إضافة discourse-topic-list-previews يحل جميع المشكلات المتعلقة بـ Loading slider، وبمجرد إعادة تفعيلها يعود المشكلة.

نحن لا نستخدم أي تسجيل دخول من جهات خارجية، لذا يبدو أن هذا قد يكون خللاً منفصلاً (أو ربما مرتبطًا بطريقة ما؟)

تعديل: في الواقع، مع تفعيل كلتا الإضافتين، تبقى الصفحة ضبابية فقط في المواضيع التي عثرت فيها إضافة discourse-topic-list-previews على صورة لاستبدال الصورة الافتراضية… وصفحة التصنيفات.

إعجابَين (2)

متابعة للاختبار على الجوال وسطح المكتب مع العديد من السمات، يبدو أن شيء مثل هذا يعطي نتيجة جميلة لهذا السلايدر الرائع:

  height: 4px;
  
  @media only screen and (min-width: 960px) {
        height: 7px;
  }

إضافة بكسل واحد (من 3px إلى 4px) إلى القيمة الافتراضية تبدو رائعة على الجوال؛ وعلى شاشات سطح المكتب الأكبر من 5px تبدو جميلة، لكنني اخترت 7px في الوقت الحالي :slight_smile:

سأعمل على هذا أكثر قليلاً عندما يتوفر لدي وقت، مع اختبار مختلف السمات على سطح المكتب “الكبير” وعلى هواتف آيفون الخاصة بي.

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

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

3 إعجابات

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

body.loading #main-outlet {
  opacity: 1 !important;
}
5 إعجابات

ولكن في هذه المرحلة، ما هي قيمة هذا مقارنة بـ الـ spinner؟ هل هو فقط لرؤية شريط التحميل؟

إعجابَين (2)

هذا يقوم فقط بتعطيل تأثير التلاشي. كانت هذه الإصدار الأول. شريط تمرير علوي فقط بدون تأثير تلاشي.

إعجابَين (2)

نوعًا ما …

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

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

6 إعجابات

نعم، أعتقد ذلك ربما… الأمر صعب جدًا… ربما تكون التأثيرات القابلة للتغيير جيدة للجميع. :slightly_smiling_face:

شخصيًا، أحب ذلك حقًا مع تأثير التلاشي هذا أيضًا. :slight_smile:

المشكلة الوحيدة مع الشفافية 0 هي أنه في هذه المرحلة، يؤثر ذلك فقط على main-outlet. بينما يظل header و below-site-header مرئيين.

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

أعتقد أن التعبير عن ألمي الشخصي مع تأثير التلاشي (على الأقل على سطح المكتب) @awesomerobot / @david

أجد صعوبة بالغة جدًا في قراءة النص الباهت، لذا في كل انتقال يُجبر عقلي على قراءة نص باهت لجزء من الثانية، وهو أمر مرهق بعض الشيء.

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

12 إعجابًا

للعلم،

لقد قمت بإلغاء تفعيل انتقال الجسم (النص الباهت)، وأعتقد أنه يبدو جيدًا (وربما يبدو أسرع) عند عدم وجود انتقال للجسم. الفرق ضئيل جدًا…

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }
إعجابَين (2)

شكرًا لك دون، هذا كافٍ :grin:

إعجابَين (2)

نعم، على الهاتف المحمول، اعتقدت أن التلاشي حسّن من شكل الشريط، لكنني لم ألحظ ذلك جيدًا على سطح المكتب قبل إدخال التلاشي. (على سطح المكتب، وجدت التلاشي مزعجًا.)

ربما تفعيل التلاشي فقط على الأجهزة المحمولة؟ شريط التحميل يذكرني كثيرًا بـ Safari. :slight_smile:

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