XF 2.2 طي اقسام المنتدى

[codeNET]

طي أقسام المنتدى

أبسط طريقة لمنح المستخدمين إمكانية طي الأقسام التي لا يهتمون بها. يتم حفظ اختيار المستخدم، لذلك عند تحديث الصفحة أو زيارة الموقع مرة أخرى، ستبقى الأقسام التي قام بإغلاقها مطوية.

هذا التعديل يدعم التصميم الافتراضي فقط، ولا يتم تقديم دعم للتصاميم الخارجية. وإذا كنت تستخدم تصاميم Pixel Exit، فإن هذه الميزة مدمجة بالفعل في كل تصميم.

المتطلبات:
يجب استخدام XenForo 2.0.3 أو إصدار أحدث.

1- تعديل قالب node_list_category

أ) ابحث عن:

<div class="block block--category block--category{$node.node_id}">

استبدله بـ:

<div class="block block--category block--category{$node.node_id} collapsible-nodes">

ب) ابحث عن:

<h2 class="block-header">

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

<div class="block-header--left">

ج) ابحث عن:

<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>

وأضف بعد هذا السطر:

</div>

د) ابحث عن:

</h2>

وأضف في بدايته:

<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>

هـ) ابحث عن:

<div class="block-body">

واستبدله بـ:

<div class="block-body block-body--collapsible is-active">

2- إضافة الكود إلى قالب extra.less

أضف الكود التالي إلى قالب extra.less:

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;

        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }

        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }

    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
    .block-header
    {
        display: flex;
    }

    .block-header--left
    {
        margin-right: auto;
        max-width: 100%;
    }
}

اختياري: إضافة حركة عند الفتح والإغلاق

إذا أردت إضافة حركة أكثر وضوحًا عند فتح وإغلاق الأقسام، أضف الكود التالي أيضًا إلى قالب extra.less:

.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}

النتيجة:

سيتمكن أعضاء المنتدى من طي أقسام المنتدى وإظهارها عند الحاجة، مع حفظ حالة الأقسام التي قاموا بطيها حتى بعد تحديث الصفحة أو العودة إلى الموقع.

حقوق كود نت ..