Threaded post support for NodeBB

[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 :

[phenomlab]

@DownPW Caching issue I think. Seems to work ok for me

Threading On

Threading Off

[DownPW]

Hmm problem, incognito mode and on your screen = not thread mode with Threadinf ON (see my last self post/last post)

And I see this rest of thread ON border-radius on vanilla :

Seem very hard to understand

[phenomlab]

@DownPW This one?

Seems fine to me?

For the radius issue on highlight, this will fix it (I updated your CSS already)

.page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline > [component="post/placeholder"].highlight, .page-topic .topic .posts.timeline > [component=post].highlight {
    border-left: 2px solid #0d6efd !important;
    margin-left: 22px;
    transition: transform 0.3s ease !important;
    border-radius: 0px;
}