Skip to content

What is this bar called?

Solved Customisation
  • I think it’s more interesting to keep the scroll bar on the right side rather than at the top to keep the vertical logic of NodeBB 3.x And rather than having a navigation bar at the bottom right with the percentage, maybe putting back a button as in V2 to go up to the top of the page would be good. I don’t really know, the old bar seemed to be a problem?

  • @DownPW I agree with the button, which would be transparent as previous. However, the bar as I explained was a copy of the old persona theme progress bar. It looked good at the time, but since Harmony, it’s out of place in my view and if I’m being honest, a little antiqued compared to the rest of the site.

    Navigation control however is important, so I will put the scroll to top feature back, but I want to think about how this will look across the site and how it impacts the user experience.

    I haven’t just refactored the progress bar based on a whim or “demand” from someone. If you recall, the progress bar was originally designed in the way it is now, and changed over time to fit in the persona theme.

  • Just goes to show
    'You cant please All of the people, All of the time!’

    @DownPW said in What is this bar called?:

    I don’t really know, the old bar seemed to be a problem?

    It took up a lot of screen space on some mobile views.
    And on the home screen, what was the % even meaning, as more content loads as you go down anyway.

    There seems to be a vertical bar anyway with the theme, its only there for a second when scrolling up or down
    Screenshot_20230708_105933_Chrome~2.jpg

    Far be it for me, with half a star, to disagree with someone with 4 stars, but it makes no difference to me if its vertical or horizontal.
    Being thinner is an improvement, in that it is less intrusive

    Anyway its not even changed in the Topics pages
    Screen.jpg

  • @Panda it’s not changed in the topic pages because that is the NodeBB navigation bar - not the sudonix one. I’m not going to be disabling that one as it’s part of the core.

    Edit - for the avoidance of any doubt, here’s the link to the original post where the progress bar was in fact the same as it’s been recently modified to be

    https://sudonix.org/topic/182/reading-meter-progress-bar?_=1688782995096

  • @Panda said in What is this bar called?:

    Far be it for me, with half a star, to disagree with someone with 4 stars, but it makes no difference to me if its vertical or horizontal.

    I wanted to add clarity to this point here for anyone else following this thread. The rating you have has absolutely zero bearing when it comes to open discussion. There is no seniority over someone with half a star (for example) for someone with 5 stars.

    Both @DownPW and @Panda have made some very valid points and as a community it’s important that everyone

    • has a voice
    • is heard
    • is treated as an equal

    I understand that it’s difficult to convey tone when responding to something, or trying to get your point across, but please remember that English isn’t everyone’s primary language here, so sometimes things do get lost in translation, or don’t come across as the original poster intended.

    Either way, if you aren’t sure, it’s a good idea to ask for clarification (as I did previously in this thread).

    Thanks for reading -back to the topic in hand…

  • @phenomlab said in What is this bar called?:

    Navigation control however is important, so I will put the scroll to top feature back, but I want to think about how this will look across the site and how it impacts the user experience.

    It’s back!

    The scroll top top function has been added back into the mix, and is now available in the usual manner. As before, it will not appear on posts within topics, as the NodeBB scrubber bar already takes care of that. The arrow itself is transparent, meaning if you are using a mobile and this function activates itself, you’ll still be able to see the text beneath, so not invasive at all.

  • Seems to be very good. Can you give code CSS & JS for that and I Can test ?

  • @phenomlab yes, I was joking about my half star, but youre right, tone is hard to convey. I should have put a laughing emoji, as attempt at humour can be misinterpreted.

    Incidentally what is the fractional, not even half, star about?!
    When do I earn a full star? 😊

  • @Panda no issues at all. If you click on your half star, it’ll tell you how far away you are from the next level. At the rate you’re interacting, it won’t take long 👍

    Edit - if you go to your profile page and click your current level, that will tell you how many points you need to get to the next level.

    Seems you need 8 points.

  • @Panda said in What is this bar called?:

    Incidentally what is the fractional, not even half, star about?!

    You know, that’s a good point. There are lots of other forums around that use the same schematic, so I was being lazy and followed their lead. Open to suggestions on your this though.

  • @phenomlab its a minor detail really.
    I clicked on it and saw Im not far away from a full star, but thats actually a hollow star (not filled in)
    So I suppose you would expect a half filled in star to progress to a filled in star?
    Anyway its a tiny detail.
    If using unfilled stars, maybe just start with one and increase the number of stars.

  • @Panda yes, that’s a really good point. I’m using the pro version of Font Awesome but looking at it now after the point you just made, it seems somewhat nonsensical and should be changed.

    Either 0-50 gets one star and so on, or I use a different icon to show new users. I didn’t want anyone coming here to be without any form of recognition hence 0-50.

  • On a more important point, I made a post on Nodebb trying to clarify why Reputation is stored as two values in the database
    A reputation value
    A reputation score

    It seems somewhat duplicated, can you explain the difference

  • @Panda I think the value is for the icon, and the score is the actual number.

  • @phenomlab
    As a design point, always a risk for bugs having duplicated data.
    It would be better to just store score, and then get the icon from the table that stores icon cutoffs.

  • @Panda yes, that’s hard to argue. I’d just store numbers then use logic to determine which icon should be issued based on that.

    However, I do see the reasoning for NodeBB’s approach s this was previously a community plugin and backwards completely of course has to be considered.

  • @phenomlab
    Just my personal opinion, I wish it had been left as plugin. Im assuming from your comment Reputation code is core now?

    I disabled this reputation on some forums. Have you seen the 10rules of how its calculated?
    One of rules is something like:
    by down-voting the object user loses x% subject to maxmin(5,50) and the subject loses y%, subject to criterias 1-10.
    All sounded a bit complicated!
    I am fundementally minimalist, so despite Flarums list of disadvantages, it has a clean start position.
    NodeBB should be wary of throwing too much in as default and then ending up with bugs.
    Just my opinion

  • @Panda yes, that’s why I disabled down voting here. If you don’t like a post, move on. Simple.

    It’s still a plugin, but officially supported by NodeBB. The user level plugin doesn’t have any bearing on reputation. There is another plugin that exerts greater control over the reputation system and I think you might have that installed (as I do). From recollection, the core values are quite basic unless there’s something in the underlying code that would dictate otherwise?

  • @DownPW said in What is this bar called?:

    Seems to be very good. Can you give code CSS & JS for that and I Can test ?

    Of course - but beware as some of this code will be in use in the existing progress bar you have (specifically #pageup)

    JS

    $(document).on("click", "#pageUp", function(e) {
    	const firstTopic = $('[component="category/topic"][data-index="0"]');
    	if (firstTopic.length) {
    		$("html, body").animate({
    			scrollTop: 0
    		}, '300');
    	} else {
    		ajaxify.refresh();
    	}	
    });
    

    CSS

    #pageUp {
      display: inline-block;
      background: var(--bs-body-component-active);
      width: 50px;
      height: 50px;
      text-align: center;
      border-radius: 0.375rem;
      position: fixed;
      bottom: 70px;
      right: 80px;
      transition: background-color .3s, opacity .5s, visibility .5s;
      opacity: 0;
      visibility: hidden;
    }
    #pageUp.show {
      opacity: 1;
      visibility: visible;
      z-index: 10000;
      color: var(--bs-body-navbar-color) !important;
    }
    a#pageUp.show:hover {
      background: var(--bs-dropdown-link-hover-bg);
      border: 1px solid var(--bs-border-color);
    }
    a#pageUp i {
        position: absolute;
        top: 32%;
        left: 35%;
    }
    
    @media (max-width: 767px) {
        #pageUp {
            bottom: 60px;
            right: 30px;
          }
        }
    
  • Hi @phenomlab

    Thanks for sharing 🙂

    It’s the code for this reading bar :

    image.png

    In my point of view, it’s definitively better 😉


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Planned sunset of NTFY plugin

    Pinned Announcements
    7
    8 Votes
    7 Posts
    150 Views

    I’ve noticed that I’m the only one subscribed to the push notifications on this site. If you were using NTFY previously, and have noticed that you’ve not had any alerts for a while, it’s because this feature has been disabled.

    You’ll now need to use the push notification to replace NTFY as mentioned in the first post.

  • CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    598 Views

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • how to prevent DDoS attacks ?

    Solved Vulnerability
    34
    17 Votes
    34 Posts
    2k Views

    @phenomlab thank you very much, this was helpful. Everything looks ok 🙂

  • 4 Votes
    7 Posts
    752 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…

  • Interesting Widget code, but can't fetch API

    Solved Customisation
    26
    2 Votes
    26 Posts
    2k Views

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

  • Issues with Progress Bar on v3

    Solved Customisation
    48
    14 Votes
    48 Posts
    3k Views

    @Panda You could use the below

    .page-topic .pagination-block.ready { display: none; }
  • NodeBB 1.19.3

    Solved Performance
    33
    4 Votes
    33 Posts
    3k Views

    @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

    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

  • Reading Meter Progress bar

    Locked Solved Customisation
    15
    9 Votes
    15 Posts
    1k Views

    For anyone else following this thread, please see
    https://sudonix.com/topic/467/issues-with-progress-bar-on-v3