Skip to content

Threaded post support for NodeBB

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

    nope for me

    image.png

  • wrote on last edited by DownPW
    #65

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

  • no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    wrote on last edited by
    #66

    @DownPW Because your CSS has not been altered dude.

    ebe21e6c-5409-498f-a5dd-605403c52622-image.png

    Try now. It works for me?

  • wrote on last edited by DownPW
    #67

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

  • I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    wrote on last edited by
    #68

    @DownPW Isn’t that correct, or do you want --bs-body-navbar ?

  • no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    wrote on last edited by
    #69

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

  • @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    wrote on last edited by
    #70

    @DownPW Right. Hold on.

  • wrote on last edited by DownPW
    #71

    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

  • 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

    wrote on last edited by
    #72

    @DownPW Try now.

  • wrote on last edited by
    #73

    🙂

    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?

  • 🙂

    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?

    wrote on last edited by
    #74

    @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);
      }
    
  • wrote on last edited by DownPW
    #75

    hmm Ok
    For once I don’t understand the logic 🙂

    Just one thing I have added befor one Thread ON mode :

    image.png
    image.png

  • hmm Ok
    For once I don’t understand the logic 🙂

    Just one thing I have added befor one Thread ON mode :

    image.png
    image.png

    wrote on last edited by
    #76

    @DownPW Caching issue I think. Seems to work ok for me

    Threading On

    00542631-8e3c-4ca7-b7ec-bb851a883bdb-image.png

    Threading Off

    f82a0eba-8361-4900-93e1-2af05e3b33a3-image.png

  • wrote on last edited by DownPW
    #77

    Hmm problem, incognito mode and on your screen = not thread mode with Threadinf ON 🙂 (see my last self post/last post)

    And I see this rest of thread ON border-radius on vanilla :

    image.png

    Seem very hard to understand

  • Hmm problem, incognito mode and on your screen = not thread mode with Threadinf ON 🙂 (see my last self post/last post)

    And I see this rest of thread ON border-radius on vanilla :

    image.png

    Seem very hard to understand

    wrote on last edited by phenomlab
    #78

    @DownPW This one?

    9ab34fe4-53c7-4466-b2bf-ee77a9495cf1-image.png

    Seems fine to me?

    For the radius issue on highlight, this will fix it (I updated your CSS already)

    .page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline > [component="post/placeholder"].highlight, .page-topic .topic .posts.timeline > [component=post].highlight {
        border-left: 2px solid #0d6efd !important;
        margin-left: 22px;
        transition: transform 0.3s ease !important;
        border-radius: 0px;
    }
    

    7de4ff82-561b-49f2-9e80-b4876e2caaba-image.png

  • wrote on last edited by
    #79

    nope we have top and bottom left border radius. On vanilla harmony, we have not

  • wrote on last edited by
    #80

    but the most important thing for now is that we lost the Threading effect

  • nope we have top and bottom left border radius. On vanilla harmony, we have not

    wrote on last edited by
    #81

    @DownPW said in Threading support for NodeBB:

    nope we have top and bottom left border radius. On vanilla harmony, we have not

    No, you don’t - see my screenshot…

  • wrote on last edited by
    #82

    ah ok you just edited

  • but the most important thing for now is that we lost the Threading effect

    wrote on last edited by phenomlab
    #83

    @DownPW said in Threading support for NodeBB:

    but the most important thing for now is that we lost the Threading effect

    Nope. I see this as working correctly in standard and incognito mode.


Related Topics
  • 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
  • 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
  • NodeBB socket with CloudFlare

    Solved Performance socket cloudflare nodebb
    24
    3 Votes
    24 Posts
    14k Views
    DownPW
    Solved. Tuto here and here
  • www. Infront stops website access?

    Solved Configure nodebb
    10
    1 Votes
    10 Posts
    3k Views
    phenomlab
    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    phenomlab
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • background color of the footer area

    Solved Customisation nodebb
    7
    1
    7 Votes
    7 Posts
    4k Views
    crazycells
    @phenomlab thank you very much
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal