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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,704
[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:
Mã:
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​
 

Hướng dẫn sử dụng

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom