Download Collapsible User Extras 1.0

XF Compatibility

2.2.x

Short Description: This template mod will hide the extra user info in messages by default

This template mod will hide the extra user info in messages by default. Stats can be shown by simply clicking the expand arrow.

I will only support default styles, no 3rd party styles will receive support. Along with that if you use a Pixel Exit style this is already built into each style. 😛

Template

post_macros

Find:

Code:

<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}" arg-fallbackName="{$post.username}" arg-dateHtml="{$dateHtml}" arg-linkHtml="{$linkHtml}" />

Add below:

Code:

<span id="collapse-{$post.post_id}" class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="#js-post-{$post.post_id} .message-userExtras"></span>

Template

message_macros

Find:

Code:

<div class="message-userExtras">

Replace with:

Code:

<div class="message-userExtras message-userExtras-body message-userExtras--collapsible">

Add to extra.less template:

CSS:

/* User Extras Collapse */
.message-userExtras-body
{
    .m-listPlain();
    &.message-userExtras--collapsible
    {
        .has-no-js & { display: block; }
        .m-transitionFadeDown();
    }
}
.message-cell
{
    .collapseTrigger
    {
        text-align: center;
        &.is-active:before
        {
            transform: rotate(-180deg);
        }
        &:before
        {
            content: "\f13a";
            color: @xf-linkColor;
            transition: ease-in transform .3s;
            width: auto;
        }
        &.collapseTrigger--block:before
        {
            float: none;
        }
    }
}
@media (max-width: @xf-responsiveNarrow)
{
    .message-cell
    {
        .collapseTrigger
        {
            display: none;
        }
    }
}

Author: axtona

Views: 377

First release: May 22, 2023

Last update: May 22, 2023

Ratings 0.00 star(s) 0 ratings

Join the discussion

Link was Broken? Please Send message to the Website Team and we will assist you quickly!

Support Developer If you are satisfied with the test or your project has earned you money, Click the More Information button to support the developer by purchasing.

Share this resource