Threaded post support for NodeBB

[phenomlab]

@DownPW Thanks. You should remove the threadedChat function and these lines

$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});

That code is not functional yet and is very experimental

I’ll have a look at your DEV environment to make the code recommendations.

[phenomlab]

@DownPW I changed your CSS as it was lacking the actual .threaded class which is the target we add and remove

.page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event.threaded {
    background: transparent !important;
    margin-bottom: 10px !important;
}
.page-topic .topic .posts.timeline .threaded:last-child .timeline-event:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component="post/placeholder"]:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component=post]:last-child {
    margin-left: 0.5rem !important;
}

Seems to work, but can you confirm?

[DownPW]

nope

Sorry I was on my way back from work @phenomlab

So in fact I’m already going to try adding .threaded to the CSS code.

When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

[phenomlab]

@DownPW For clarity, I didn’t change all of the classes - only the two you posted last

Threading off

Threading on

[DownPW]

yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
And if you seen topi event is not transparent like vanilla

[phenomlab]

@DownPW That should make no difference?

Just remove it from the class

.page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg);
    /* background: var(--bs-body-navbar); */
    border-radius: var(--bs-border-radius);
}

[DownPW]

that makes all the difference

Vanilla is like this:

[phenomlab]

@DownPW said in Threading support for NodeBB:

And if you seen topi event is not transparent like vanilla

It is for me

[DownPW]

nope for me

[DownPW]

no return to vanilla background

vanilla: bs-body-bg
thread ON: bs-body-navbar

[phenomlab]

@DownPW Because your CSS has not been altered dude.

Try now. It works for me?

[DownPW]

I have not the same result :

I have bs-body-bg with thread ON

[phenomlab]

@DownPW Isn’t that correct, or do you want --bs-body-navbar ?

[DownPW]

@DownPW said in Threading support for NodeBB:

vanilla: bs-body-bg
thread ON: bs-body-navbar

[phenomlab]

@DownPW Right. Hold on.

[DownPW]

or maybe for each modification this must be specified twice ?

THREAD OFF

/* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

THREAD ON

/* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

Same things for other modif like border radius

[phenomlab]

@DownPW Try now.

[DownPW]

One or 2 classes are missing in Thread ON mode but this is the logic I want.

What have you done that I can understand and modify?

[phenomlab]

@DownPW Good…

Added

  li.pt-4.threaded {
    background: var(--bs-body-navbar) !important;
}

Modified

  .page-topic .topic .posts.timeline .timeline-event,
  .page-topic .topic .posts.timeline > [component="post/placeholder"],
  .page-topic .topic .posts.timeline > [component="post"] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg); 
    border-radius: var(--bs-border-radius);
  }

[DownPW]

hmm Ok
For once I don’t understand the logic

Just one thing I have added befor one Thread ON mode :