XF 2.3 Название форума и статистику node-extra на один уровень, подфорумы ниже на всю ширину

[nond]

На форме много пояснений про подфорумы в два три столбика, но нет достаточно ясного варианта по поводу следующего:

Стандартного расположения и ширины для названий подфорумов, при 2х 3-х столбиках бывает недостаточно.

node-body содержит в себе иконку слева node-icon, название узла node-title до 50 символов, и список подфорумов;

Далее справа выделенное место для статистики node-stats, аватар пользователя разместившего последнее сообщение, наименование темы, дата, ник пользователя - node-extra.

По дефолту, названия подфорумов не могут "заехать" на всю ширину 100% т.к. справа мешает блок статистики имеющий фиксированную ширину через CSS width: 280px;.


Вопрос:
Как модифицировать стандартный шаблон node_list_category для вывода подфорумов node-subNodesFlat на главной странице под названием узла, чтобы:

1. Название узла node-title и статистика node-extra были на одном уровне, в одном блоке т.е. в одном DIV? (node-stats - display: none )
2. Названия подфорумов node-subNodeFlatList располагающиеся ниже, занимали всю ширину node-body т.е. заходили под статистику и экстра?
3. Достаточно ли будет просто перенести местами блоки в шаблоне или нужно оборачивать через еще один DIV?

В шаблоне node_list_category, для анализа я повырезал лишнее, оставив основные блоки.

<div data-template-name="public:forum_list::node_list_entry" class="node node--id177 node--depth2 node--forum node--unread">
 
    <div class="node-body">
        <span class="node-icon" aria-hidden="true">
        <div class="node-main js-nodeMain">
            <h3 class="node-title">
                <div class="node-description ">Описание узла</div>
                <div class="node-meta">
                    <div class="node-statsMeta">
                        <dl class="pairs pairs--inline">
                        <dl class="pairs pairs--inline">
                    </div>
                </div>
   
            <div data-template-name="public:forum_list::sub_nodes_flat" class="node-subNodesFlat">  
                <span class="node-subNodesLabel">Подфорумы:</span>
                <ol class="node-subNodeFlatList">
                    <li data-template-name="public:forum_list::node_list">
                    <li data-template-name="public:forum_list::node_list_entry">
                    <li data-template-name="public:forum_list::node_list_entry">
                    <li data-template-name="public:forum_list::node_list_entry">
                </ol>
            </div>

        </div>
   
        <div class="node-stats"> (вырезанный код)
        </div>

        <div class="node-extra">
                <div class="node-extra-icon"></div>
                <div class="node-extra-row"></div>
                <div class="node-extra-row"></div>
        </div>
 
    </div>
 
</div>

Я пробовал сделать модификацию шаблона по переносу выделенного жирным в конец, перед закрытием DIV от <div class="node-body">
В некоторых случаях, верстка съезжает. Причем не понятно что влияет. При одном подфоруме и отсутствии сообщений, либо при двух-трех подфорумах и созданной темы в подфоруме.

Что делал:
Модификация шаблона. НАЙТИ КОД:

<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro id="forum_list::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_short(1)}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number_short(1)}</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.LastThread}" />
                    <div class="node-extra-icon">
                        <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                            <xf:avatar user="{{ null }}" size="xs" />
                        <xf:else />
                            <xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
                        </xf:if>
                    </div>
                    <div class="node-extra-row">
                        <xf:if is="$extras.LastThread.isUnread()">
                            <a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
                        <xf:else />
                            <a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
                        </xf:if>
                    </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="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
                            </xf:if>
                        </ul>
                    </div>
                <xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>

(т.е. по сути я просто переношу код:

    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro id="forum_list::sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
           </div>

в конец в пределах блока <div class="node-body">

Заменить код НА СЛЕДУЮЩИЙ:

            <xf:if is="!{$extras.privateInfo}">
                <div class="node-stats">
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('threads') }}</dt>
                        <dd>{$extras.discussion_count|number_short(1)}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number_short(1)}</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.LastThread}" />
                    <div class="node-extra-icon">
                        <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                            <xf:avatar user="{{ null }}" size="xs" />
                        <xf:else />
                            <xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
                        </xf:if>
                    </div>
                    <div class="node-extra-row">
                        <xf:if is="$extras.LastThread.isUnread()">
                            <a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
                        <xf:else />
                            <a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
                        </xf:if>
                    </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="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
                            </xf:if>
                        </ul>
                    </div>
                <xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>

                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro id="forum_list::sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
</div>

 

[absorbers]

День добрый! Удалось решить вопрос?

 

[nond]

День добрый! Удалось решить вопрос?

Пока нет. Просто временно переключился на проработку создаваемого каркаса, а эту доработку на попозже.
Там надо просто разобраться в коде CSS, как управляются DIV, SPAN

 

[nond]

День добрый! Удалось решить вопрос?

Копаю здесь:

Это полный код шаблона вывода состоящий из 3-х частей. Нас интересует вторая часть

<xf:macro id="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">

и Третья часть

<xf:macro id="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">

Шаблон node_list_category

<xf:macro id="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="block block--category block--category{$node.node_id}">
        <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
        <div class="block-container">
            <h2 class="block-header">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
            </h2>
            <div class="block-body">
                <xf:macro id="forum_list::node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro id="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">
                <xf:fa icon="fa-comments" />
            </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_short(1)}</dd>
                            </dl>
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('messages') }}</dt>
                                <dd>{$extras.message_count|number_short(1)}</dd>
                            </dl>
                        </div>
                    </xf:if>

                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
                        <xf:macro id="forum_list::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 id="forum_list::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_short(1)}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number_short(1)}</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.LastThread}" />
                    <div class="node-extra-icon">
                        <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                            <xf:avatar user="{{ null }}" size="xs" />
                        <xf:else />
                            <xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
                        </xf:if>
                    </div>

                    <div class="node-extra-row">
                        <xf:if is="$extras.LastThread.isUnread()">
                            <a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
                        <xf:else />
                            <a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
                        </xf:if>
                    </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="{$extras.LastPostUser}" defaultname="{$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 id="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 id="forum_list::sub_node_list"
            arg-children="{$children}"
            arg-childExtras="{$childExtras}"
            arg-depth="{{ $depth + 1 }}" />
    </li>
</xf:macro>

Нужные нам элементы содержат значения CSS

display: table-cell;

Значение display: table-cell устанавливает для элемента способ отображения как ячейка таблицы.

CSS display: table-cell;

.node-body {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.node-icon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 46px;
  padding: 10px 0 10px 10px;
}
.node-icon i {
  display: block;
  color: hsla(var(--xf-nodeIconReadColor));
  line-height: 1.125;
  font-size: 36px;
}
.node-main {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
.node-stats {
 display: table-cell;
  width: 140px;
  vertical-align: middle;
  text-align: center;
  padding: 10px 0;
}

Свойство отображения CSS display: block; в DIV выводит блоки слева направо, и если их несколько в следующем DIV, то стопкой сверху вниз. Блок пытается занять всё свободное и доступное ему место.

Простая перестановка кода в шаблоне, без изменения в extra.less ничего не дает.
Вроде все правильно делаю, но почему-то перенос кода, отвечающего за вывод списка подфорумов

<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro id="forum_list::sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
            </div>

За пределы <div class="node-main js-nodeMain">

</div>
                <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro id="forum_list::sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>

Без правок CSS профита, ПОКА естественно не даёт.