Skip to content

What is this bar called?

Solved Customisation
  • On this forum there is this bar
    Screenshot_20230705_190131_Chrome~2.jpg

    Have to be honest, I don’t like it for a few reasons.
    It gets in the way, and its % reading is meaningless, as it may go up to say 70% then more posts load and it drops to 34% for example. So it doesnt tell you how far through the full list you are anyway.

    I referred to it as the progress bar previously, when trying to remove it. Is that correct name?
    I believed it was a ‘core function’ but I see the Nodebb’s own forum doesnt seem to have it on its home-page now?

  • @Panda I thought some more about this specific issue, and the progress bar is clunky. The original bar was part of the persona theme and it’s intention was to replicate the progress bar you had when reading through topics. However, the harmony theme has changed the landscape in terms of how data is interpreted, and so it does actually make sense to review this.

    I’ve refactored the code to make the progress bar much less obtrusive, a bit more “modern”, and more importantly, it appears at the top (2px height) so it no longer interferes with the mobile view.

    You may need to reload to see the changes.

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

    It gets in the way, and its % reading is meaningless, as it may go up to say 70% then more posts load and it drops to 34% for example. So it doesnt tell you how far through the full list you are anyway.

    That is in fact by design. The progress bar will hit around 70% and then action:posts.loaded will fire (unlimited pagination) which adds more content to the DOM so the page height will increase, which is why it jumps back down to 34% as that reflects the real window height.

    @Panda said in What is this bar called?:

    I believed it was a ‘core function’ but I see the Nodebb’s own forum doesnt seem to have it now?

    It was never a core function - it’s a Sudonix one. NodeBB never actually had this in posts/categories view etc. It’s been adopted multiple times by others on this forum and is actively supported.

    @Panda said in What is this bar called?:

    Have to be honest, I don’t like it

    I’ll admit, since 3.x it’s less of a requirement as the theme changed from the previous default of persona to harmony and it’s likely I will create an iteration of it so it’s less intrusive, but it does have value in terms of showing where you are on a page and to my mind, it should remain there - but perhaps not in the post and category lists, and was originally based on the pace library but was subsequently re-written to make it independent.

    However, simply stating “I don’t like it” is not enough reason for it to be removed. For example, what do you think Amazon would say if you told them you didn’t like the colours they used? They’d likely ignore you.

    However, this platform is a community space, and I want people to feel comfortable using it. If the majority feel that the progress bar should be removed, then it will be.

  • phenomlabundefined phenomlab has marked this topic as solved on
  • Ok, point taken.
    Im not knocking the coding of it, i should have said it has less utility on homepage where the % isnt representitive when the loadable list is pages long.
    It makes more sense in a thread where it shows how far through the post you are.
    I have a flip phone (narrow but tall) which I often use in landscape mode. And there the bar uses a lot of screen

  • @Panda And that’s a fair statement in itself. Can you send me a screenshot of what that looks like?

  • @phenomlab Now heres a funny thing…
    As if by magic, that bar is much narrower on a second mobile I tested
    Screenshot_20230705_204111_Chrome.jpg

    Actually its narrower on one phone, but not the other!!
    Screenshot_20230705_204328_Chrome.jpg

    They are both Samsung Andriod, but what a difference

  • @Panda do they have different screen resolutions?

  • @phenomlab
    Slightly, the s21 is 1080 x 2400
    But the bar display is very different!

  • @Panda yes, I see that. The issue here is that both of those styles trigger on different viewports (based on bootstrap) so my guess is that the flip phone you have probably renders in the same way as (for example) an iPad does, which would explain the layout if the same viewport is being used.

  • Ok, out of interest, can you explain how the bootstrap logic works here?
    How does a relatively small % change in pixels make a full width bar change into a small bar (which is better)
    Could the logic be changed to always make it small?

  • @Panda It really depends on the resolution supplied by the device. More information around how breakpoints (viewports) work can be found here

    https://getbootstrap.com/docs/5.0/layout/breakpoints/

  • @Panda I thought some more about this specific issue, and the progress bar is clunky. The original bar was part of the persona theme and it’s intention was to replicate the progress bar you had when reading through topics. However, the harmony theme has changed the landscape in terms of how data is interpreted, and so it does actually make sense to review this.

    I’ve refactored the code to make the progress bar much less obtrusive, a bit more “modern”, and more importantly, it appears at the top (2px height) so it no longer interferes with the mobile view.

    You may need to reload to see the changes.

  • Much improved!

  • phenomlabundefined phenomlab has marked this topic as unsolved on
  • phenomlabundefined phenomlab has marked this topic as solved on
  • It’s a shame we lose the possibility of going down and up. Are you abandoning the bar to flarum? If yes, can be added a button at the bottom right as on v2.x and remove the scroll bar on the right

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

    Are you abandoning the bar to flarum? If yes, can be added a button at the bottom right as on v2.x and remove the scroll bar on the right

    Sorry, I’m not sure I follow here with the reference to Flarum? If you are talking about the return to top facility as it was (floating bottom right) then yes, I can easily put that back.

  • 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.


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
  • Whitespace fixes in Nodebb

    Solved Customisation
    18
    7 Votes
    18 Posts
    1k Views

    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, you’ll notice that the ranks are now icons.

    I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.

  • Why CSS acts different in Desktop?

    Bugs
    11
    4 Votes
    11 Posts
    585 Views

    @DownPW I’d have to agree with that.

  • 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 loading emojis

    Solved Configure
    16
    1 Votes
    16 Posts
    670 Views

    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version.

    You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.

  • 36 Votes
    55 Posts
    5k Views

    @DownPW I see why. The code relies on the existence of

    [component="topic/quickreply/container"]

    However, this by definition means that the below has to be enabled

    aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png

    It will then work

    7fb38631-e0f3-46ef-b652-00929d927b13-image.png

    For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.

    The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on 🙂

  • Footer bar add center text

    Solved Customisation
    41
    8 Votes
    41 Posts
    4k Views

    @phenomlab said in Footer bar add center text:

    div#console-nav-tab

    Ah ok test with bottom: 0px !important; idem

  • [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    628 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • 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