Using a templating engine

Impactomatrix: Adjusting an existing application using a templating engine

The Impactomatrix consists of a number of websites which are generated using a templating engine (Jinja2).

Jinja uses a base template, which defines block areas which are to be filled by the specific website information for subpages. To adjust the app to the new style guide, the main point was to change the base image to the new format. A good starting point was the example app website.

Navigation

The main navigation for the app is to be added to the container <div class="nav_menu -main">, see here.

To enable a minimal breadcrumb navigation, the menu in the base template was extended by

<div class="nav_menu -main">
    <ul class="nav_list -level-1">
	{% block breadcrumb %}
	    content
	{% endblock %}
    </ul>
</div>

Then, in every subpage, an entry

{% block breadcrumb %}
<li class="nav_item -level-1">
  <a class="nav_link" href="index.html">Overview</a>
</li>
<li class="nav_item -level-1">
  <a class="nav_link" href="/"> {{ name }} </a>
</li>
{% endblock%}

automatically fills the breadcrumb menu with the link to the overview and the name of the current view.

To disable parts of the navigation menu, which where not needed for the Impactomatrix, an additional class was added to the corresponding div, e.g. <div class="search hidden">.

Style of central page

Logo

To add the WG Impact logo, the follwing h1tag was added in the base template, directly after the navigation div, see here.

<h1 class="logo">
    <a class="logo_link -large" href="index.html" title="Home">
	<img class="logo_logo -large" src="assets/logos/wg_impact.png" alt="DARIAH-DE Working Group Impact">
    </a>
</h1>

Main container

Since the Style Guide contained no settings for the three column style of the original Impactomatrix, additional styling information was added to the base template, see here. To make the transition from the old template design as simple as possible, the names for the classes where chosen according to the ids in the template files.

  <style>
    #middle {
      width: 30%;
      float: left;
      border-radius: 25px;
      border: 2px solid #213365;
      padding: 20px;
      margin: 0px 20px;
    }
    #sidebar {
      width: 30%;
      float: left;
      border-radius: 25px;
      border: 2px solid #213365;
      padding: 20px;
    }
    .primary-area {
      width: 100%;
      overflow: hidden;
    }
  </style>