Visual enhancement to best answer

Moved Let's Build It
  • As much as I dislike Stack Overflow (see the below video for examples - it’s one of reasons why I created Sudonix in order to establish a fairer experience. This is an issue that sadly, has been rife on SA for years - in essence, it’s something of a toxic experience)

    However, I do like the way they show accepted answers to posts

    Below is an example

    c6cc51fa-90cf-4947-8d11-f690895aa2dc-image.png

    Simplistic, but effective. I also like the way it’s presented in NodeBB, so decided to create something of a “mash-up” to share with others.

    Here’s the default NodeBB experience

    7c14f469-bda4-4ba8-a567-680f7f916bc7-image.png

    It’s effective - green border, with “solution” clearly stamped on it. Let’s take this a bit further with how we do this on Sudonix

    66f96dd4-4d2f-489b-9b7c-e681c19fd6e4-image.png

    Snazzy eh ?? 🙂

    In reality, this isn’t difficult to do at all. Essentially, we just use the CSS :after technique like below

    .posts [component=post][data-index="-1"].isSolved:before {
        border-radius: 4px;
        top: -0.25rem;
    }
        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 43px;
            right: 35px;
            font-size: 3rem;
            font-weight: 400;
            color: #77B300;
        }
    

    Note that I’m using the Pro version of Font Awesome here, so if you want to use Font Awesome Free, you’ll need to substitute the block as below

        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Free";
            position: absolute;
            top: 43px;
            right: 35px;
            font-size: 3rem;
            font-weight: 900;
            color: #77B300;
        }
    

    As I’m also using an absolute placement here, it’s important I define two viewport classes, so

    @media (min-width: 1200px) {
        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 43px;
            right: 35px;
            font-size: 3rem;
            font-weight: 400;
            color: #77B300;
        }
    }
    

    And for mobile

    @media (max-width: 767px) {
        .isSolved .clearfix.post-header {
            margin-left: 5px !important;
            margin-top: 20px;
        }
        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 14px;
            right: 97px;
            font-size: 2rem;
            font-weight: 400;
            color: #77B300;
        }
    }
    

    This means that in mobile view, I get the below

    e1a4443c-407f-4749-ba31-ac8d97327b60-image.png

    And when you combine CSS, imagination, code blocks, and real answers for real people, you get something like this

    ece7dabc-81ea-45ac-8711-e4411c573290-image.png

    Enjoy…

  • phenomlabundefined phenomlab moved this topic from Announcements on
  • Looks very great !!

    Good job Mark and Thanks for sharing 🙂

  • I have test your code on my forum @phenomlab

    And I have this problem with police block content :

    8a1b7e9b-9fe8-4bfc-934b-be772ae49114-image.png

    I resolv it by adding padding bottom on content with this code:

    .isSolved .content {
        padding-top: 25px!important;
    }
    

    And I use this code for desktop :

    .isSolved:after {
        content: "\f058";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        padding-left: 10px;
        padding-bottom: 10px !important;
        top: 40px;
        right: 40px;
        font-size: 2.5rem;
        font-weight: 400;
        color: #5cb85c;
    } 
    

    And this for Mobile:

    @media (max-width: 767px) {
    .isSolved .clearfix.post-header {
        margin-left: -8px !important;
    }
        
    .posts [component=post][data-index="-1"].isSolved:before {
        margin-right: -10px;
    }
     
    .isSolved:after {
        content: "\f058";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        top: 40px;
        right: 30px;
        font-size: 2.5rem;
        font-weight: 400;
        color: #77B300;
    }
    }
    

    RESULT:

    Desktop:

    d90f682c-a432-4b05-96a9-ae72e9ec47d9-image.png

    Mobile:

    0c7db06d-5b42-4f23-908a-5761d83b08b5-image.png

    Thanks Mark

  • @DownPW yes, I actually hide the welcome message on topics so I never factored this in 👍

  • Me too, disabled on mobile.

  • @DownPW Just reviewing this, as I just experienced the same symptoms as you. I decided on the below CSS, which might work better

    @media (min-width: 1200px)
    .isSolved p {
        width: 95%;
    }
    }
    

    Some examples of how this looks.

    On shorter messages, you don’t really notice the lesser width. Essentially, we go from this

    921d63b9-bc02-4f28-947c-df696d88b33e-image.png

    to this

    7ef5465c-e75d-40fe-b856-494f10211a81-image.png

    On larger messages, it looks as below

    3168cd33-9984-4553-9c56-dd9fc9972a44-image.png

    Because we only target the p element, and nothing else, the text width gets reduced, but other elements remain unchanged, so you don’t really notice the width being reduced 🙂

  • Oh yeah great 🙂

  • phenomlabundefined phenomlab moved this topic from Guides on

  • 19 Votes
    35 Posts
    63 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
    361 Views

    ha ha 🙂

  • 3 Votes
    2 Posts
    43 Views

    @phenomlab , thanks for the explanation. it looks great!
    a quite traditional stats box, just like how it has been in old forums 🙂

  • 18 Votes
    106 Posts
    493 Views

    @phenomlab i think did it 🙂

  • 14 Votes
    14 Posts
    292 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 🙂

  • 11 Votes
    14 Posts
    186 Views

    @dave1904 excellent news. Thanks for the feedback

  • 4 Votes
    4 Posts
    165 Views

    @crazycells yeah, I’ve noticed that as well. What is it with buzzwords? All they signify to me is that you can “talk the talk” but not “walk the walk”. Anyone can read something on the internet, and after a while, probably recite it word for word, but do they truly understand it?

    I interviewed a guy once who certainly knew buzzwords like the back of his hand, but failed a technical test miserably.

  • 2 Votes
    5 Posts
    196 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.