modxcms/evolution

Change class styles sectionHeader, sectionBody and new layout of sections

64j opened this issue · 1 comments

64j commented

Added new classes tab-header, tab-body, tab-section, to replace the old sectionHeader, sectionBody.
At the moment, you can use any classes.

example 1 tab-section:

<div class="tab-page">
    <div class="tab-body">
        <div class="tab-section">
            <div class="tab-header">

            </div>
            <div class="tab-body">

            </div>
        </div>
    </div>
</div>

image

example 2 some section

<div class="tab-page">
    <!--first section-->
    <div class="tab-section">
        <div class="tab-header">

        </div>
        <div class="tab-body">

        </div>
    </div>
    <!--end first section-->

    <!--second section-->
    <div class="tab-section">
        <div class="tab-header">

        </div>
        <div class="tab-body">

        </div>
    </div>
    <!--end second section-->
</div>

image

example 3 (If necessary, I will add call evo.collapse in header.php):

<div class="tab-page">
    <div class="tab-body">
        <div class="tab-header" data-toggle="collapse">
            
        </div>
        <div class="tab-body">
            
        </div>
    </div>
</div>

image

example 4

<div class="tab-page">
    <div class="tab-body">
        <div class="tab-section">
            <div class="tab-header" data-toggle="collapse">

            </div>
            <div class="tab-body">

            </div>
        </div>
    </div>
</div>

image

So it will be wrong !
Class sectionBody should not be outside

<div class="sectionBody">
    <div class="tab-pane">
        <div class="tab-page">
            <div class="tab-header">

            </div>
            <div class="tab-body">

            </div>
        </div>
    </div>
</div>

That's right

<div class="tab-pane">
    <div class="tab-page">
        
        <div class="tab-body">
            <!--section-->
            <div class="tab-header">

            </div>
            <div class="tab-body">

            </div>
            <!--end section-->
        </div>
        
        <!--section-->
        <div class="tab-header">

        </div>
        <div class="tab-body">

        </div>
        <!--end section-->
    </div>
</div>