Skip to content

Threaded post support for NodeBB

Let's Build It
146 5 116.4k 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
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • 3 Votes
    2 Posts
    2k Views
    DownPW
    Very great
  • Extended functions for Q&A NodeBB plugin

    Let's Build It q&a panels cards
    3
    4
    5 Votes
    3 Posts
    3k Views
    DownPW
    Very good like always
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • 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 1.19.3

    Solved Performance nodebb 1.19.3 performance
    33
    4 Votes
    33 Posts
    16k Views
    DownPW
    @phenomlab I find the problem Mark The error message indicated this path : http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u I change the path url on config.json [image: 47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png] And all it’s good Weird, I didn’t have to change that path before 1.19.3 But this does not prevent the problem from a clean install with Emoji Plugin EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup For resume: NodeJS 16_x with 1.18.x is ok
  • NodeBB templates

    Locked Chitchat themes templates nodebb
    12
    4 Votes
    12 Posts
    5k Views
    phenomlab
    Placing this here for reference https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher Further information and posts can be found at this link
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.