Dual node layout inside forum view

[dgibs]

I have that setting enabled but am not seeing any changes in the layout of sub-forums when viewing the forum they are within.
I am running 2.2.12 and associated flat awesome+

 

[Russ]

I checked your site and I believe I know what's happening. XF by default do not have class names on the block that houses the sub-forums. when viewing the nodes. We use a simple CSS-only approach to target this area so we don't need to edit a template. This sometimes can cause issues when you have content above the sub-forums like yourself.

Easy fix though!

Open the template:

forum_view

Find this on lines 30-32

<xf:if is="$nodeTree">
    <xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
    <div class="block">

Replace with:

<xf:if is="$nodeTree">
    <xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
    <div class="block block-subforums">

(only the third line is changing)

Then add this into your extra.less:

@media (min-width: (@xf-responsiveWide  + 1))
{
    .block-subforums
    {
        .block-body
        {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            width: auto;
            .node
            {
                min-width: 280px;
                flex: 1 1 50%;
                padding: @xf-paddingMedium 0;
                border-bottom: @xf-borderSize solid @xf-borderColorFaint;
                border-top-width: 0;
                .node-body
                {
                    padding: 0 @xf-paddingLarge;
                    .node-statsMeta { display: inline; }
                    .node-stats { display: none; }
                    .node-extra
                    {
                        display: block;
                        width: auto;
                        padding: 0px;
                        background-color: @xf-contentAltBg;
                        border-width: 0;
                        box-shadow: none;
                    }
                    .node-main
                    {
                        width: 100%;
                        display: block;
                        padding: 0 @xf-paddingMedium @xf-paddingMedium @xf-paddingMedium;
                    }
                    .node-icon
                    {
                        box-sizing: content-box;
                        padding: 0 @xf-paddingMedium;
                    }
                }

            }
        }
    }
}