/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "index.html" %} {% block content %}

Blocks

Here are some examples to show blocks available in {{ lib.smartVISU }}

Examples

A static block
{% filter trim|escape|nl2br %}{% verbatim %}
Block 1

This is a static block

{% endverbatim %}{% endfilter %}
Block 1

This is a static block


A variable set of blocks which are collapsible. Use 'set-1', 'set-2', 'set-3' to define the number of sections in a block. Set the attribute 'data-collapsed="false"' for the open section (only one) and omit the attribute for the others.
You can also define the width of the block by adding a width statement to the first div (see last example).
By adding the widget "lib.supersize('')" to the h3-section of a block, the block receives a button which expands the block to full-screen width.
{% filter trim|escape|nl2br %}{% verbatim %}

{{ lib.supersize('') }}Block 2

This is a collapsible block. If you supersize it, scroll to the top of the page to view the result.

Section 1

Set of two collapsible blocks with one being collapsed

Section 2

Collapsed by default if 'data-collapsed="false"' is omitted

{% endverbatim %}{% endfilter %}

{{ lib.supersize('') }}Block 2

This is a collapsible block.
If you supersize it, scroll to the top of the page to view the result.

Section 1

Set of two blocks with one being collapsed

Section 2

Collapsed by default if 'data-collapsed="false" ' is omitted

Section 1

A set of 3 collapsible blocks

The description 'style="width:100%" ' has been added to the <div class="block"> statement in order to make the block use the whole available width of the screen.

Section 2

Content 2

Section 3

Content 3

Blocks are defined with a minimum height of 14.5em. Depending on the devices resolution and font size, the height measured in 'px' is approx. 232px. Blocks normally change their height with the included content. However, it may make sense to control a blocks height manually in order to perfectly align several blocks:
{% filter trim|escape|nl2br %}{% verbatim %}
Height 250px
A box with hight 250px
{% endverbatim %}{% endfilter %}
Example 1



A box with height 232px, normally
the minimum height.
Example 2



A box with hight 250px
{% endblock %}