درس XF-2.x إخفاء و إظهار بيانات العضو في المشاركات

Ibn AliraQ · 2018-12-02

السلام عليكم ورحمة الله وبركاته

شرح اليوم :
اضافة زر لإخفاء و إظهار بيانات العضو في المشاركات.

مثال:

الشرح:
1. ابحث عن الكود التالي في قالب: post_macros

HTML:

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

أسفل الكود .. اضف الكود التالي:

HTML:

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

حفظ القالب.

2. ابحث عن الكود التالي في قالب: message_macros

HTML:

<div class="message-userExtras">

استبدله بالكود التالي:

HTML:

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

حفظ القالب.

3. افتح قالب: Extral.less

اضف الكود التالي اخر القالب:

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

حفظ القالب.

إنتهى الشرح.