Skip to content
Sudonix

Threaded post support for NodeBB

Let's Build It
146 5 104.1k 1
  • DownPWundefined 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

    phenomlabundefined

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

    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

    0
  • DownPWundefined

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

    PW and WS Spirit alive

    1
  • DownPWundefined

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

    image.png

    image.png

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

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

    image.png

    image.png

    phenomlabundefined

    @DownPW Let me have a look.

    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

    0
  • phenomlabundefined phenomlab

    @DownPW Let me have a look.

    DownPWundefined

    @phenomlab said in Threading support for NodeBB:

    @DownPW Let me have a look.

    Thanks Mark 🙂

    @phenomlab said in Threading support for NodeBB:

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

    Besides, my solution above is only partial. It turns out that sometimes I can no longer click to reply to the post via quick Reply. Nothing happens when I click to enter text

    It’s a bit the same problem as the previous bug.

    It would be more interesting to act on the dropdown menu than the other elements one by one but my attempts are not fruitful for the moment.

    We could kill one stone/two birds

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    @phenomlab said in Threading support for NodeBB:

    @DownPW Let me have a look.

    Thanks Mark 🙂

    @phenomlab said in Threading support for NodeBB:

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

    Besides, my solution above is only partial. It turns out that sometimes I can no longer click to reply to the post via quick Reply. Nothing happens when I click to enter text

    It’s a bit the same problem as the previous bug.

    It would be more interesting to act on the dropdown menu than the other elements one by one but my attempts are not fruitful for the moment.

    We could kill one stone/two birds

    phenomlabundefined

    @DownPW I see the issue. Can you please make the below CSS changes - notice the ones commented out and their replacements (which you should follow)

    .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; */
    transition: margin-left 0.3s ease, margin-right 0.3s ease !important;
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
}

li[component=post].threaded {
    /* transform: translateX(-100px); */
    /* transition: transform 0.3s ease !important; */
    margin-left: -75px !important;
    transition: margin-left 0.3s ease, margin-right 0.3s ease !important;
}

    My expectation is that this will still work (but using margin instead of transform), and also ensure that the reverse dropdown is not being hidden by the [component="post"] elements.

    When you use transform on an element, a new stacking order is created for it. As you are transforming a parent which doesn’t have z-index of it’s own, a new stacking order for itself and child elements is created. As a result, the child element with z-index remains below the [component="post"] elements.

    If you want to see this in action before applying the CSS, you can remove translateX(-100px) from the li[component=post].threaded class and then try the dropdown menu again. You’ll notice it appears correctly this time, although the content is not being shifted because the translate has been removed.

    We replace it with margin which is slightly less performant when it comes to animation, but the nature of NodeBB is to lazyload posts, therefore, this negates the overall impact to the DOM.

    Let me know if this works.

    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

    0
  • DownPWundefined

    Thats work. Many thanks for resolve
    Thanks for the information, I understand better.

    Would have a working solution other than mine for this :

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    Thats work. Many thanks for resolve
    Thanks for the information, I understand better.

    Would have a working solution other than mine for this :

    phenomlabundefined

    @DownPW is that still an issue? I can’t replicate that on your dev site?

    aef70b6b-f702-4a8e-9bab-c0bfd8a34628-image.png

    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

    0
  • DownPWundefined

    Besides, my solution above is only partial. It turns out that sometimes I can no longer click to reply to the post via quick Reply. Nothing happens when I click to enter text

    cache maybe. I have delete the bugfix because not bug fix 🙂

    image.png

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    Besides, my solution above is only partial. It turns out that sometimes I can no longer click to reply to the post via quick Reply. Nothing happens when I click to enter text

    cache maybe. I have delete the bugfix because not bug fix 🙂

    image.png

    phenomlabundefined

    @DownPW said in Threading support for NodeBB:

    cache maybe. I have delete the bugfix because not bug fix

    Yes, I can’t reproduce this.

    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

    0
  • DownPWundefined

    I mean bug is present but my bug fix don’t work properly.

    test to delete my cache and tell you

    PW and WS Spirit alive

    1
  • phenomlabundefined phenomlab referenced this topic on
  • DownPWundefined

    @phenomlab not cache 😞

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    @phenomlab not cache 😞

    phenomlabundefined

    @DownPW PM me the link to the post.

    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

    1
  • DownPWundefined

    actually, I noticed that it’s not on all the posts.
    it seems that these are the posts where the last response is that of the user (selfpost)

    DONE

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    actually, I noticed that it’s not on all the posts.
    it seems that these are the posts where the last response is that of the user (selfpost)

    DONE

    phenomlabundefined

    @DownPW I’ll have a look at this later

    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

    0
  • DownPWundefined

    no problem.
    I have resolve this bug with change/replace this CSS CODE (I have just delete transform directive) :

    li.pt-4.self-post:not(.self-post .topic-owner-post).threaded {
   /*transform: translateX(0px) !important;*/
   transition: transform 0.3s ease !important;
   background: var(--bs-body-bg);
   background: var(--bs-body-navbar)!important;
   padding-right: 30px;
   margin-left: 0rem;
   padding-bottom: 0rem !important;
 }

    I don’t know if is a goodfix or not.

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    no problem.
    I have resolve this bug with change/replace this CSS CODE (I have just delete transform directive) :

    li.pt-4.self-post:not(.self-post .topic-owner-post).threaded {
   /*transform: translateX(0px) !important;*/
   transition: transform 0.3s ease !important;
   background: var(--bs-body-bg);
   background: var(--bs-body-navbar)!important;
   padding-right: 30px;
   margin-left: 0rem;
   padding-bottom: 0rem !important;
 }

    I don’t know if is a goodfix or not.

    phenomlabundefined

    @DownPW yes, was just typing that!

    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

    1
  • DownPWundefined

    ha ha 🙂

    PW and WS Spirit alive

    1
  • phenomlabundefined

    Quick note here for anyone who is using the Threaded Posts code and has recently upgraded to 3.7.0 - only to find the threaded posts is now broken 💔

    This is being caused by the HTML structure changes that 3.7.0 makes in the DOM, meaning the element we used to target pre this release no longer exists. To resolve this, locate the line (within the threaded JS function)

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

    And replace it with

    $('.topic .sticky-tools .thread-tools').append(threadView);

    That should make it re-appear.

    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

    1
  • cagatayundefined

    Mark hi,
    I dont have this code in my js functions.

    0
Log in to reply

Related Topics
  • phenomlabundefined

    NodeBB Twitter / X embeds

    Let's Build It twitter script
    34
    21 Votes
    34 Posts
    15k Views
    DownPWundefined
    @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
  • DownPWundefined

    Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    24k Views
    DownPWundefined
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • phenomlabundefined

    Threaded chat support for NodeBB

    Let's Build It threaded chat code
    35
    1
    19 Votes
    35 Posts
    15k Views
    phenomlabundefined
    @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
  • Pandaundefined

    Interesting Widget code, but can't fetch API

    Solved Customisation nodebb
    26
    2 Votes
    26 Posts
    10k Views
    phenomlabundefined
    @Panda said in Interesting Widget code, but can’t fetch API: How did you drop that widget into the post there? I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already? Yes, here https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044 It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets. @Panda said in Interesting Widget code, but can’t fetch API: Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that? By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget. Hope this makes sense?
  • Pandaundefined

    Difficult to move posts now, on mobile.

    Bugs nodebb
    16
    1
    5 Votes
    16 Posts
    5k Views
    phenomlabundefined
    @DownPW Yes, it is. It’s set far too low meaning other elements with a higher preference will sit over the top of it.
  • Pandaundefined

    Where are widgets stored?

    Solved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    Pandaundefined
    @phenomlab Thanks, have DMed you
  • phenomlabundefined

    Setup OGProxy for use in NodeBB

    Moved Let's Build It ogproxy opengraph npm node
    110
    2
    21 Votes
    110 Posts
    50k Views
    phenomlabundefined
    @crazycells said in Setup OGProxy for use in NodeBB: are they cached for each user separately? No. It’s a shared cache @crazycells said in Setup OGProxy for use in NodeBB: additionally, this is also handling youtube videos etc, right? No. This is handled by nodebb-plugin-ns-embed
  • DownPWundefined

    [NODEBB] Wallpapers BUG on Firefox Mobile ?

    Solved Customisation nodebb wallpaper firefox mobile
    9
    1
    0 Votes
    9 Posts
    3k Views
    phenomlabundefined
    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)