Skip to content

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

Related Topics
  • 5 Votes
    3 Posts
    515 Views

    Very good like always 😉

  • 1 Votes
    26 Posts
    1k Views

    Yes ogproxy too is functionnal on dev

  • 15 Votes
    27 Posts
    1k Views

    For anyone else coming here and is struggling to get pm2 to work with Umami (as I did - it started, but never seemed to work after a reboot which is pretty useless), you can use the below. Obviously, change the parts noted inside the [brackets]. Follow the below instructions:

    Instructions

    Open a terminal and create a new systemd service file:

    sudo nano /etc/systemd/system/umami.service

    Add the following content to the file:

    [Unit] Description=Umami Analytics Server After=network.target [Service] Type=simple User=[umami user] WorkingDirectory=[path to umami] ExecStart=/usr/local/bin/node [path to umami]/node_modules/.bin/next start Restart=on-failure [Install] WantedBy=multi-user.target

    Replace [umami user] with the username of the user that should run the Umami service, and [path to umami] with the actual path to your Umami installation.

    Save the file and exit the editor.

    Reload the systemd manager configuration:

    sudo systemctl daemon-reload

    Enable the Umami service to start on boot:

    sudo systemctl enable umami.service

    Start the Umami service:

    sudo systemctl start umami.service

    You can check the status of the service with:

    sudo systemctl status umami.service

    This systemd service file will ensure that Umami starts automatically when the system boots, and it will restart the service if it fails. Remember to adjust the WorkingDirectory and ExecStart paths according to where Umami is installed on your system, and ensure that Node.js is installed and accessible at /usr/bin/node (or adjust the path to Node.js as necessary).

  • 15 Votes
    51 Posts
    3k 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
    2k 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

  • 50 Votes
    146 Posts
    18k Views

    Updated git for above change

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

  • 20 Votes
    110 Posts
    9k Views

    @crazycells said in Setup OGProxy for use in NodeBB:

    are they cached for each user separately?

    No. It’s a shared cache

    @crazycells said in Setup OGProxy for use in NodeBB:

    additionally, this is also handling youtube videos etc, right?

    No. This is handled by nodebb-plugin-ns-embed

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