Sudonix

    Sudonix

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags
    • Users
    • Groups
    • Solved
    • More
      • Contact
      • Donate
      • FAQ
      • Founder's Journey
      • Terms and Policies
    1. Technology Consultancy and Advisory
    ,

    Visual enhancement to best answer

    Guides
    answer enhance
    2
    7
    93
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • phenomlab
      phenomlab Global Moderator Guru last edited by phenomlab

      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…

      1 Reply Last reply Reply Quote 3
      • Moved from Announcements by  phenomlab phenomlab 
      • DownPW
        DownPW last edited by

        Looks very great !!

        Good job Mark and Thanks for sharing 🙂

        1 Reply Last reply Reply Quote 0
        • DownPW
          DownPW last edited by

          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

          phenomlab 2 Replies Last reply Reply Quote 1
          • phenomlab
            phenomlab Global Moderator Guru @DownPW last edited by

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

            1 Reply Last reply Reply Quote 0
            • DownPW
              DownPW last edited by

              Me too, disabled on mobile.

              1 Reply Last reply Reply Quote 1
              • phenomlab
                phenomlab Global Moderator Guru @DownPW last edited by phenomlab

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

                1 Reply Last reply Reply Quote 1
                • DownPW
                  DownPW last edited by

                  Oh yeah great 🙂

                  1 Reply Last reply Reply Quote 1

                  • First post
                    Last post

                  Suggested Topics

                  sudonix.com
                  Consent Policies