Skip to content

Bug Report

Solved Bugs
47 3 17.4k 1
  • @phenomlab the arrow stays up when I am not on a topic (so there is no post navigation tool)…

    IMG_0036.PNG

    @crazycells that’s intended behaviour. If you press it, it’ll return to the top of the screen and then disappear.

  • @crazycells that’s intended behaviour. If you press it, it’ll return to the top of the screen and then disappear.

    @phenomlab yeah, but isn’t it too up? I thought ideal place would be right above the menu bar on those pages?

  • additionally, do you think a similar button can be made for “go back one page” button? something I have mentioned here before?

    https://community.nodebb.org/topic/17931/page-control-arrows-for-pwa

  • @phenomlab yeah, but isn’t it too up? I thought ideal place would be right above the menu bar on those pages?

    @crazycells Hmm, yes, I see what you mean, but that would require 2 sets of code. Worth thinking about though 🙂

  • additionally, do you think a similar button can be made for “go back one page” button? something I have mentioned here before?

    https://community.nodebb.org/topic/17931/page-control-arrows-for-pwa

    @crazycells Yes, easily. Wouldn’t be difficult at all.

  • @crazycells Yes, easily. Wouldn’t be difficult at all.

  • composer previews have problems… when I show the preview, it becomes transparent.

    Screenshot 2024-04-03 at 12.04.12.png
    Screenshot 2024-04-03 at 12.04.02.png

  • composer previews have problems… when I show the preview, it becomes transparent.

    Screenshot 2024-04-03 at 12.04.12.png
    Screenshot 2024-04-03 at 12.04.02.png

    @crazycells Can you reload your browser and try again?

  • @crazycells Can you reload your browser and try again?

    @phenomlab yeap, it is fixed… somehow I was on the wrong theme… what is the theme that was loaded first? cache issue?

  • @phenomlab yeap, it is fixed… somehow I was on the wrong theme… what is the theme that was loaded first? cache issue?

    @crazycells Yes - sorry. It’s because I’ve been changing the theme names so the old ones aren’t officially supported (as such - they have been renamed). If you are using light mode on your OS, then you’ll get the light theme (which you clearly have). Reloading forces the JS to reevaluate and select the right theme.

    Should have made an announcement about this. Sorry.

  • @crazycells Yes - sorry. It’s because I’ve been changing the theme names so the old ones aren’t officially supported (as such - they have been renamed). If you are using light mode on your OS, then you’ll get the light theme (which you clearly have). Reloading forces the JS to reevaluate and select the right theme.

    Should have made an announcement about this. Sorry.

    @phenomlab no problem at all 🙂 next time before reporting, I will refresh the page…

  • @crazycells Yes - sorry. It’s because I’ve been changing the theme names so the old ones aren’t officially supported (as such - they have been renamed). If you are using light mode on your OS, then you’ll get the light theme (which you clearly have). Reloading forces the JS to reevaluate and select the right theme.

    Should have made an announcement about this. Sorry.

    @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…

  • @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 Good points. Thanks. I will review this.

  • @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
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    Thank you Mark, the changes look fantastic!!
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    13k Views
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • Composer options on nodebb

    Solved Configure nodebb
    8
    1
    3 Votes
    8 Posts
    2k Views
    @Panda You should be able to expose the CSS for these using F12 to get into console [image: 1686833368846-3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png] [image: 1686833399483-a2b8ed46-4157-4ff2-85f0-576543380107-image.png] That should then expose the element once selected [image: 1686833431032-89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png] Here’s the below CSS you need based on the screenshot provided. .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • Smart Widgets

    Solved Configure nodebb
    9
    3 Votes
    9 Posts
    3k Views
    @Panda said in Smart Widgets: So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object? It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train
  • NodeBB v3

    Announcements nodebb v3 nodebb
    2
    3 Votes
    2 Posts
    1k Views
    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.
  • Recent Cards plugin customization

    Solved Customisation nodebb
    21
    1
    13 Votes
    21 Posts
    11k 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
    4k 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; }
  • 0 Votes
    9 Posts
    3k Views
    @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 ?)