هل هناك طريقة لفرض تمديد إشعارات المشاركات إلى ما بعد المشاركة؟

[orangeandblack5]

لقد كنا نعبث بـ CSS فيما يتعلق بعرض المنشور، وقد توصلنا إلى ما يلي (بناءً على هذا الكود بواسطة @Alex_P)، والذي يعمل مع كل شيء تقريبًا:

/*يغير خلفيات المنشورات الموضوعة ويزيد عرض المنشور*/

//ضبط أحجام الألوان للمساحة الشاشة بعرض أقل من 1260 بكسل بمقدار 60 بكسل
@media screen and (max-width: 1150px)
{
    //إضافة لون للمنشورات ذات الأرقام الزوجية بالإضافة إلى 60 بكسل
    div.topic-post:nth-child(2n), div.small-action:nth-child(2n)
    {
        background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));

    }

    //إضافة لون للمنشورات ذات الأرقام الفردية بالإضافة إلى 60 بكسل
    div.topic-post:nth-child(2n+1), div.small-action:nth-child(2n+1)
    {
        background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));

    }

    //ضبط حجم الإجراء بمقدار 61 بكسل
    div.small-action
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
    }

    //ضبط حجم الإشعار بمقدار 61 بكسل
    div.post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
    }
}

//ضبط أحجام الألوان للمساحة الشاشة بعرض أكبر من 1260 بكسل بمقدار 180 بكسل، وضبط العناصر الأخرى بمقدار 120 بكسل
@media screen and (min-width: 1150px)
{
    //أمر قديم غير مستخدم
    .topic-post:not(.d-toc-post)
    {
        //width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
    }

    //ضبط حجم الشاشة بمقدار 120 بكسل
    .topic-body
    {
        width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
    }

    //ضبط حجم الحالة بمقدار 120 بكسل
    .topic-status-info, .onscreen-post
    {
        max-width: calc(758px + #{120px});
    }

    //ضبط حجم الرد بمقدار 120 بكسل * 2
    #reply-control
    {
        max-width: calc(1475px + (#{120px} * 2));
    }

    //ضبط حجم نافذة المنشئ المنبثقة بمقدار 120 بكسل * 2
    .composer-popup-container
    {
        max-width: calc(1500px + (#{120px} * 2));
    }

    //ضبط حجم النافذة المنبثقة بمقدار 120 بكسل (لاحظ أنها لن تتطابق تمامًا، ولكنها أيضًا ليست الافتراضية)
    .composer-popup
    {
        max-width: calc(724px + #{120px});
    }

    //ضبط حجم الإجراء بمقدار 135 بكسل
    div.small-action
    {
        max-width: calc(758px + #{135px});
    }

    //ضبط حجم الإشعار بمقدار 135 بكسل
    div.post-notice
    {
        max-width: calc(758px + #{135px});
    }

    //إضافة لون للمنشورات ذات الأرقام الزوجية بالإضافة إلى 180 بكسل
    div.topic-post:nth-child(2n)
    {
        background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));

    }

    //إضافة لون للمنشورات ذات الأرقام الفردية بالإضافة إلى 180 بكسل
    div.topic-post:nth-child(2n+1)
    {
        background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));

    }

    //إضافة لون للإجراءات ذات الأرقام الزوجية بالإضافة إلى 180 بكسل
    div.small-action:nth-child(2n)
    {
        background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
    }

    //إضافة لون للإجراءات ذات الأرقام الفردية بالإضافة إلى 180 بكسل
    div.small-action:nth-child(2n+1)
    {
        background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
    }
}

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

وبالتالي، أضفنا أيضًا الكود التالي للاختبار بشكل مستقل قبل دمجه في حالاتنا الواسعة والمضغوطة أعلاه:

/* إشعارات المنشورات تحتاج إلى اهتمام خاص ولا تزال تتعطل نوعًا ما */

//ضبط أحجام إشعارات المنشورات للشاشات الأقل من 1150 بكسل
@media screen and (max-width: 1150px)
{
    //ضبط حجم الإشعار بمقدار 35 بكسل
    .post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
    }
}

//ضبط أحجام إشعارات المنشورات للشاشات الأكبر من 1150 بكسل
@media screen and (min-width: 1150px)
{
    //ضبط حجم الإشعار بمقدار 180 بكسل
    .post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
    }
}

هذا يعمل بشكل جيد في الغالب - ومع ذلك، لا يمكننا تمديد إشعارات المنشورات إلى ما وراء بقية المنشور، كما هو موضح هنا:

كل شيء آخر تم جعله بالعرض المطلوب، ولكن تم منع إشعارات المنشورات من الامتداد أكثر من ذلك (الحافة اليمنى لـ “المنشور” نفسه هي حيث تتوقف - وهذا واضح بسهولة إذا نظرت إلى الحدود البرتقالية على المنشور أدناه).

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

نرحب بأي نصائح حول أفضل طريقة لتحقيق ذلك!

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