1. المدير العام

    المدير العام أدارة موقع أكتب كود

    اخفاء واظهار الأقسام فى المنتدى فى الرئيسية
    [​IMG]

    يوجد العديد من الاضافات التى تقوم بهذه المهمة ولكن سوف نقوم بهذه المهمة الأن وبدون اضافة
    عبر التعديل على القالب node_list_category
    • أستبدل القالب node_list_category بالكامل بهذا الكود :
    كود:
    <xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
        <div class="block block--category block--category{$node.node_id} collapsible-nodes">
            <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
            <div class="block-container">
                <h2 class="block-header">
                <div class="block-header--left">
                    <a href="{{ link('categories', $node) }}">{$node.title}</a>
                    <xf:if is="{$node.description}"><div class="block-desc">{$node.description|raw}</div></xf:if></div>
    <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>
                </h2>
                <div class="block-body block-body--collapsible is-active">
                    <xf:macro template="forum_list" name="node_list"
                        arg-children="{$children}"
                        arg-extras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </div>
            </div>
        </div>
    </xf:macro>
    
    <xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
        <div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
            <div class="node-body">
                <span class="node-icon" aria-hidden="true"><i></i></span>
                <div class="node-main js-nodeMain">
                    <xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
                    <h3 class="node-title">
                        <a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
                    </h3>
                    <xf:if is="$descriptionDisplay != 'none' && $node.description">
                        <div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
                    </xf:if>
    
                    <div class="node-meta">
                        <xf:if is="!{$extras.privateInfo}">
                            <div class="node-statsMeta">
                                <dl class="pairs pairs--inline">
                                    <dt>{{ phrase('threads') }}</dt>
                                    <dd>{$extras.discussion_count|number}</dd>
                                </dl>
                                <dl class="pairs pairs--inline">
                                    <dt>{{ phrase('messages') }}</dt>
                                    <dd>{$extras.message_count|number}</dd>
                                </dl>
                            </div>
                        </xf:if>
    
                        <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
                            <xf:macro template="forum_list" name="sub_nodes_menu"
                                arg-children="{$children}"
                                arg-childExtras="{$childExtras}"
                                arg-depth="{{ $depth + 1 }}" />
                        </xf:if>
                    </div>
    
                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                        <xf:macro template="forum_list" name="sub_nodes_flat"
                            arg-children="{$children}"
                            arg-childExtras="{$childExtras}"
                            arg-depth="{{ $depth + 1 }}" />
                    </xf:if>
                </div>
    
                <xf:if is="!{$extras.privateInfo}">
                    <div class="node-stats">
                        <dl class="pairs pairs--rows">
                            <dt>{{ phrase('threads') }}</dt>
                            <dd>{$extras.discussion_count|number}</dd>
                        </dl>
                        <dl class="pairs pairs--rows">
                            <dt>{{ phrase('messages') }}</dt>
                            <dd>{$extras.message_count|number}</dd>
                        </dl>
                    </div>
                </xf:if>
    
                <div class="node-extra">
                    <xf:if is="{$extras.privateInfo}">
                        <span class="node-extra-placeholder">{{ phrase('private') }}</span>
                    <xf:elseif is="{$extras.last_post_date}" />
                        <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                        <div class="node-extra-row">
                            <ul class="listInline listInline--bullet">
                                <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
                                <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                    <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                                <xf:else />
                                    <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                                </xf:if>
                            </ul>
                        </div>
                    <xf:else />
                        <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                    </xf:if>
                </div>
            </div>
        </div>
    </xf:macro>
    
    <xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
        <li>
            <a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
            <xf:macro template="forum_list" name="sub_node_list"
                arg-children="{$children}"
                arg-childExtras="{$childExtras}"
                arg-depth="{{ $depth + 1 }}" />
        </li>
    </xf:macro>
    + وضع التنسيق التالى بالقالب extra.less
    كود:
    .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%;
            }
     
        .block-body
        {
            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;
            &.is-active
            {
                height: auto;
            }
        }
    }
     
جاري تحميل الصفحة...