Name: Collapsible User Extras
Availability: InStock
Author: axtona

Compatibilité XF

2.2.x

Description courte: Template hides extra user info in messages with a click-able expand arrow. Supports default styles only, no third-party styles. Extra.less adds collapsible user extras for better UX.

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

Auteur: axtona

Vues: 431

Première publication: Mai 22, 2023

Dernière mise à jour: Mai 22, 2023

Évaluations 0.00 étoile(s) 0 évaluations

Rejoindre le fil de discussion

Lien cassé ? Envoyer un message à l’équipe NP et nous vous aiderons rapidement !

Soutenez le développeur Si vous êtes satisfait du test ou que votre projet vous a rapporté de l’argent, cliquez sur le bouton « Plus d’informations » pour soutenir le développeur en achetant.

Partager cette ressource