Announcement

Collapse
No announcement yet.

Thread starter avatars in topic lists

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Thread starter avatars in topic lists

    Here's something I've been trying to get working properly for ages, but can't get all the way there. Seems even trickier as of 5.3.4.

    When viewed on a small screen, topic lists (eg Today's Posts, New Posts, or just lists of topics in a channel) display the thread starter avatars on the left, which is nice.
    Unfortunately these are hidden on the full view.

    I know how to edit the display_topics_item template to make them show, but this then messes up the alignment of everything else. Fixing one bit in css breaks another bit, and 5.3.4 complicates matters in the search pages (Today;s Pists, New Posts) because there's now three lines of text rather than one.

    Wondering if I'm approaching this entirely the wrong way...is there a better option than editing templates (eg with hooks)...and also I can't get the css right.

    Slightly rambling post, apologies.

    #2
    Do you want to get rid of the topic icons and replace them with the topic starter avatars just like in mobile? Or do you want to keep it?
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Hmm that's a good point...which way is easiest? I suppose ideally they should stay because they indicate, amongst other things, which threads you posted in.

      Comment


        #4
        This is what I quickly came up with. Not fully tested.

        Code:
        .l-desktop .h-hide-on-large.topic-avatar {
            display: block !important;
            position: absolute;
        }
        
        .l-desktop .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
            width: 85%;
        }
        
        .l-desktop .topic-list-container .topic-list .topic-item .cell-topic .topic-info {
            margin-left: 40px;
            margin-top: 20px;
        }
        
        .l-desktop .cell-topic .vb-icon-topic-status {
            margin-left: 40px;
        }
        Click image for larger version  Name:	image.png Views:	1 Size:	96.9 KB ID:	7041

        I purposely edited the title in the last topic in the screenshot to test for long topic titles.

        Btw, I like this. I will apply this change here.
        Last edited by glennrocksvb; 10-18-2017, 08:55 AM. Reason: Updated CSS
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Originally posted by glennrocksvb View Post
          Btw, I like this.
          But it seems to make the eyes busier because the last post column has avatars too. Too many avatars hurts the eyes.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            Thanks Glenn, I"ll give this a test.

            I like having both avatars...I have run my vB4 site with both starter and lastpost avatars for ages.

            The miniature overlaid avatar indicates a thread the person viewing has posted in.

            Click image for larger version  Name:	image_674.jpg Views:	1 Size:	120.5 KB ID:	7044

            Comment


              #7
              Ok with a test, only issue I can find is the same one I ran into last time I attempted this and it drove me mad.

              Medium sized screens (eg an iPad in landscape) has the alignment slightly out in places. Screenshot explains it better.

              Click image for larger version

Name:	Capture.JPG
Views:	72
Size:	36.5 KB
ID:	7047
              Attached Files

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                I'll take a look at this iPad layout issue.

              #8
              Having too many avatars takes away the focus to the topic title which is the most important link on that page. It may be just me but I might still try it here and see if members like it.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #9
                Here's the iPad fix:

                Code:
                @media (max-width: 768px) {
                    .l-desktop .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
                        width: 82%;
                    }
                }
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #10
                  Thanks Glenn, I'll test that shortly.

                  I live avatars. Avatars everywhere adds colour and, well, soul, to a site.

                  Comment


                    #11
                    I tried my code to your vBCloud demo site and it looks good.

                    Click image for larger version

Name:	j72k0I.png
Views:	55
Size:	247.1 KB
ID:	7064
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #12
                      I have applied the code here on this site. It doesn't look as busy as I initially imagined it to be. I guess the wider content helped to not make it look too busy with many avatars on the page because the content is widely spaced out horizontally.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #13
                        Using the code below is more flexible as it covers all browser widths and not just specific width such as iPad's. Replace the entire previous code with this one:

                        Code:
                            .l-desktop .h-hide-on-large.topic-avatar {
                            display: block !important;
                            position: absolute;
                        }
                        
                        .l-desktop .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
                            width: -webkit-calc(100% - 67px);
                            width: -moz-calc(100% - 67px);
                            width: calc(100% - 67px);
                        }
                        
                        .l-desktop .topic-list-container .topic-list .topic-item .cell-topic .topic-info {
                            margin-left: 40px;
                            margin-top: 20px;
                        }
                        
                        .l-desktop .cell-topic .vb-icon-topic-status {
                            margin-left: 40px;
                        }
                        Last edited by glennrocksvb; 10-18-2017, 10:16 PM.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #14
                          Thanks Glenn...am now using the newer code on both my demo sites.
                          Looks really good.
                          I've been wanting to do this 'robustly' for some time but could only ever get about 90% of the way there.

                          Comment


                            #15
                            The Best !!!

                            Comment

                            Users Viewing This Page

                            Collapse

                            There is 1 user viewing this forum topic.

                            • Guest Guest

                            Latest Posts

                            Collapse

                            Working...
                            X
                            Searching...Please wait.
                            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                            Please push the back button and reload the previous window.'
                            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                            Please push the back button and reload the previous window.'
                            An internal error has occurred and the module cannot be displayed.
                            There are no results that meet this criteria.
                            Search Result for "|||"