task layout
The task layout is used for any screen which could be considered a 'task' i.e.
a page where something can be done.
The task layout is complex layout with quite a few options involved.
Using it however, is not complex.
Just put content in each of the blocks you want to use and the layout will take care of the rest.
The standard task layout includes this masthead at the top of the page, followed by an open content area with the same width constraint as this masthead. This ensures that the content flows neatly down the page with everything in line.
{% block taskTitle %}{% endblock %}
This is the main title that's displayed up on the masthead.
Yep, that big blue bit up there that says "The task layout"
{% block taskIntro %}{% endblock %}
This is a content area directly below the main title. It doesn't have to be an intro, but it's a good place to have one generally.
Use it to introduce the concept of the page, or explain what needs to be done.
{% block taskSecondary %}{% endblock %}
This is a secondary content are on the right side of the masthead. It can be used for anything you like.
When the secondary content is not empty, the masthead is split neatly into two columns, with each being given 50% of the width.
Example: with secondary
{% block taskActions %}{% endblock %}
'Actions' are basically navigation links specific to this task/page. They sit at the bottom of the masthead. These would usually be a series of flat-type buttons.
When the actions area is not empty, it is separated from the main content by a thin line.
Example: with actions
{% block taskActionsRight %}{% endblock %}
The actions area contains a neat helper that lets you push some actions to the right side of the container. To include actions on the right, just pop them in here.
Caveat:
if you are including left side actions too, you will need to call {{ parent() }}
after the left side actions.
You should also define the taskActionsRight block outside of the taskActions
block in order to preserve the underlying structure.
Example: with right actions and with both actions
{% block textOnlyContent %}{% endblock %}
Wide lines of text can look odd at the full width of the content area.
By placing page content inside the textOnlyContent block, it will be displayed
in a width-constrained column, equal to the width of the taskIntro block
in the masthead.
If the page implementation is primarily text with little other content (e.g. there are no columns, asides, or other components) then you probably want to place your content in here.
Example: with "text only" content
{% block content %}
{% block textOnlyContent %}{% endblock %}
{% endblock %}
To use the standard page width, stick your content straight into the content block
as you would on any other layout.
{% block taskContent %}
{% block content %}{% endblock %}
{% endblock %}
If you want to get a truly full-width content area, you can bypass the content block
and use taskContent instead.
This will take you back to a full width container.