Threaded post support for NodeBB

[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;
}

[DownPW]

nope we have top and bottom left border radius. On vanilla harmony, we have not

[DownPW]

but the most important thing for now is that we lost the Threading effect

[phenomlab]

@DownPW said in Threading support for NodeBB:

nope we have top and bottom left border radius. On vanilla harmony, we have not

No, you don’t - see my screenshot…

[DownPW]

ah ok you just edited

[phenomlab]

@DownPW said in Threading support for NodeBB:

but the most important thing for now is that we lost the Threading effect

Nope. I see this as working correctly in standard and incognito mode.

[DownPW]

Arf yes sorry. Apologies

But it’s seem we have lost margin-left

you have same things ?

[phenomlab]

@DownPW Can you provide the URL for that specific thread?

[DownPW]

And this margin :

I have added before a margin between the topic and the timeline icon.

we’ll come to an understanding

But I admit that I don’t really understand.

[phenomlab]

@DownPW said in Threading support for NodeBB:

But I admit that I don’t really understand.

Neither do I !

[DownPW]

For this we can use in Threading ON :

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

And this :

.page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event {
    margin-bottom: 10px !important;
}

RESULT :

[crazycells]

hi @phenomlab , it is nice that the switch only appears when the screen can be changed however, when the screen size is around 1250 pixels, I guess it does not produce the intended view, maybe you should increase the screen size further to make sure this switch is only available when the screen can accommodate nice thread view?