XF 2.x Custom [ShikiSuen] More Flexible forumbit

[ShikiSuen]

New resource:

[ShikiSuen] More Flexible forumbit - Use Flexbox and Grid to make Forumbit more flexible

The forum bit in XenForo 2.1 default template is not responsible enough (especially .main-extra). This extra CSS script uses Flexbox (and Grid for mobile phone view) to make the forum bit more flexible.

Video

I hate mind-lazy slobs. One is not eligible to use XF2 if he is not primate enough.

div.node div.node-body{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    @media (max-width: @xf-responsiveEdgeSpacerRemoval) {
        display: grid;
        grid-template-columns: min-content 1fr auto;
        grid-template-rows: min-content min-content;
        gap: 0px 0px;
        grid-template-areas: "node-icon node-main node-mainEX" "node-icon node-extra node-mainEX";
    }

    span.node-icon {
        flex: 0 0 auto;
        grid-area: node-icon;
    }
    div.node-main {
        flex: 1 1 100%;
        grid-area: node-main;
        & > .node-meta > .node-statsMeta {display: none;}
        @media (max-width: @xf-responsiveNarrow) {
            & > .node-meta > .node-statsMeta {display: inline;}
        }
    }
    div.node-stats {
        width: auto;
        flex: 0 0 auto;
        grid-area: node-mainEX;
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-end;
        align-content: flex-start;
        @media (max-width: @xf-responsiveNarrow) {
            display: none;
        }
        dl.pairs.pairs--rows {
            flex: 0 0 auto;
            width: auto;
            padding: 0px;
            @media (max-width: @xf-responsiveEdgeSpacerRemoval) {
                padding-right: @xf-paddingMedium;
            }
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            white-space: nowrap;
            &:first-child > dd::after {
                width: (1em * @xf-lineHeightDefault);
                display: inline-block;
                text-align: center;
                .m-faBase('Pro', @faWeight-solid);
                .m-faContent("@{fa-var-envelope-open-text}\20");
            }
            &:last-child > dd::after {
                width: (1em * @xf-lineHeightDefault);
                display: inline-block;
                text-align: center;
                .m-faBase();
                .m-faContent("@{fa-var-file-alt}\20");
            }
            & > dt {display: none}
            & > dd, & > dd::after {color: @xf-textColorDimmed;}
        }

    }
    div.node-extra {
        flex: 0 0 35%;
        width: 35%;
        grid-area: node-extra;
        @media (max-width: @xf-responsiveEdgeSpacerRemoval) {
            flex-basis: auto;
            flex-shrink: 1;
            width: auto;
        }
        span.node-extra-placeholder {
            display: block;
            width: auto;
            text-align: center;
            color: @xf-textColorMuted;
            @media (max-width: @xf-responsiveEdgeSpacerRemoval) {
                text-align: left;
            }
        }
    }
}

[data-template="watched_forums_list"] {
    div.node div.node-body {
        & > div.node-stats {display: none}
        & > div.node-main > .node-meta > .node-statsMeta {display: inline;}
    }
}

Read more about this resource...