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