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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,597
Được Like
8,138
[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​
 
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Tips and Guides 0

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

XenForo 1 XenForo 2
Translate by PVS

Top Bottom