{% extends "admin/base_site.html" %}
{% load i18n %}
{% block bodyclass %}grp-doc{% endblock %}
{% block content-class %}{% endblock %}
{% block title %}Grappelli Documentation &raquo; Groups{% endblock %}

{% block extrahead %}
    <script type="text/javascript" charset="utf-8">
        (function($) {
            $(document).ready(function() {
                $("#grp-content-container .grp-group").grp_collapsible_group();
                $("#grp-content-container .grp-collapse").grp_collapsible({
                    on_init: function(elem, options) {
                        // open collapse (and all collapse parents) in case of errors
                        if (elem.find("ul.errorlist").length > 0) {
                            elem.removeClass("grp-closed")
                                .addClass("grp-open");
                            elem.parents(".grp-collapse")
                                .removeClass("grp-closed")
                                .addClass("grp-open");
                        }
                    }
                });
            });
        })(grp.jQuery);
    </script>
{% endblock %}

{% block breadcrumbs %}
    <ul>
        <li><a href="../">Grappelli Documentation</a></li>
        <li>Groups</li>
    </ul>
{% endblock %}

{% block content %}
    <h1>Groups</h1>
    <div class="g-d-c">
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Nesting Modules in Groups</h1>
                    <p>A <span class="grp-doc-class">.grp-group</span> is a wrapper for related <a href="{% url 'grp_doc_modules' %}">modules</a>. A group usually contains a heading. Although that heading is optional, groups without it do not appear in document outlines &mdash; besides, the heading is required if your group is collapsible.</p>
                    <p>There are two different types of groups: <strong>Stacked Groups</strong> and <strong>Tabular Groups</strong>.</p>
                </div>
            </div>
        </section>
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Stacked Groups</h1>
                    <p>A <span class="grp-doc-class">.grp-group</span> with the additional class <span class="grp-doc-class">.grp-stacked</span> contains <a href="{% url 'grp_doc_modules' %}">modules</a> with the default layout (whereas modules in a tabular group appear in a table-like layout).</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-group grp-stacked">
                        <h2>Stacked Group</h2>
                        <div class="grp-module">
                            <h3>Module</h3>
                            <div class="grp-row"><p>Row</p></div>
                            <div class="grp-row"><p>Row</p></div>
                        </div>
                        <fieldset class="grp-module">
                            <h3>Module</h3>
                            <div class="grp-row">
                                <div class="l-2c-fluid l-d-4">
                                    <div class="c-1"><label class="required">Label</label></div>
                                    <div class="c-2">
                                        <input type="text" value="" />
                                        <p class="grp-help">Helptext</p>
                                    </div>
                                </div>
                            </div>
                            <div class="grp-row">
                                <div class="l-2c-fluid l-d-4">
                                    <div class="c-1"><label class="required">Label</label></div>
                                    <div class="c-2">
                                        <input type="text" value="" />
                                        <p class="grp-help">Helptext</p>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-stacked">
    <h2>Stacked Group</h2>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
    <fieldset class="grp-module">
        <h3>Module</h3>
        <div class="grp-row">
            <div class="l-2c-fluid l-d-4">
                <div class="c-1"><label class="required">Label</label></div>
                <div class="c-2">
                    <input type="text" value="" />
                    <p class="grp-help">Helptext</p>
                </div>
            </div>
        </div>
        <div class="grp-row">
            <div class="l-2c-fluid l-d-4">
                <div class="c-1"><label class="required">Label</label></div>
                <div class="c-2">
                    <input type="text" value="" />
                    <p class="grp-help">Helptext</p>
                </div>
            </div>
        </div>
    </fieldset>
</div>
{% endfilter %}</code></pre></div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h3>Container for Modules in a Stacked Group</h3>
                    <p>In case you want to apply actions to the modules (e.g. sorting), you need an additional wrapper <span class="grp-doc-class">.grp-items</span>.</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-stacked">
    <h2>Stacked Group</h2>
    <div class="grp-items ui-sortable">
        <fieldset class="grp-module">
            ...
        </fieldset>
        <fieldset class="grp-module">
            ...
        </fieldset>
    </div>
</div>
{% endfilter %}</code></pre></div>
            </div>
        </section>
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Tabular Groups</h1>
                    <p>A <span class="grp-doc-class">.grp-group</span> with the additional class <span class="grp-doc-class">.grp-tabular</span> contains <a href="{% url 'grp_doc_modules' %}">modules</a> with a table-like layout (whereas modules in a stacked group appear in the default way). To accomplish that table-like structure, you have to apply the following classes:</p>
                    <ul>
                        <li>The <span class="grp-doc-dom"><span>table</span></span> is represented by a <span class="grp-doc-class">div.grp-module.grp-table</span></li>
                        <li>The <span class="grp-doc-dom"><span>thead</span></span> is represented by a <span class="grp-doc-class">div.grp-module.grp-thead</span></li>
                        <li>Each <span class="grp-doc-dom"><span>tbody</span></span> is represented by a <span class="grp-doc-class">div.grp-module.grp-tbody</span></li>
                        <li>Each <span class="grp-doc-dom"><span>tr</span></span> is represented by a <span class="grp-doc-class">div.grp-tr</span></li>
                        <li>Each <span class="grp-doc-dom"><span>th</span></span> is represented by a <span class="grp-doc-class">div.grp-th</span></li>
                        <li>Each <span class="grp-doc-dom"><span>td</span></span> is represented by a <span class="grp-doc-class">div.grp-td</span></li>
                    </ul>
                    <p>Each <span class="grp-doc-class">div.grp-module.grp-tbody</span> must not contain a heading (if there is one you have to hide it).</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-group grp-tabular">
                        <h2>Tabular Group</h2>
                        <div class="grp-module grp-table">
                            <div class="grp-module grp-thead">
                                <div class="grp-tr">
                                    <div class="grp-th">Table-Head 1</div>
                                    <div class="grp-th">Table-Head 2</div>
                                </div>
                            </div>
                            <div class="grp-module grp-tbody">
                                <div class="grp-tr">
                                    <div class="grp-td">Table-Desk 1</div>
                                    <div class="grp-td">Table-Desk 2</div>
                                </div>
                            </div>
                            <div class="grp-module grp-tbody">
                                <div class="grp-tr">
                                    <div class="grp-td"><input type="text" /></div>
                                    <div class="grp-td"><input type="text" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-tabular">
    <h2>Tabular Group</h2>
    <div class="grp-module grp-table">
        <div class="grp-module grp-thead">
            <div class="grp-tr">
                <div class="grp-th">Table-Head 1</div>
                <div class="grp-th">Table-Head 2</div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <div class="grp-tr">
                <div class="grp-td">Table-Desk 1</div>
                <div class="grp-td">Table-Desk 2</div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <div class="grp-tr">
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td"><input type="text" /></div>
            </div>
        </div>
    </div>
</div>
{% endfilter %}</code></pre></div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h3>Tools for Modules in a Tabular Group</h3>
                    <p>In case you need <a href="{% url 'grp_doc_tools' %}">tools</a> for the <span class="grp-doc-class">div.grp-module.grp-tbody</span>, you have to put them in a <span class="grp-doc-class">div.grp-td</span> with the additional class <span class="grp-doc-class">.grp-tools-container</span>. You also have to add an empty <span class="grp-doc-class">div.grp-th</span> to the <span class="grp-doc-class">div.grp-module.grp-thead</span> to preserve the table-like structure.</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-group grp-tabular">
                        <h2>Tabular Group</h2>
                        <div class="grp-module grp-table">
                            <div class="grp-module grp-thead">
                                <div class="grp-tr">
                                    <div class="grp-th">Table-Head 1</div>
                                    <div class="grp-th">Table-Head 2</div>
                                    <div class="grp-th"></div>
                                </div>
                            </div>
                            <div class="grp-module grp-tbody">
                                <div class="grp-tr">
                                    <div class="grp-td"><input type="text" /></div>
                                    <div class="grp-td"><input type="text" /></div>
                                    <div class="grp-td grp-tools-container">
                                        <ul class="grp-tools">
                                            <li><a href="#" class="grp-icon grp-drag-handler"></a></li>
                                            <li><a href="#" class="grp-icon grp-delete-handler"></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="grp-module grp-tbody">
                                <div class="grp-tr">
                                    <div class="grp-td"><input type="text" /></div>
                                    <div class="grp-td"><input type="text" /></div>
                                    <div class="grp-td grp-tools-container">
                                        <ul class="grp-tools">
                                            <li><a href="#" class="grp-icon grp-drag-handler"></a></li>
                                            <li><a href="#" class="grp-icon grp-delete-handler"></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-tabular">
    <h2>Tabular Group</h2>
    <div class="grp-module grp-table">
        <div class="grp-module grp-thead">
            <div class="grp-tr">
                <div class="grp-th">Table-Head 1</div>
                <div class="grp-th">Table-Head 2</div>
                <div class="grp-th"></div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <div class="grp-tr">
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td grp-tools-container">
                    <ul class="grp-tools">
                        <li><a href="#" class="grp-icon grp-drag-handler"></a></li>
                        <li><a href="#" class="grp-icon grp-delete-handler"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        .
        .
        .
    </div>
</div>
{% endfilter %}</code></pre></div>
            </div>
        </section>
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Collapsible Groups</h1>
                    <p>To make a group collapsible, just add <span class="grp-doc-class">.grp-collapse</span> to the <span class="grp-doc-class">.grp-group</span>. With adding <span class="grp-doc-class">.grp-open</span> or <span class="grp-doc-class">.grp-closed</span> you further define whether the group is opened or closed by default. The collapse handler is added with <span class="grp-doc-class">.grp-collapse-handler</span> and it's usually the heading of the group (though you may assign the handler class to other elements as well). Finally, you have to use some javascript code (see the source code below).</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-group grp-collapse grp-open">
                        <h2 class="grp-collapse-handler">Group</h2>
                        <div class="grp-module">
                            <h3>Module</h3>
                            <div class="grp-row"><p>Row</p></div>
                            <div class="grp-row"><p>Row</p></div>
                        </div>
                        <div class="grp-module grp-collapse grp-open">
                            <h3 class="grp-collapse-handler">Module</h3>
                            <div class="grp-row"><p>Row</p></div>
                            <div class="grp-row"><p>Row</p></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group">
    <h2>Group</h2>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
    <div class="grp-module">
        <h3>Module</h3>
        <div class="grp-row"><p>Row</p></div>
        <div class="grp-row"><p>Row</p></div>
    </div>
</div>
{% endfilter %}</code></pre></div>
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
(function($) {
    $(document).ready(function() {
        $("#grp-content-container .grp-group").grp_collapsible_group();
        $("#grp-content-container .grp-collapse").grp_collapsible();
    });
})(grp.jQuery);
                    {% endfilter %}</code></pre></div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}

