Glitch in white/grey separation when updating Latest with new topics


(Erlend Sogge Heggen) #1

Don’t know exactly how to reproduce yet, but I think it happened when I updated the topics list two times in a row.

Here it is after 2nd update:

Still present after 3rd update:

Also notice the pinned topic is being pushed down. Should that be happening? (come to think of it, why haven’t I gotten to dismiss that sticky yet?)


Notification when a moderator or admin deletes your message
(Sam Saffron) #2

This is a known issue was reported elsewhere, but I am not convinced what we are doing now is wrong.

Regarding striping, we will fix this when we upgrade htmlbars cause our DOM will be free of a ton of metamorphs which make this much simpler to style.


(Erlend Sogge Heggen) #3

Goody good good. Good.


(Jeff Atwood) #4


(Bill Ayakatubby) #5

Ah, the elusive htmlbars. Like its cousin the unicorn, rarely seen outside of enchanted forests and magical glades.


(lid) #6

There are 2 related bugs Here.

##bug 1 - .highlighted class is overridden by tr.nth-child rule

  1. I don’t see the blue highlight when topics are added ( should probably be reported as new bug/topic )
    This most likely because this rule take precedent over the .highlighted class
.topic-list>tbody>tr:nth-child(even){
}

###solution 1
add !important to .highlighted css class

##Bug 2 - highlight functionality hard-code the background-color creates mess odd/even striping

This is actually what the original author is talking about.

###Solution 1

remove the hard-coded background-color from the element style attribute,

.animate({ backgroundColor: originalCol }, 2500, 'swing', function(){
        $topic.removeClass('highlighted');
        $topic.css('background-color',"");  //Remove hardcoded background

      });

discourse/topic-list-item.js.es6 at bad5938cddbda1e1dc81ae97ca03e9907776eb10 · discourse/discourse · GitHub

When we remove the background-color nth-child rule to do it job, and stripping will be fixed.

Rule reference:

.topic-list>tbody>tr:nth-child(odd|even) { ... } 

##solution 2 - dirty fix
Run this code to reset the background color using javascript after items added and highlight finished
This concept could also be adopted to $.addClass instead with class that has background-color !important

$("tr.topic-list-item").filter(":odd").css("background-color","#fff");
$("tr.topic-list-item").filter(":even").css("background-color","#f7f7f7");

Topic List - new items does not highlight
(Robin Ward) #7

I think this is fixed due to 1.8.1 removing metamorphs from our codebase.


(Jeff Atwood) #8