Threaded post support for NodeBB
-
-
Hi All,
Some very early (subject to the odd bug) code released in DEV. You will need an account there - let me know if you need a password reset
https://sudonix.dev/topic/331/how-to-install-a-self-hosted-instance-of-iframely-for-use-with-nodebb
This code is quite complex, and leverages some interesting CSS classes. The most important change is that it removes the stock timeline bar, and will replace it with it’s own. This is for a variety of reasons - mostly around cumulative layout shift and pseudo elements being used in the stock CSS.
-
-
I have tested but I don’t see switch on dev
-
-
-
oh yes I’m on 1920 x 1080 screen
oups
-
-
hmmmm nope
-
-
nope it’s normal, i’m on 1080px height
-
-
-
Here’s a video of the threading code working on stock Harmony on NodeBB.
However, it’s important to note that the timeline bar is removed and recreated. There is a good reason for this, as without taking this route, it would mean that the timeline bar will look out of place. It’s certainly possible to use the existing bar and use a variety of CSS to move it around, although this is VERY inconsistent in my testing, and lands up being far too complex when it comes to having multiple CSS classes that do not include a specific scenario etc.
In this case, it’s so much quicker to hide and replace the existing one - we do this in the default view also with the threaded view disabled, and I’m sure you won’t notice the difference
For obvious reasons, this code is configured to only fire on displays of 1200pxor more - obviously, firing on a mobile device wouldn’t look very good at all.Here’s the video
If you like what you see, here’s the code.
https://github.com/phenomlab/nodebb-harmony-threading
Final note - The code you see in the video is designed to work with stock Harmony. The code running on Sudonix is VERY different and uses a variety of CSS to render the view you see here. It’s “possible” to emulate this look, although it does mean that you will have to replace your custom CSS with that of Sudonix.
Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd
-
Here’s a video of the threading code working on stock Harmony on NodeBB.
However, it’s important to note that the timeline bar is removed and recreated. There is a good reason for this, as without taking this route, it would mean that the timeline bar will look out of place. It’s certainly possible to use the existing bar and use a variety of CSS to move it around, although this is VERY inconsistent in my testing, and lands up being far too complex when it comes to having multiple CSS classes that do not include a specific scenario etc.
In this case, it’s so much quicker to hide and replace the existing one - we do this in the default view also with the threaded view disabled, and I’m sure you won’t notice the difference
For obvious reasons, this code is configured to only fire on displays of 1200pxor more - obviously, firing on a mobile device wouldn’t look very good at all.Here’s the video
If you like what you see, here’s the code.
https://github.com/phenomlab/nodebb-harmony-threading
Final note - The code you see in the video is designed to work with stock Harmony. The code running on Sudonix is VERY different and uses a variety of CSS to render the view you see here. It’s “possible” to emulate this look, although it does mean that you will have to replace your custom CSS with that of Sudonix.
@phenomlab wow… that looks really cool. I need to fire up a NodeBB box and test.
-
NOTE: Minor bugfixes applied
-
this is very cool. Thanks @phenomlab
-
Very cool like as already said above and a big thanks for hard work (I see the th function.js and woowwww
)I test it now and I have see this with plugin user-browsers :
Do you know where it could come from?
This also breaks the display of the site title
Can we do the same thing but without expanding the topic toolbar on header ?
EDIT :
I see that you seem put other things in the function.js on github like banner, logo, fancybox…
I said to myself that I found this file way too long without asking too many questions !–> But I have the bug display with user browsers plugin which I will try to solve
-
Very cool like as already said above and a big thanks for hard work (I see the th function.js and woowwww
)I test it now and I have see this with plugin user-browsers :
Do you know where it could come from?
This also breaks the display of the site title
Can we do the same thing but without expanding the topic toolbar on header ?
EDIT :
I see that you seem put other things in the function.js on github like banner, logo, fancybox…
I said to myself that I found this file way too long without asking too many questions !–> But I have the bug display with user browsers plugin which I will try to solve
@DownPW hmm. Not sure why I copied all of that code, but will change asap. I also have a fix for the browsing users plugin issue but didn’t include it because others might not be using it.
I’ll get to this as soon as I can.
EDIT - Done
EDIT 2 - I just noticed on your DEV box that you have (thanks to me - sorry) a ton of JS code you don’t need. You should probably clean that up.Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd
-
Very cool like as already said above and a big thanks for hard work (I see the th function.js and woowwww
)I test it now and I have see this with plugin user-browsers :
Do you know where it could come from?
This also breaks the display of the site title
Can we do the same thing but without expanding the topic toolbar on header ?
EDIT :
I see that you seem put other things in the function.js on github like banner, logo, fancybox…
I said to myself that I found this file way too long without asking too many questions !–> But I have the bug display with user browsers plugin which I will try to solve
@DownPW said in Threading support for NodeBB:
Can we do the same thing but without expanding the topic toolbar on header ?
Yes, but then you’ll have elements that are wider than the sticky bar which looks odd on scroll.
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register LoginRelated Topics
-
-
-
-
-
Nodebb design
Solved General -
-
-
NodeBB metadata
Solved Configure
