{% extends "admin/base_site.html" %} {% load i18n %}{% load url from future %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Modules{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %}
The very essential component of Grappelli is a .grp-module.
It wraps pieces of content which belong together.
The horizontal layout within a module is basically structured by one ore more .grp-row.
A row stretches over the full width of the parent module.
It represents one piece of content or contains multiple pieces of content which belong together.
There might be a description for a module - 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 %}
Usually a module starts with a heading but you might as well use it without one.
Just be aware of the fact that modules without headings do not appear in document outlines.
Especially when nesting modules headings are meaningful because they give a description of the nested levels.
If you are going to use collapsible modules you have to use headings (as they act as collapsible-handlers).
Row
Row
Row
Row
Row
{% filter force_escape %}
Heading 2
Row
Row
{% endfilter %}
{% filter force_escape %}
Row
Row
Row
{% endfilter %}
It's very easy to turn modules into collapsible ones.
To do so just add .grp-collapse to the .grp-module you want to be collapsible.
With adding .grp-open or .grp-closed you define whether the collapsible module is opened or closed initially.
Now you have to define a .grp-collapse-handler. Usually that's the heading of the collapsible module but you may assign to other elements as well.
Finally you have to use some javascript code (e.g. with the 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 %}