Tutorial 2x [ShikiSuen] More Flexible forumbit - Cải tiến forumbit linh hoạt hơn cho XenForo 2

[PVS]

[ShikiSuen] More Flexible forumbit - Cải tiến forumbit linh hoạt hơn cho XenForo 2

Phần forumbit trong template mặc định XenForo 2.1 không responsive đủ (đặc biệt là .main-extra). Tập lệnh CSS bổ sung này sử dụng Flexbox (và Grid cho chế độ xem trên điện thoại) để làm cho forumbit linh hoạt hơn.

Thêm đoạn code sau vào Extra.less:

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;}
    }
}

Chúc các bạn thành công.

Nguồn: xenforo.com​