@DownPW said in Threaded chat support for NodeBB:
Better like this : add shadow and border-left on self answer
Of course - you style to your own requirements and taste 🙂 I’ll commit that CSS we discussed yesterday also
@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.
@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?
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 :
@DownPW For clarity, I didn’t change all of the classes - only the two you posted last
Threading off
Threading on
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
@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);
}
that makes all the difference
Vanilla is like this:
@DownPW said in Threading support for NodeBB:
And if you seen topi event is not transparent like vanilla
It is for me
nope for me
no return to vanilla background
vanilla: bs-body-bg
thread ON: bs-body-navbar
I have not the same result :
I have bs-body-bg with thread ON
@DownPW Isn’t that correct, or do you want --bs-body-navbar
?
@DownPW said in Threading support for NodeBB:
vanilla: bs-body-bg
thread ON: bs-body-navbar
@DownPW Right. Hold on.
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
@DownPW Try now.
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?
@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);
}
hmm Ok
For once I don’t understand the logic
Just one thing I have added befor one Thread ON mode :