Skip to content

What is this bar called?

Solved Customisation
  • @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 😉

  • @phenomlab

    It seems to be missing things because I don’t have the reading bar in the header and not have the button at the bottom right too 🙄

    Could you provide me with the complete code in JS & CSS as if I was starting from scratch?

  • @DownPW Here you go. Remove any other references you have in custom JS that relate to the previous progress bar, and replace with this

    // Scroll to top function
    $(window).on('action:ajaxify.end', function(data) {
        var matched = false;
        $(document).ready(function() {
            var pageUp = $('#pageUp');
            var bar = $('.reading-meter');
            var perWidth = $('.reading-meter').width();
            
            // Main progressbar function
            function pageScroller() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
    
            document.getElementById("progress-bar").style.width = parseFloat(scrolled).toFixed(0) + "%";
            $('#percentage').val(parseFloat(scrolled).toFixed(0) + "%");
    
            // Prevent the mouse scroll wheel from scrolling down after the pageUp button is clicked
            if ($('#pageUp').is(':focus')) {
            event.preventDefault();
            }
        }
    
            // Bind the pageScroller function to the window's scroll event
            $(window).scroll(function() {
                pageScroller();
            });
    
            // Check the URL and composer visibility separately from the scroll event
            $(window).scroll(function() {
                var thisURL = window.location.href;
                var checkURL = ["topic", "notifications", "user"];
                var isFound = false;
                for (var i = 0, len = checkURL.length; i < len; i++) {
                    if (thisURL.indexOf(checkURL[i]) > -1) {
                        isFound = true;
                        break;
                    }
                }
                if (isFound) {
                    bar.removeClass('show');
                    pageUp.removeClass('show');
                } else {
                    // Exception here is that we don't want the scroll bar to show when the composer is active
                    if ($(window).scrollTop() > 0 && (!$('[component="composer"]').is(":visible"))) {
                        bar.addClass('show');
                        pageUp.addClass('show');
                    } else {
                        bar.removeClass('show');
                        pageUp.removeClass('show');
                    }
                }
            });
    
            // Scroll to top when #pageUp is clicked
            $(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();
                }	
            });
        });
    });
    
    

    Now in the custom header, remove the previous code that probably looks something like this

    <div id="readingposition" class="reading-meter" style="bottom: 0px;">
        <div class="pageUp" id="pageUp"><i class="fa fa-angle-double-left pointer" aria-hidden="true"></i></div>
        <div class="pageDown" id="pageDown"><i class="fa fa-angle-double-right pointer" aria-hidden="true"></i></div>
        <div class="reading-meter-background rounded-1 border border-gray-300 ready">
        <div class="reading-meter-progress-bar rounded-1" id="progress-bar">
            <input disabled="disabled" type="text" id="percentage" name="percentage">
            </div>
      </div>  
      </div>
    

    And replace with this

    <a id="pageUp" class=""><i class="fas fa-chevron-up"></i></a>
    <div id="readingposition" class="reading-meter" style="bottom: 0px;">
        <div class="reading-meter-background rounded-1 border border-gray-300 ready">
        <div class="reading-meter-progress-bar rounded-1" id="progress-bar">
            </div>
      </div>  
      </div>
    

    Now use the CSS provided below (note, that you may have previous CSS that already exists if you used the older version of the progress bar - you should remove that)

    #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%;
    }
    .reading-meter {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        height: 2px !important;
    }
    .reading-meter {
        visibility: hidden;
    }
    .reading-meter.show {
        visibility: visible;
    }
    
    
    div#readingposition {
        background-color: var(--bs-body-navbar) !important;
        color: var(--bs-body-color) !important;
        height: 2px;
        z-index: 1000;
    }
    
    .reading-meter-progress {
        border: 1px solid var(--bs-border-color);
        width: 100%;
    }
    
    .reading-meter-background {
        background: var(--bs-body-bg);
    }
    
    .reading-meter-progress-bar {
        background: var(--bs-progress-bg-bar);
        height: 2px;
    }
    input#percentage {
        display: none;
    }
     
    @media (max-width: 767px) {
        #pageUp {
            bottom: 60px;
            right: 30px;
          }
        }
     
    
    

    That should do it.

  • Will test ASAP, i’m on new OGproxy conf now

  • And where you put/replace this @phenomlab ? :

    @phenomlab said in What is this bar called?:

    And replace with this

    <div id="readingposition" class="reading-meter" style="bottom: 0px;">
        <div class="reading-meter-background rounded-1 border border-gray-300 ready">
        <div class="reading-meter-progress-bar rounded-1" id="progress-bar">
            </div>
      </div>  
      </div>```
    

    In the custom header I guess ?

  • It seems to be worse. The JS no longer works.

    When I remove the customJS and custom Header code. The website is OK

    Could there be an error/omission in the given code? A typo in the code?


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
  • CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    597 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.

  • Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    1k 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.

  • Threaded post support for NodeBB

    Let's Build It
    146
    50 Votes
    146 Posts
    21k Views

    Updated git for above change

    https://github.com/phenomlab/nodebb-harmony-threading/commit/14a4e277521d83d219065ffb14154fd5f5cfac69

  • Custom html in nodebb to prevent cache

    Unsolved Configure
    18
    2 Votes
    18 Posts
    748 Views

    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this

    d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png

    The colour choice is still really hard on the eye, but at least you can now read the text

  • NodeBB upgrade now cant post

    Solved Bugs
    5
    2 Votes
    5 Posts
    391 Views

    @Panda yes, for some reason, that is the case. If you need an urgent response, it’s probably better to post here because of the time difference.

  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    1k Views

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • 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

  • navigation bar is misplaced when the window gets smaller

    Solved Customisation
    23
    10 Votes
    23 Posts
    2k Views

    @DownPW sounds good.