منع شريط آخر زيارة من إفساد الألوان

[orangeandblack5]

لدينا ألوان متناوبة معدة لجميع مشاركاتنا (والإجراءات الصغيرة) عبر nth-child، والتي تبدو كالتالي:

ومع ذلك، فإن ميزة “آخر زيارة” الجديدة في الإصدار 2.8 تُحتسب كإجراء صغير، وبالتالي تقع ضمن ألوان المشاركات المتناوبة:

ما نريده بشدة هو الحصول على شيء مثل التالي:

حيث لا تُحتسب شريط “آخر زيارة” كعنصر ابن لأغراض nth-child في تحديد لون خلفيته.

كانت فكرتي الأولى هي استخدام JavaScript لإضافة عنصر div جديد ببساطة بعد أي أشرطة لآخر زيارة، وهذا يعمل بالفعل كما هو مرغوب:

عبر

<script type="text/discourse-plugin" version="0.8">
    var addedElement;
    
    api.onPageChange(() => {
        addedElement = false;
        //window.onload = lastPostFix();
    });

    async function lastPostFix()
    {
        var elements = document.getElementsByClassName('topic-post-visited');
        
        var newElement = document.createElement("div");
        newElement.classList.add('small-action');
        
        while(elements.length > 0 && !addedElement)
        {
            elements[0].parentNode.insertBefore(newElement, elements[0].nextSibling);
            addedElement = true;
        }
    }
</script>

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

---

---

هل لدى أي شخص فكرة أفضل عن كيفية تحقيق ذلك؟

[Don]

جرب شيئًا كهذا.

.small-action.topic-post-visited {
  height: 0;
}

[orangeandblack5]

بينما يجعل ذلك أرق، فهذه ليست المشكلة حقًا هنا - المثال الذي قدمته كنموذج مثالي تم عن طريق تعديلي لـ CSS، وهو أمر تافه في الأساس - المشكلة هي أن تلوين خلفية مشاركاتنا يتم عبر محدد nth-child والعنصر .small-action.topic-post-visited يُحسب كطفل وبالتالي يبدل nth-child عندما لا نريده أن يفعل ذلك.

بصريًا، سيعطي هذا:

حيث يُستخدم اللون الفاتح كخلفية لعنصر الزيارة الأخير، مما يتسبب في أن تكون المشاركة أعلاه وأسفله مباشرةً باللون الداكن لدينا.

التباين مع نموذجنا المثالي، حيث يتجاهل تناوب الألوان هذا العنصر الجديد:

[orangeandblack5]

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

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

[orangeandblack5]

حسنًا، بافتراض أنه نظرًا لعدم وجود ردود، فإن هذا مستحيل

كيف يمكننا تعطيل الميزة بالكامل؟

لا يستحق الأمر أن تومض جميع منشوراتنا بالألوان لشريط مؤقت

[Don]

نعم، هذا لن يعمل مع :nth-child أو :nth-of-type. هذه تقوم فقط بعد العناصر الفرعية وليست خاصة بالفئة ولا توجد طريقة للتصفية حسب الفئة.

ما ستحتاجه بالفعل هو :nth-child(2n of .topic-post) ولكن هذا مدعوم فقط من قبل سفاري حتى الآن.

---

ولكن يمكنك تجربة شيء كهذا.

Header
سيضيف هذا الفئة .every-second إلى كل مشاركة ثانية باستثناء الإجراءات الصغيرة، لذلك فقط مشاركات الموضوع. ثم يمكنك استهدافها بسهولة باستخدام CSS.

  <script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const postNum = attrs.post_number;
    if (postNum % 2 === 0) {
      return ['every-second']
    }
  });
  </script>

---

CSS

.topic-post {
  background: var(--primary-very-low);
  &.every-second {
    background: var(--primary-low);
  }
}

.small-action.topic-post-visited {
  height: 0;
}

---

خط المشاركة في الموضوع الذي تمت زيارته

---

التمرير

[Falco]

@orangeandblack5

أين لا ينتهي شريط “آخر زيارة” في العد كعنصر ابن لأغراض nth-child لتحديد لون خلفيته.

أليس من الممكن استخدام محدد أكثر تحديدًا هنا للبقاء في حل CSS خالص؟

هل يمكنك مشاركة مقتطف من قاعدة CSS الحالية الخاصة بك؟

[saquetim (Sérgio Saquetim)]

@orangeandblack5

هل لدى أي شخص فكرة أفضل عن كيفية تحقيق ذلك؟

@Falco

أليس من الممكن استخدام محدد أكثر تحديدًا هنا من أجل البقاء في حل CSS نقي؟

من الممكن تحقيق نفس التأثير باستخدام CSS فقط ولكنه مخادع بعض الشيء وسيعمل فقط في تدفق المنشورات. لن يعمل في قائمة المواضيع. ستحتاج جافا سكريبت هناك حيث أن سفاري فقط هي التي تحدد بناء الجملة :nth-child( of <selector>) وعلى حد علمي لا توجد سمات يمكن استهدافها لتطبيق التأثير.

@orangeandblack5، عليك استهداف عنصر article داخل المنشورات. لاحظ أن السمة id تتبع النمط id=post_N حيث N هو رقم المنشور في التدفق.

لذلك يمكنك استهداف الأرقام الزوجية فقط بشيء مثل CSS أدناه:

.topic-post {
    article[id$="0"], article[id$="2"], article[id$="4"], article[id$="6"], article[id$="8"] {
        background-color: peachpuff;
    }
}

[orangeandblack5]

يمكنني تجربة ذلك ولكن مع تضمين إجراءات صغيرة هذا الأسبوع - كنت آمل في حل CSS خالص إذا أمكن ولكن نعم لم ننجح في ذلك أيضًا.

[orangeandblack5]

حقيقة ممتعة - ليست كل الإجراءات الصغيرة متساوية!

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

لاحظ أن هذا يؤثر أيضًا على إصلاح JS الذي قدمه @Don - سأرى ما إذا كان بإمكاني إيجاد طريقة للتغلب على ذلك، لكن معرفتي بلغة JS أضعف بكثير من معرفتي بـ CSS.