Custom Board Stats Widget

Moved Let's Build It
  • I had someone mention to me yesterday that they liked the footer widget present on the Categories page, which looks like the below

    86490b64-c376-4d65-bb58-7ab6974b3531-image.png

    This isn’t custom code at all, but in fact the “Board Stats” widget which is added when nodebb-widget-board-stats is installed. However, there were various elements I didn’t like - particularly, the layout, which by default (on here) would have looked like this

    8afe3e4a-3d0b-4600-94ee-2f49fc9755e1-image.png

    There’s nothing “wrong” with it (apart from the fact that the calculations seem a little off with actual users vs guests - not a show stopper for me), but I didn’t want some elements to be displayed, and so I used the below CSS to hide them, and then modify the alignment so it looks like the first image

    .widget-board-stats {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
    }
    .widget-board-stats h3 {
        display: none;
    }
    

    This basically hides anything in that widget that uses h3 as the header, and then arranges the widget itself so that flex-direction and justify-content are included which lines up everything nicely.

    If you’d like the widget to look like a card, you can set that in the widget itself by adding the below code into the widget container

    <div class="card"><h5 class="card-header">{{title}}</h5><div class="card-body">{{body}}</div></div>
    

    Effectively, the below.

    72cd64c2-cd44-4195-8906-438d9126ee45-image.png

    Or, you can drag the card element into the container area like the below, and drop it

    fabebce6-0b44-4ad9-9160-023103dc0aa5-image.png

    Enjoy.

  • phenomlabundefined phenomlab moved this topic from Code Respository on
  • @phenomlab , thanks for the explanation. it looks great!
    a quite traditional stats box, just like how it has been in old forums 🙂


  • 15 Votes
    26 Posts
    102 Views

    @JAC You know you want to… I challenge you to resist!

  • 15 Votes
    51 Posts
    161 Views

    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS

  • 19 Votes
    35 Posts
    240 Views

    @DownPW said in Threaded chat support for NodeBB:

    Better like this : add shadow and border-left on self answer

    Of course - you style to your own requirements and taste 🙂 I’ll commit that CSS we discussed yesterday also

  • 47 Votes
    142 Posts
    2k Views

    ha ha 🙂

  • Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    106 Views
  • 14 Votes
    14 Posts
    354 Views

    Just circling back here as I’ve been helping @cagatay this morning on his site, and noticed that if you use a mixture of fa-brands and fa-solid then the code supplied above may produce some odd looking results.

    If this is the case, replace the function with this

    $(document).ready(function() { $.getJSON('/api/categories', function(data, status) { $.each(data.categories, function(key, value) { var iconClass = 'fa'; // Default to 'fa' if the icon type is not recognized // Check if the icon is FontAwesome Unicode if (this.icon.startsWith('&#x') || this.icon.startsWith('&#xf')) { iconClass = 'fa'; } else if (this.icon.startsWith('fab')) { iconClass = 'fab'; } var categorylist = $(" \ <li class='dropdown-item tree-root'><span class='category-menu'><i class='" + iconClass + " " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \ <ul class='tree-branch' style='list-style: none;'>" + this.children.map(c => { var childIconClass = 'fa'; // Default to 'fa' for child icons // Check if the child icon is FontAwesome Unicode if (c.icon.startsWith('&#x') || c.icon.startsWith('&#xf')) { childIconClass = 'fas'; } else if (c.icon.startsWith('fab')) { childIconClass = 'fab'; } return `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='${childIconClass} ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`; }).join(" ") + "</ul>" ); if ($(window).width() < 767) { $(".bottombar #thecategories").append(categorylist); } else { $(".sidebar-left #thecategories").append(categorylist); } }); }); });

    In fact, if you want to replace it anyway to make your experience “future proof”, you can use this code now 🙂

  • About this category

    Pinned Let's Build It
    5
    2 Votes
    5 Posts
    223 Views

    I’m going to be adding some new posts to the labs category, and will use this going forward when writing code that could easily be adopted by others (a great example is the OGProxy, which I will move here).

    If you have any ideas of would like a walkthrough of how to set something up, then this is the place it should go.

  • 6 Votes
    25 Posts
    786 Views

    @phenomlab said in NodeBB vs Discourse:

    Hetzner eh ? I use them also. In fact, Sudonix is hosted in Nuremberg 👍

    yes i’m also at hetzner, i have been a customer there for years with a reseller account for domains. My VPS that I host there are also in Nuremberg 🙂