Skip to content

What is this bar called?

Solved Customisation
92 3 41.1k 1
  • 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?

    wrote on last edited by
    #10

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

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

    wrote on last edited by phenomlab
    #11

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

  • wrote on last edited by
    #12

    Much improved!

  • phenomlab phenomlab has marked this topic as unsolved on
  • phenomlab phenomlab has marked this topic as solved on
  • wrote on last edited by
    #13

    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

  • 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

    wrote on last edited by
    #14

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

  • wrote on last edited by
    #15

    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?

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

    wrote on last edited by
    #16

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

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

    wrote on last edited by Panda
    #17

    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

  • 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

    wrote on last edited by phenomlab
    #18

    @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

  • 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

    wrote on last edited by
    #19

    @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 %(#f50000)[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…

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

    wrote on last edited by
    #20

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

  • wrote on last edited by DownPW
    #21

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

  • @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 %(#f50000)[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…

    wrote on last edited by Panda
    #22

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

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

    wrote on last edited by phenomlab
    #23

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

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

    wrote on last edited by
    #24

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

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

    wrote on last edited by
    #25

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

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

    wrote on last edited by phenomlab
    #26

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

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

    wrote on last edited by
    #27

    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

  • 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

    wrote on last edited by
    #28

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

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

    wrote on last edited by
    #29

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


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
  • 2 Votes
    1 Posts
    639 Views
    No one has replied
  • how to prevent DDoS attacks ?

    Solved Vulnerability ddos nodebb
    34
    17 Votes
    34 Posts
    14k Views
    crazycells
    @phenomlab thank you very much, this was helpful. Everything looks ok
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    20k Views
    phenomlab
    @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 [image: 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?)
  • Threaded post support for NodeBB

    Let's Build It threading nodebb
    146
    3
    50 Votes
    146 Posts
    116k Views
    phenomlab
    Updated git for above change https://github.com/phenomlab/nodebb-harmony-threading/commit/14a4e277521d83d219065ffb14154fd5f5cfac69
  • Where are widgets stored?

    Solved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    Panda
    @phenomlab Thanks, have DMed you
  • Issues with Progress Bar on v3

    Solved Customisation
    48
    1
    14 Votes
    48 Posts
    20k Views
    phenomlab
    @Panda You could use the below .page-topic .pagination-block.ready { display: none; }
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    19k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    6k Views
    phenomlab
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3