Name: Collapsible User Extras
Availability: InStock
Author: axtona

XF-Kompatibilität

2.2.x

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

Autor: axtona

Ansichten: 431

Erste Veröffentlichung: Mai 22, 2023

Letzte Aktualisierung: Mai 22, 2023

Bewertungen 0.00 Sterne 0 Bewertungen

An der Diskussion teilnehmen

Link defekt? Nachricht senden an das NP-Team – wir helfen dir schnell!

Unterstütze den Entwickler Wenn du mit dem Test zufrieden bist oder mit deinem Projekt erfolgreich Geld verdient hast, klicke auf den Button Mehr Informationen, um den Entwickler durch einen Kauf zu unterstützen.

Diese Ressource teilen