Skip to content

Bug Report

Solved Bugs
47 3 15.3k 1
  • @phenomlab There is one thing I have to mention, yesterday I was checking sudonix as PWA (but my comment can be thought as related to general mobile design) and I realized that there is no easy way to go to /categories page… It is indirect through the category panel…

    If someone is accessing your website first time, I believe that is the page they would want to see to understand the general theme/aim of the forum… This is usually done either clicking the title or clicking the home icon…

    But for this website, they both direct you to the /recent page… I knew how to reach there since I use NodeBB daily but if I was outside user, I would struggle little bit 😄

    Of course, if everything is intentional, then there is no problem… I just wanted to bring this to your attention…

    @crazycells hmm. Just looking at this and I do see what you mean but if you tap the category icon it should auto expand with the first option in the list being “All Categories” which will take you to /categories.

    In addition, it’s possible to change the default home page in your profile settings.

  • @crazycells hmm. Just looking at this and I do see what you mean but if you tap the category icon it should auto expand with the first option in the list being “All Categories” which will take you to /categories.

    In addition, it’s possible to change the default home page in your profile settings.

    @phenomlab yes I know, but that is “two clicks”… nowadays “two” is too much to get the main page 😄

    it is ok for me, I know how to navigate, but I was talking from a new user’s perspective (even unregistered one)… no need for any change if it is OK for you 🙂

  • @phenomlab yes I know, but that is “two clicks”… nowadays “two” is too much to get the main page 😄

    it is ok for me, I know how to navigate, but I was talking from a new user’s perspective (even unregistered one)… no need for any change if it is OK for you 🙂

    @crazycells yep. I get it! Good point.

  • @crazycells yep. I get it! Good point.

    Hi @phenomlab , upvote icon is better as a triangle, however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?) .

  • Hi @phenomlab , upvote icon is better as a triangle, however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?) .

    @crazycells hmm. Nice idea, but not that easy to implement unless there’s a hook that fires (not sure there is). Could be done with JS but that could be too the detriment of page loads and ajax calls.

  • @crazycells hmm. Nice idea, but not that easy to implement unless there’s a hook that fires (not sure there is). Could be done with JS but that could be too the detriment of page loads and ajax calls.

    @phenomlab I think in this case a custom CSS code suffice…

    we were using something like this:

    .topic [component="post/upvote"].upvoted {
        color: #085EAC;
    }
    
    .topic [component="post/upvote"].upvoted {
      border: 0px !important;
    }
    
    .topic [component="post/downvote"].downvoted {
            color: #EF4042;
    }
    
    .topic [component="post/downvote"].downvoted {
      border: 0px !important;
    }
    
    
  • @phenomlab I think in this case a custom CSS code suffice…

    we were using something like this:

    .topic [component="post/upvote"].upvoted {
        color: #085EAC;
    }
    
    .topic [component="post/upvote"].upvoted {
      border: 0px !important;
    }
    
    .topic [component="post/downvote"].downvoted {
            color: #EF4042;
    }
    
    .topic [component="post/downvote"].downvoted {
      border: 0px !important;
    }
    
    

    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler!

    EDIT - seems this is pretty straightforward, and only needs the below CSS

    .upvoted i {
        color: var(--bs-user-level) !important;
    }
    

    This then yields

    3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png

    However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request

    however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    2k Views
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • 4 Votes
    7 Posts
    2k Views
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • Following the API docs but its not clear ...

    Solved Customisation api nodebb
    8
    2 Votes
    8 Posts
    2k Views
    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    @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.
  • Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    1k Views
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Recent Cards plugin customization

    Solved Customisation nodebb
    21
    1
    13 Votes
    21 Posts
    10k Views
    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border In essence, the below should work $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • FIXED: Annoying cosmetic bug on mobile view

    Moved Bugs bugs
    13
    3 Votes
    13 Posts
    3k Views
    And now, after all this time I finally discovered that the CSS I previously referenced was for something else - and used the same CSS name, so I’ve had to reinstate this block .tab-content { max-height: 0; padding: 0 2em; color: #898989; background: #eeeeee; transition: all 0.35s; margin-top: -5px; } And, add this below to make it more specific. .emoji-tabs .tab-content { height: 100%; max-height: 100%; padding: 0; margin: 0; }