Thread starter avatars in topic lists

[Mark.B]

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.

[glennrocksvb]

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?

[Mark.B]

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.

[glennrocksvb]

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

.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;
}

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.

[glennrocksvb]

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.

[Mark.B]

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.

[Mark.B]

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.

[glennrocksvb]

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.

[glennrocksvb]

Here's the iPad fix:

@media (max-width: 768px) {
    .l-desktop .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
        width: 82%;
    }
}

[Mark.B]

Thanks Glenn, I'll test that shortly.

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

[glennrocksvb]

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

[glennrocksvb]

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.

[glennrocksvb]

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:

    .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;
}

[Mark.B]

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.

[tranceup]

The Best !!!