[TH] Last Post Avatar [Deleted]

Note: There is currently a known issue with UI.X 2

To fix:

in node_list.less

Find:
Code:
.node_direction
{
display: table-cell;
vertical-align: middle;
width: 230px;
min-width: 230px;
padding: @xf-paddingLarge;
display: inline-flex;
flex-direction: column;
justify-content: center;
font-size: @xf-fontSizeSmall;
}

remove flex-direction: column; and justify-content: center; and add align-items: center;


in node_list_category
Find:
Code:
<xf:elseif is="{$extras.last_post_date}" />
    <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
    <div class="node-extra-row">
        <ul class="listInline listInline--bullet">
            <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
            <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
            <xf:else />
                <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
            </xf:if>
        </ul>
    </div>
<xf:else />

Replace with:
Code:
<xf:elseif is="{$extras.last_post_date}" />
    <div>
        <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
        <div class="node-extra-row">
            <ul class="listInline listInline--bullet">
                <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
                <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                    <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                <xf:else />
                    <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                </xf:if>
            </ul>
        </div>
    </div>
<xf:else />

In node_list_forum

Find:
Code:
                        <xf:elseif is="{$extras.last_post_date}" />
                        <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                        <div class="node-extra-row">
                            <ul class="listInline listInline--bullet">
                                <li><xf:date time="{$extras.last_post_date}" class="node-extra-date" />
                                    <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                        <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                                        <xf:else />
                                        <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                                    </xf:if>
                            </ul>
                        </div>
                        <xf:else />

Replace with:
Code:
                        <xf:elseif is="{$extras.last_post_date}" />
                        <div>
                        <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                        <div class="node-extra-row">
                            <ul class="listInline listInline--bullet">
                                <li><xf:date time="{$extras.last_post_date}" class="node-extra-date" />
                                    <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                        <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                                        <xf:else />
                                        <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                                    </xf:if>
                            </ul>
                        </div>
                        </div>
                        <xf:else />

After UI.X 2.0.0.2 releases you can revert these changes (or just make the changes directly to the parent style and they'll automatically be overwritten with the fixed version!)
 
Reverted the thing above for now, afraid to tamper with templates aha.

Any eta on the new UIX update? Just out of curiosity aha.
 
Oops, there was a typo in the macro so the variable got removed, fixed!

So this works now?

Thanks for taking my suggestion to heart. This is a really much needed feature and I'm sure tons upon tons of people are going to use this add-on. Appreciate it.

But what themehouse is saying, is if we edit those templates with what you gave us for UI.X 2 it will work?
 
Appreciate your team releasing this for free, as well as without branding.

Excellent gesture, I know this is one of the more widely used small addons.
As they say:
Simple is good - and this one certainly proves it!

A simple addition to add avatar beside the "last posted" yet its a big attraction to users browsing, looks more realistic imo and gives impression of lots of content.
 
But what themehouse is saying, is if we edit those templates with what you gave us for UI.X 2 it will work?
Yes it will, or you can wait and we should have an update with the fix done ourselves tomorrow.
Appreciate your team releasing this for free, as well as without branding.

Excellent gesture, I know this is one of the more widely used small addons.
Thank you @Sheldon as always. Also there is this if you are curious: https://www.themehouse.com/blog/xenforo-2-products-from-themehouse-with-free-branding-removal
 
Yes it will, or you can wait and we should have an update with the fix done ourselves tomorrow.

Thank you @Sheldon as always. Also there is this if you are curious: https://www.themehouse.com/blog/xenforo-2-products-from-themehouse-with-free-branding-removal

Thank you so much.

EDIT: I see what the problem is now with getting the avatar to display to the left of the text. See below for the way I fixed it. Everythings correct except it's .node-extra you have to find which has the same code given above as .node-direction



Regards,

Brad
 
Last edited:
Note: There is currently a known issue with UI.X 2

To fix:

in node_list.less

Find:
Code:
.node_direction
{
display: table-cell;
vertical-align: middle;
width: 230px;
min-width: 230px;
padding: @xf-paddingLarge;
display: inline-flex;
flex-direction: column;
justify-content: center;
font-size: @xf-fontSizeSmall;
}

remove flex-direction: column; and justify-content: center; and add align-items: center;

[/code]

After UI.X 2.0.0.2 releases you can revert these changes (or just make the changes directly to the parent style and they'll automatically be overwritten with the fixed version!)

Just a heads up there is no "node-direction" in that template for me. So for anyone having issues find:

Code:
.node-extra
{
display: table-cell;
vertical-align: middle;
width: 230px;
min-width: 230px;
padding: @xf-paddingLarge;
display: inline-flex;
flex-direction: column;
justify-content: center;
font-size: @xf-fontSizeSmall;
}

Replace with:

Code:
.node-extra
{
display: table-cell;
vertical-align: middle;
width: 230px;
min-width: 230px;
padding: @xf-paddingLarge;
font-size: @xf-fontSizeSmall;
}

There's 2 display properties in it. You should get rid of display: inline-flex. When doing so, you keep table-cell and it fixes the issue. I assume the other parts were correct in that it worked for me when doing what you said with those parts and then a little custom edits with .node-extra.

Not sure why there wasn't any .node-direction direction class. I just wanted to add this in there for anyone who ran into that problem like I did.

The rest I found without an issue for the code you gave, just this was how I fixed it for me.
 
Last edited:
By the way I realize align-items: center won't work without display: flex-inline so it's redundant and can be taken out. The table cell was enough for it to work.

Anyways I see the fix is tomorrow so it's not a huge deal whether anyone knows that anyway. I simply wanted to share the personal way I fixed it just in case anyone was having trouble. I also changed the width and min-width in ".node-extra" to 250px instead of 230px as it was blocking out the name of the last poster for me personally. But its perfect on my forum now.

Anyways thank you all.
 
Top Bottom