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,417
Được Like
12,637
[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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom