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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 19/05/2020.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,882
    Đã được thích:
    7,112
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    [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​
     

Chia sẻ trang này