Skip to content

Threaded post support for NodeBB

Let's Build It
146 5 118.7k 1
  • wrote on last edited by

    it’s cool too ^^

  • it’s cool too ^^

    wrote on last edited by
  • wrote on last edited by DownPW

    this code does not work for me. No button

    EDIT:

    The code on github is OK, not the last share above

  • this code does not work for me. No button

    EDIT:

    The code on github is OK, not the last share above

    wrote on last edited by

    @DownPW said in Threading support for NodeBB:

    The code on github is OK, not the last share above

    Sorry - changed that to the Git link

  • wrote on last edited by DownPW

    Just don’t forget to comment out lines for browsing-users plugin

    I’m got screwed 😉

    Good work my friend

  • Just don’t forget to comment out lines for browsing-users plugin

    I’m got screwed 😉

    Good work my friend

    wrote on last edited by phenomlab

    @DownPW This part?

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    // If you have browsing users plugin, comment out the above line and uncomment the one below
    //$('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    Yes, I need to fix that! Thanks for the reminder.

  • wrote on last edited by phenomlab

    For anyone else browsing here who has tried the code in git but wants it to look exactly like Sudonix, please note that this code is not public because it is heavily adapted to match the layout of this site. There are some Sudonix “clones” around so you can actually have this code if you really want it, but it comes with some conditions;

    1. You should consider buying me a coffee - see “Buy me a Coffee” link
    2. You have to provide a backlink to this site from your own - it needs to be visible and cannot be hidden - obviously, I can’t (and won’t) make you do this, but it’s courteous to recognize the original author - particularly when hundreds of hours were spent creating all of this eye candy 🙂
  • wrote on last edited by DownPW

    Hello @phenomlab

    I see this, when someone composes, it is displayed via the plugin like this (To the left of the Thread View button.). I do not know if it’s normal or if it is better to put it on the right like the others ?

    image.png

    or myself for example :

    33a99e14-13e5-4e67-beaa-25d02b39bb59-image.png

  • Hello @phenomlab

    I see this, when someone composes, it is displayed via the plugin like this (To the left of the Thread View button.). I do not know if it’s normal or if it is better to put it on the right like the others ?

    image.png

    or myself for example :

    33a99e14-13e5-4e67-beaa-25d02b39bb59-image.png

    wrote on last edited by phenomlab

    @DownPW Mmmm - I thought that this would happen. In your js function, can you locate this line

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    

    Replace it with

    $('.topic .sticky-tools ul.list-unstyled').append(threadView);
    

    51179c3a-e0cf-4f1f-a36b-79beb1655e88-image.png

    The issue here is that the hidden-xs class is being manipulated by js which forces the position and does not use relative. This new code should hopefully work around that. It will change the placement of the threaded toggle, but for the better I think. If this works, I’ll commit the code to git

  • wrote on last edited by DownPW

    @phenomlab

    I don’t use this line, I commented out this line as stipulated in the script

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    

    But use this line :

    $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    image.png

    maybe change for this ?

    $('.topic .sticky-tools ul.list-unstyled [component="topic/browsing-users"]:last-of-type').append(threadView);
    
  • @phenomlab

    I don’t use this line, I commented out this line as stipulated in the script

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    

    But use this line :

    $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    image.png

    maybe change for this ?

    $('.topic .sticky-tools ul.list-unstyled [component="topic/browsing-users"]:last-of-type').append(threadView);
    
    wrote on last edited by phenomlab

    @DownPW sorry, use this one.

    $('.topic .sticky-tools ul.list-unstyled').append(threadView);
    

    Replace any existing line

  • wrote on last edited by DownPW

    image.png

    With this code the entire plugin is now displayed to the left of the Thread View button. I even think I prefer the way it was before.
    I find it more logical that all users are displayed to the right of the button and not to the left.

  • image.png

    With this code the entire plugin is now displayed to the left of the Thread View button. I even think I prefer the way it was before.
    I find it more logical that all users are displayed to the right of the button and not to the left.

    wrote on last edited by phenomlab

    @DownPW up to you of course but the browsing users plugin makes several adjustments to element positioning, and without moving the threading toggle outside of that, you’ll always have the issue where the composing user appears on the left because under the old code, the threading toggle shares the same space which causes the alignment issue.

    Moving outside of that div is the only way to resolve the issue. There is another way which is to append the topic tools element but that then means that users without adequate permissions will not be able to use the threading toggle at all.

  • wrote on last edited by

    hello @phenomlab

    I see this bug with thread view mode :

    image.png

    maybe play with z-index for resolve ?

  • hello @phenomlab

    I see this bug with thread view mode :

    image.png

    maybe play with z-index for resolve ?

    wrote on last edited by phenomlab

    @DownPW yes, that’s definitely a z-index issue.

  • wrote on last edited by DownPW

    After test, seems to be good with add this in JS function in if and else :

    $('[component="topic/quickreply/container"]').addClass('threaded'); //test
    
    $('[component="topic/quickreply/container"]').removeClass('threaded'); //test
    

    and this to CSS :

    [component="topic/quickreply/container"].threaded {
        z-index: -1 !important;
        position: relative;
    }
    

    Tell me if this seems correct to you @phenomlab

  • After test, seems to be good with add this in JS function in if and else :

    $('[component="topic/quickreply/container"]').addClass('threaded'); //test
    
    $('[component="topic/quickreply/container"]').removeClass('threaded'); //test
    

    and this to CSS :

    [component="topic/quickreply/container"].threaded {
        z-index: -1 !important;
        position: relative;
    }
    

    Tell me if this seems correct to you @phenomlab

    wrote on last edited by

    @DownPW seems fine, yes. Any obvious conflict with other elements?

  • wrote on last edited by

    I haven’t tested everything. this is something to watch out for

  • wrote on last edited by

    I have the same problem for thread but this time I can’t solve it 😞

    image.png

    image.png

  • I have the same problem for thread but this time I can’t solve it 😞

    image.png

    image.png

    wrote on last edited by

    @DownPW Let me have a look.


Related Topics
  • Test of youtube embeds

    Solved Configure nodebb
    14
    11 Votes
    14 Posts
    5k Views
    Sampo2910
    @phenomlab Perfect!!! Many thanks.
  • NodeBB Twitter / X embeds

    Let's Build It twitter script
    34
    21 Votes
    34 Posts
    17k Views
    DownPW
    @phenomlab said: @DownPW thanks for spotting (and fixing) this issue. I admittedly threw this together quickly for @jac some time ago, and it hasn’t had any love since. If OK with you, I’ll merge these changes into the github repository? No problem dude
  • Threaded chat support for NodeBB

    Let's Build It threaded chat code
    35
    1
    19 Votes
    35 Posts
    16k Views
    phenomlab
    @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
  • Custom html in nodebb to prevent cache

    Unsolved Configure nodebb
    18
    2 Votes
    18 Posts
    5k Views
    phenomlab
    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this [image: d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png] The colour choice is still really hard on the eye, but at least you can now read the text
  • 4 Votes
    8 Posts
    2k Views
    phenomlab
    @Panda said in Upgrade to NodeBB v3? 2BB or not 2BB, that is the question!: So although thats a plugin it has Widget like element and stopped working on the Theme change Which is normal based on the widgets being reset when you change themes.
  • Setting up a beta NodeBB v3 environment

    Moved Let's Build It nodebb upgrades beta1
    14
    3
    11 Votes
    14 Posts
    6k Views
    phenomlab
    @dave1904 excellent news. Thanks for the feedback
  • NodeBB Theme/Skin Switcher

    Solved Customisation nodebb
    38
    7 Votes
    38 Posts
    18k Views
    phenomlab
    @Teemberland great spot ! You should create a PR for that so they can include it in the official repository. Just be aware that any subsequent releases will overwrite your fix without the PR.
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?