chapter
Base page structure screen
This page lists the basic HTML structure renedered for different types of content.
- Index page
- Object page, often report
- Label page, a page listing the content linked to the label
- List pages, pages listing labels or reports This page also gives an example of how references are rendered in the HTML.
Page structure
body.page--{{ page }}
// {{ page }} will be replaced with a page type
header
nav#nav
ul
li.navbar--organisation
a
// holds link to organisation page
li.navbar--index
a
// link to homepage
li.navbar--reports
a
// link to reports page
ul.navbar--subnav.navbar--reports--subnav
// subnavigation listing all reports
li.navbar--report.navbar--report--{{ report.slug }}
// navigation item for each report, {{ report.slug }} will be replaced with the slug of the report.
a
// link to the report
li.navbar--labels
a
// link to the labels page
ul.navbar--subnav.navbar--labels--subnav
li.navbar--label.navbar--label--{{ label.slug }}
// navigation item for each label, {{ label.slug }} will be replaced with the slug of the label.
a
// link to the label
li.navbar--print
// link to the print version
nav#nav--sub
// not used
main
// Content depending page type
aside
// Content depending page type
footer
// holds footer snippet
Home page
main
h1
// Title of as written in the index pad
{{ content }}
// Content of the index pad in HTML
aside
section.etherport--labels
// only on homepage!, lists labels
ul
li.etherport--label--{{ label.slug }}
// navigation item for each label, {{ label.slug }} will be replaced with the slug of the label.
a
//link to the label
List page
The list page of labels and reports use the same page template
main
h1
// Plural of object type (labels, reports)
ul
// List of objects
li
a
// Link to object (e.g. label or report)
aside
// empty
Object page
Individual page for ‘objects’, report
main
h6
// Type of object
h1
// Name of the object
// Content of the objects' pad in HTML
div.object--labels-list--end
// List of labels linked to the object. Only included if there
// are labels linked to the object
h2
ul
li
a
aside
// empty
Reference
References are links to an object (often labels) within a text. There are two types of references: direct links where the label of the linked object is shown directly in the text, or inline references where a part of the text is marked as linked to an object.
Direct reference
<a href=""
id="{{ link.id }}"
data-reference=""
data-link-id="{{ link.id }}"
data-link-target-type="{{ type of referenced object }}"
data-label="{{ label of linked object}}"
data-direct-link="true">
<span class="reference--target">{{ label of linked object}}</span>
</a>
Inline reference
<a href=""
id="{{ link.id }}"
data-reference=""
data-link-id="{{ link.id }}"
data-link-target-type="{{ type of referenced object }}"
data-label="{{ label of referenced object }}">
<span class="reference--target">{{ label of linked object }}</span>
<span class="reference--label--inline">{{ marked text }}</span>
</a>
AnnotationPage types
index : Homepage
page–label : Page for individual label
page–label–{{ label.slug }} : Page for individual label where {{ label.slug }} will be replaced with the slug of the label
page–list : General list page
page–list–label : Label list page, also has page–list class
page–list–report : Report list page, also has page–list class
page–report : Page for an individual report
page–report–{{ report.slug }} : Page for an individual report where {{ report.slug }} will be replaced with the slug of the report