{% extends "admin/base_site.html" %} {% load i18n %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Modules{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %}
The most essential component of Grappelli is a .grp-module, wrapping pieces of related content. The horizontal layout within a module is structured by one ore more .grp-row. A row stretches over the full width of the parent module and represents one piece of content or contains multiple pieces of content which belong together. Additionally, there might be a description for a module. In that case, just put a p.grp-description in a .grp-row.
Some text describing the module
Row
Row
Row
{% filter force_escape %}
Module
Some text describing the module
Row
Row
Row
{% endfilter %}
Rows might be split into two or more cells. To do so assign .grp-cells to the .grp-row you want to carry the cells. Each cell within that row is a .grp-cell then.
Cell
Cell
Cell
{% filter force_escape %}
Module
Cell
Cell
Cell
{% endfilter %}
Modules may be nested up to three levels.
Row
Row
Row
Row
Row
Row
{% filter force_escape %}
Parent Module
Child Module
Row
Row
Child Module
Grandchild Module
Row
Row
Grandchild Module
Row
Row
{% endfilter %}
A module usually contains a heading. Although that heading is optional, modules without it do not appear in document outlines — besides, the heading is required if your module is collapsible.
Row
Row
Row
Row
Row
{% filter force_escape %}
Heading 2
Row
Row
{% endfilter %}
{% filter force_escape %}
Row
Row
Row
{% endfilter %}
To make a module collapsible, just add .grp-collapse. With adding .grp-open or .grp-closed you define whether the collapsible module is opened or closed by default. Moreover, you need to define a .grp-collapse-handler which is usually the heading, but you may assign that class to other elements as well. Finally, you have to use some javascript code (see source code below).
Row
Row
Row
Row
{% filter force_escape %}
Parent Module
Child Module
Row
Row
Child Module
Row
Row
{% endfilter %}
{% filter force_escape %}
(function($) {
$(document).ready(function() {
$("#grp-content-container .grp-collapse").grp_collapsible();
});
})(grp.jQuery);
{% endfilter %}
Find out how you may nest modules in stacked & tabular groups.