Add roadmap and use just one template

2024-11-14 16:55:42 +00:00 · 2020-02-07 15:21:59 +01:00 · 2020-02-07 15:21:59 +01:00 · acf5ae32ae
commit acf5ae32ae
parent 3ce28de053
35 changed files with 256 additions and 131 deletions
--- a/app/jobs/forms.py
+++ b/app/jobs/forms.py
@ -67,7 +67,7 @@ class AddOCRJobForm(FlaskForm):
                )


-class AddMergeImagesJobForm(FlaskForm):
+class AddSetupFilesJobForm(FlaskForm):
    description = StringField('Description',
                              validators=[DataRequired(), Length(1, 255)])
    submit = SubmitField()
--- a/app/services/views.py
+++ b/app/services/views.py
@ -1,5 +1,5 @@
 from app import db
-from app.jobs.forms import AddNLPJobForm, AddOCRJobForm, AddMergeImagesJobForm
+from app.jobs.forms import AddNLPJobForm, AddOCRJobForm, AddSetupFilesJobForm
 from app.models import Job, JobInput
 from flask import (abort, current_app, flash, make_response, render_template,
                   url_for)
@ -10,9 +10,10 @@ import json
 import os


-SERVICES = {'merge_images': {'name': 'Convert images',
+SERVICES = {'corpus_analysis': {'name': 'Corpus analysis'},
+            'setup_files': {'name': 'Setup files',
                             'resources': {'mem_mb': 4096, 'n_cores': 4},
-                             'add_job_form': AddMergeImagesJobForm},
+                             'add_job_form': AddSetupFilesJobForm},
            'nlp': {'name': 'Natural Language Processing',
                    'resources': {'mem_mb': 4096, 'n_cores': 2},
                    'add_job_form': AddNLPJobForm},
@ -26,6 +27,9 @@ SERVICES = {'merge_images': {'name': 'Convert images',
 def service(service):
    if service not in SERVICES:
        abort(404)
+    if service == 'corpus_analysis':
+        return render_template('services/{}.html.j2'.format(service),
+                               title=SERVICES[service]['name'])
    add_job_form = SERVICES[service]['add_job_form']()
    if add_job_form.is_submitted():
        if not add_job_form.validate():
@ -70,5 +74,6 @@ def service(service):
            return make_response(
                {'redirect_url': url_for('jobs.job', job_id=job.id)}, 201)
    return render_template('services/{}.html.j2'.format(service),
+                           roadmap=True,
                           title=SERVICES[service]['name'],
                           add_job_form=add_job_form)
--- a/app/static/images/logo_-_dfg.gif
+++ b/app/static/images/logo_-_dfg.gif
--- a/app/static/images/logo_-_sfb_1288.png
+++ b/app/static/images/logo_-_sfb_1288.png
--- a/app/static/images/logo_dfg.png
+++ b/app/static/images/logo_dfg.png
--- a/app/static/images/logo_sfb_1288.png
+++ b/app/static/images/logo_sfb_1288.png
--- a/app/static/js/nopaque.js
+++ b/app/static/js/nopaque.js
@ -80,11 +80,23 @@ nopaque.forms.init = function() {

 nopaque.navigation = {};
 nopaque.navigation.init = function() {
-  for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
+  var slideOutElement, tocElement;
+
+  slideOutElement = document.getElementById("slide-out");
+  for (let entry of slideOutElement.querySelectorAll("a:not(.subheader)")) {
    if (entry.href === window.location.href) {
      entry.parentNode.classList.add("active");
    }
  }
+  tocElement = document.getElementById("roadmap");
+  if (!tocElement) {
+    return
+  }
+  for (let entry of tocElement.querySelectorAll("a")) {
+    if (entry.href === window.location.href) {
+      entry.classList.add("active");
+    }
+  }
 }


--- a/app/static/js/nopaque.lists.js
+++ b/app/static/js/nopaque.lists.js
@ -7,7 +7,8 @@ class RessourceList extends List {


  _init(ressources) {
-    this.addRessources(Object.values(ressources));
+    this.add(Object.values(ressources));
+    this.sort("creation_date", {order: "desc"});
  }


@ -20,7 +21,7 @@ class RessourceList extends List {
      switch(operation.op) {
        case "add":
          if (pathArray.includes("results")) {break;}
-          this.addRessources([operation.value]);
+          this.add([operation.value]);
          break;
        case "remove":
          this.remove("id", pathArray[0]);
@ -41,27 +42,29 @@ class RessourceList extends List {
  }


-  addRessources(ressources) {
+  add(ressources) {
    if (this.dataMapper) {
-      this.add(ressources.map(x => this.dataMapper(x)));
+      super.add(ressources.map(x => this.dataMapper(x)));
    } else {
-      this.add(ressources);
+      super.add(ressources);
    }
  }
 }
 RessourceList.dataMapper = {
-  corpus: corpus => ({description: corpus.description,
-                     id: corpus.id,
-                     link: `/corpora/${corpus.id}`,
-                     service: "corpus",
-                     status: corpus.status,
-                     title: corpus.title}),
-  job: job => ({description: job.description,
-               id: job.id,
-               link: `/jobs/${job.id}`,
-               service: job.service,
-               status: job.status,
-               title: job.title})
+  corpus: corpus => ({creation_date: corpus.creation_date,
+                      description: corpus.description,
+                      id: corpus.id,
+                      link: `/corpora/${corpus.id}`,
+                      service: "corpus",
+                      status: corpus.status,
+                      title: corpus.title}),
+  job: job => ({creation_date: job.creation_date,
+                description: job.description,
+                id: job.id,
+                link: `/jobs/${job.id}`,
+                service: job.service,
+                status: job.status,
+                title: job.title})
 };
 RessourceList.options = {
  item: `<tr>
@ -83,7 +86,8 @@ RessourceList.options = {
         </tr>`,
  page: 4,
  pagination: {innerWindow: 8, outerWindow: 1},
-  valueNames: ["description",
+  valueNames: ["creation_date",
+               "description",
               "title",
               {data: ["id"]},
               {name: "link", attr: "href"},
--- a/app/templates/403.html.j2
+++ b/app/templates/403.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="page-header">
--- a/app/templates/404.html.j2
+++ b/app/templates/404.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="page-header">
--- a/app/templates/500.html.j2
+++ b/app/templates/500.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="page-header">
--- a/app/templates/admin/edit_user.html.j2
+++ b/app/templates/admin/edit_user.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/admin/index.html.j2
+++ b/app/templates/admin/index.html.j2
@ -1,4 +1,7 @@
-{% extends "full_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = True %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12">
--- a/app/templates/admin/user.html.j2
+++ b/app/templates/admin/user.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/auth/login.html.j2
+++ b/app/templates/auth/login.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/auth/register.html.j2
+++ b/app/templates/auth/register.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/auth/reset_password.html.j2
+++ b/app/templates/auth/reset_password.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/auth/reset_password_request.html.j2
+++ b/app/templates/auth/reset_password_request.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/auth/unconfirmed.html.j2
+++ b/app/templates/auth/unconfirmed.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block title %}Opaque - Confirm your account{% endblock %}

--- a/app/templates/corpora/add_corpus.html.j2
+++ b/app/templates/corpora/add_corpus.html.j2
@ -1,4 +1,8 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = True %}
+
 {% block page_content %}
 <div class="col s12 m4">
  <h3 id="title">...</h3>
--- a/app/templates/corpora/add_corpus_file.html.j2
+++ b/app/templates/corpora/add_corpus_file.html.j2
@ -1,4 +1,8 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}
+
 {% block page_content %}
 <div class="col s12 m4">
  <h3 id="title">{{ corpus.title }}</h3>
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@ -1,7 +1,9 @@
-{% extends "full_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = True %}
+{% set roadmap = False %}

 {% block page_content %}
-
 <!-- Query Form -->
 <form id="query-form">
  <div class="col s12">
--- a/app/templates/corpora/corpus.html.j2
+++ b/app/templates/corpora/corpus.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/corpora/edit_corpus_file.html.j2
+++ b/app/templates/corpora/edit_corpus_file.html.j2
@ -1,4 +1,8 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}
+
 {% block page_content %}
 <div class="col s12 m4">
  <h3 id="title">...</h3>
--- a/app/templates/full_width.html.j2
+++ b/app/templates/full_width.html.j2
@ -1,11 +0,0 @@
-{% extends "base.html.j2" %}
-
-{% block main_block %}
-<div class="row">
-  <div class="col s12">
-    <h2>{% if title %}{{ title }}{% else %}Unnamed page{% endif %}</h2>
-  </div>
-  {% block page_content %}
-  {% endblock %}
-</div>
-{% endblock %}
--- a/app/templates/jobs/job.html.j2
+++ b/app/templates/jobs/job.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/limited_width.html.j2
+++ b/app/templates/limited_width.html.j2
@ -1,13 +0,0 @@
-{% extends "base.html.j2" %}
-
-{% block main_block %}
-<div class="container">
-  <div class="row">
-    <div class="col s12">
-      <h2>{% if title %}{{ title }}{% else %}Unnamed page{% endif %}</h2>
-    </div>
-    {% block page_content %}
-    {% endblock %}
-  </div>
-</div>
-{% endblock %}
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12">
--- a/app/templates/main/index.html.j2
+++ b/app/templates/main/index.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/nopaque.html.j2
+++ b/app/templates/nopaque.html.j2
@ -61,10 +61,11 @@
        <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
        <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
        <li><div class="divider"></div></li>
-        <li><a class="subheader">Services</a></li>
-        <li><a href="{{ url_for('services.service', service='merge_images') }}"><i class="material-icons">burst_mode</i>Convert images</a></li>
+        <li><a class="subheader">Processes and Services</a></li>
+        <li><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus Analysis</a></li>
        <li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
        <li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
+        <li><a href="{{ url_for('services.service', service='setup_files') }}"><i class="material-icons">burst_mode</i>Setup files</a></li>
        {% if current_user.is_administrator() %}
        <li><div class="divider"></div></li>
        <li><a class="subheader">Administration</a></li>
@ -85,14 +86,61 @@
    </header>

    <main class="grey lighten-5">
-      {% block main_block %}{% endblock %}
+      {% if not full_width %}
+      <div class="container">
+      {% endif %}
+        <div class="row">
+          <div class="col s12">
+            <h2>{% if title %}{{ title }}{% else %}Unnamed page{% endif %}</h2>
+          </div>
+          <div class="col s12 m9 l10">
+            {% block page_content %}
+            {% endblock %}
+          </div>
+          {% if roadmap %}
+          <div class="col hide-on-small-only m3 l2">
+            <ul class="table-of-contents" id="roadmap">
+              <li><b>Roadmap</b></li>
+              <li><a href="{{ url_for('services.service', service='setup_files') }}">Setup files</a></li>
+              <li><a href="{{ url_for('services.service', service='ocr') }}">Optical Character Recognition</a></li>
+              <li><a href="{{ url_for('services.service', service='nlp') }}">Natural Language Processing</a></li>
+              <li><a href="{{ url_for('corpora.add_corpus') }}">Create a corpus</a></li>
+              <li><a href="{{ url_for('services.service', service='corpus_analysis') }}">Corpus analysis</a></li>
+            </ul>
+          </div>
+          {% endif %}
+        </div>
+      {% if not full_width %}
+      </div>
+      {% endif %}
    </main>

    <footer class="page-footer">
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m3">
+            <a href="https://www.dfg.de/">
+              <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
+          </a>
+          </div>
+          <div class="col s12 m3 offset-m1 center-align">
+            <a href="https://www.uni-bielefeld.de/sfb1288/">
+              <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_sfb_1288.png') }}">
+            </a>
+          </div>
+          <div class="col s12 m3 offset-m1">
+            <ul>
+              <h5 class="white-text">Links</h5>
+              <li style="overflow: hidden;"><a class="grey-text text-lighten-3" href="#!"><i class="material-icons left">feedback</i>Feedback</a></li>
+              <li style="overflow: hidden;"><a class="grey-text text-lighten-3" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/opaque"><i class="material-icons left">code</i>GitLab</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
      <div class="footer-copyright">
        <div class="container">
-        © 2019 Bielefeld University
-        <a class="grey-text text-lighten-4 right" href="#!">Impress</a>
+          © 2019 Bielefeld University
+          <a class="grey-text text-lighten-4 right" href="#!">Impress</a>
        </div>
      </div>
    </footer>
--- a/app/templates/profile/index.html.j2
+++ b/app/templates/profile/index.html.j2
@ -1,4 +1,7 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = False %}

 {% block page_content %}
 <div class="col s12 m4">
--- a/app/templates/services/corpus_analysis.html.j2
+++ b/app/templates/services/corpus_analysis.html.j2
@ -0,0 +1,42 @@
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = True %}
+
+{% block page_content %}
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
+
+<div class="card">
+  <div class="card-content" id="corpora">
+    <div class="input-field">
+      <i class="material-icons prefix">search</i>
+      <input id="search-corpus" class="search" type="search"></input>
+      <label for="search-corpus">Search corpus</label>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>
+            <span class="sort" data-sort="title">Title</span>
+            <span class="sort" data-sort="description">Description</span>
+          </th>
+          <th><span class="sort" data-sort="status">Status</span></th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody class="list"></tbody>
+    </table>
+    <ul class="pagination"></ul>
+  </div>
+  <div class="card-action right-align">
+    <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
+  </div>
+</div>
+
+<script>
+  var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
+                                     RessourceList.dataMapper.corpus,
+                                     {page: 10});
+</script>
+{% endblock %}
--- a/app/templates/services/nlp.html.j2
+++ b/app/templates/services/nlp.html.j2
@ -1,8 +1,10 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = True %}

 {% block page_content %}
 <div class="col s12 m4">
-  <h3>The process...</h3>
  <p>Mit Hilfe computergestützter linguistischer Datenverarbeitungsmethoden können Textdateien mit weiteren Informationen angereichert werden. Auf dieser Plattform werden derzeit die im folgenden aufgeführten Textverarbeitungsroutinen in automatisierter Form zur Verfügung gestellt.</p>
 </div>

@ -11,36 +13,21 @@
    <div class="card-content">
      <div class="row">
        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Tokenisierung</span>
-              <p>Aufteilung eines Textes in Sätze und Wörter. Dies ist zur weiteren Verarbeitung notwendig.</p>
-            </div>
-          </div>
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Tokenisierung</span>
+          <p>Aufteilung eines Textes in Sätze und Wörter. Dies ist zur weiteren Verarbeitung notwendig.</p>
        </div>
        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Lemmatisierung</span>
-              <p>Reduktion der Flexionsformen eines Wortes auf dessen Grundform.<br><br></p>
-            </div>
-          </div>
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Lemmatisierung</span>
+          <p>Reduktion der Flexionsformen eines Wortes auf dessen Grundform.<br><br></p>
+        </div>
+        <div class="col s12">&nbsp;</div>
+        <div class="col s12 m6">
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Part-of-speech-Tagging</span>
+          <p>Kontext- und definitionsbezogene Zuordnung von Wörtern und Satzzeichen zu Wortarten.</p>
        </div>
        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Part-of-speech-Tagging</span>
-              <p>Kontext- und definitionsbezogene Zuordnung von Wörtern und Satzzeichen zu Wortarten.</p>
-            </div>
-          </div>
-        </div>
-        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Eigennamenerkennung</span>
-              <p>Identifikation von Wörtern, die eine Entitätbeschreiben, wie Firmen- und Personennamen.</p>
-            </div>
-          </div>
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Eigennamenerkennung</span>
+          <p>Identifikation von Wörtern, die eine Entitätbeschreiben, wie Firmen- und Personennamen.</p>
        </div>
      </div>
    </div>
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@ -1,8 +1,10 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = True %}

 {% block page_content %}
 <div class="col s12 m4">
-  <h3>The process...</h3>
  <p>Der hier zur Verfügung gestellte Dienst basiert auf dem Verfahren der optischen Zeichenerkennung. Dabei werden durch optische Analysemethoden und einen anschließenden Abgleich mit Wörterbüchern aus Bilddaten, wie Fotos oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt ermöglicht eine computergestützte Verarbeitung von Dokumenten.</p>
  <p>Die Ausgabe dieses Dienstes erfolgt in Form von Textdateien, PDF Dateien mit hinterlegtem Text und <a href="https://tei-c.org/guidelines/p5/" target="_blank">TEI P5</a> konformen XML Dateien.</p>
 </div>
@ -12,36 +14,21 @@
    <div class="card-content">
      <div class="row">
        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Eingabe von Bilddaten</span>
-              <p>Über ein Auftragsformular können Bilddaten in Form von PDF-Dateien hochgeladen werden.</p>
-            </div>
-          </div>
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Eingabe von Bilddaten</span>
+          <p>Über ein Auftragsformular können Bilddaten in Form von PDF-Dateien hochgeladen werden.</p>
        </div>
        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Optische Zeichenerkennung</span>
-              <p>Die optische Zeichenerkennung erfolgt in der Recheninfrastruktur der Plattform.</p>
-            </div>
-          </div>
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Optische Zeichenerkennung</span>
+          <p>Die optische Zeichenerkennung erfolgt in der Recheninfrastruktur der Plattform.</p>
+        </div>
+        <div class="col s12">&nbsp;</div>
+        <div class="col s12 m6">
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Fehlerkorrektur</span>
+          <p>Je nach Qualität der Eingabedaten kann es zu Fehlern kommen, die korrigiert werden sollten.</p>
        </div>
        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Fehlerkorrektur</span>
-              <p>Je nach Qualität der Eingabedaten kann es zu Fehlern kommen, die korrigiert werden sollten.</p>
-            </div>
-          </div>
-        </div>
-        <div class="col s12 m6">
-          <div class="card z-depth-0">
-            <div class="card-content">
-              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Weiterverarbeitung</span>
-              <p>Die Textdaten können weiterverarbeitet<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel durch die hier angebotene linguistische Datenverarbeitung."><sup>[*]</sup></a> oder in dieser Form bereits genutzt<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel mit dem Programm &quot;AntConc&quot;."><sup>[*]</sup></a> werden.</p>
-            </div>
-          </div>
+          <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Weiterverarbeitung</span>
+          <p>Die Textdaten können weiterverarbeitet<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel durch die hier angebotene linguistische Datenverarbeitung."><sup>[*]</sup></a> oder in dieser Form bereits genutzt<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel mit dem Programm &quot;AntConc&quot;."><sup>[*]</sup></a> werden.</p>
        </div>
      </div>
    </div>
--- a/app/templates/services/merge_images.html.j2
+++ b/app/templates/services/merge_images.html.j2
@ -1,8 +1,10 @@
-{% extends "limited_width.html.j2" %}
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = False %}
+{% set roadmap = True %}

 {% block page_content %}
 <div class="col s12 m4">
-  <h3>Description</h3>
  <p>To use the <a href="{{ url_for('services.service', service='ocr') }}">OCR</a> service offered here, the input data provided for this purpose must be available either as PDF or multipage TIFF files. However, image files are usually only available as PNG, JPEG or singlepage TIFF files. This service converts the uploaded image files into the correct file format for the <a href="{{ url_for('services.service', service='ocr') }}">OCR</a> service.</p>
 </div>