From 03db3f8c35827522a95a34b0d0e84613ca3f6c78 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 26 Oct 2020 12:46:46 +0100
Subject: [PATCH] Rework some basics again

---
 ...{_variables.html.j2 => _constants.html.j2} |   7 +-
 web/app/templates/materialize/base.html.j2    |  22 +-
 web/app/templates/nopaque.html.j2             | 230 +++++++++---------
 3 files changed, 133 insertions(+), 126 deletions(-)
 rename web/app/templates/{_variables.html.j2 => _constants.html.j2} (81%)

diff --git a/web/app/templates/_variables.html.j2 b/web/app/templates/_constants.html.j2
similarity index 81%
rename from web/app/templates/_variables.html.j2
rename to web/app/templates/_constants.html.j2
index 95bf1953..197aca99 100644
--- a/web/app/templates/_variables.html.j2
+++ b/web/app/templates/_constants.html.j2
@@ -1,4 +1,4 @@
-{% set colors = {'primary': '#00426f',
+{% set COLORS = {'primary': '#00426f',
                  'secondary': '#b1b3b4',
                  'corpus_analysis': '#aa9cc9',
                  'corpus_analysis_darken': '#6b3f89',
@@ -12,8 +12,3 @@
                  'ocr': '#a9d8c8',
                  'ocr_darken': '#00a58b',
                  'ocr_lighten': '#e7f4f1'} %}
-
-
-{% if main_class is not defined %}
-{% set main_class = 'grey lighten-5' %}
-{% endif %}
diff --git a/web/app/templates/materialize/base.html.j2 b/web/app/templates/materialize/base.html.j2
index 1a4eb866..2b028ef8 100644
--- a/web/app/templates/materialize/base.html.j2
+++ b/web/app/templates/materialize/base.html.j2
@@ -18,12 +18,22 @@
   </head>
   <body{% block body_attribs %}{% endblock body_attribs %}>
     {% block body %}
-    {% block navbar %}
-    {% endblock navbar %}
-    {% block sidenav %}
-    {% endblock sidenav %}
-    {% block content %}
-    {% endblock content %}
+    <header{% block header_attribs %}{% endblock header_attribs %}>
+      {% block header %}
+      {% block navbar %}
+      {% endblock navbar %}
+      {% block sidenav %}
+      {% endblock sidenav %}
+      {% endblock header %}
+    </header>
+
+    <main{% block main_attribs %}{% endblock main_attribs %}>
+      {% block main %}{% endblock main %}
+    </main>
+
+    <footer{% block footer_attribs %}{% endblock footer_attribs %}>
+      {% block footer %}{% endblock footer %}
+    </footer>
 
     {% block scripts %}
     <script src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 7c01e195..80ad189c 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -1,5 +1,5 @@
 {% extends "materialize/base.html.j2" %}
-{% from '_variables.html.j2' import colors %}
+{% from '_constants.html.j2' import COLORS %}
 
 {% block html_attribs %} lang="en"{% endblock html_attribs %}
 
@@ -23,90 +23,92 @@
 <link href="{{ url_for('static', filename='css/materialize.fix.sticky-footer.css') }}" media="screen,projection" rel="stylesheet">
 <link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet">
 <style>
-  .primary-color {background-color: {{ colors.primary }} !important;}
-  .primary-color-text {color: {{ colors.primary }} !important;}
-  .secondary-color {background-color: {{ colors.secondary }} !important;}
-  .secondary-color-text {color: {{ colors.secondary }} !important;}
+  .primary-color {background-color: {{ COLORS.primary }} !important;}
+  .primary-color-text {color: {{ COLORS.primary }} !important;}
+  .secondary-color {background-color: {{ COLORS.secondary }} !important;}
+  .secondary-color-text {color: {{ COLORS.secondary }} !important;}
 
-  .corpus-analysis-color {background-color: {{ colors.corpus_analysis }} !important;}
-  .corpus-analysis-color-text {color: {{ colors.corpus_analysis }} !important;}
-  .corpus-analysis-color.darken {background-color: {{ colors.corpus_analysis_darken }} !important;}
-  .corpus-analysis-color-text.text-darken {color: {{ colors.corpus_analysis_darken }} !important;}
-  .corpus-analysis-color.lighten {background-color: {{ colors.corpus_analysis_lighten }} !important;}
-  .corpus-analysis-color-text.text-lighten {color: {{ colors.corpus_analysis_lighten }} !important;}
+  .corpus-analysis-color {background-color: {{ COLORS.corpus_analysis }} !important;}
+  .corpus-analysis-color-text {color: {{ COLORS.corpus_analysis }} !important;}
+  .corpus-analysis-color.darken {background-color: {{ COLORS.corpus_analysis_darken }} !important;}
+  .corpus-analysis-color-text.text-darken {color: {{ COLORS.corpus_analysis_darken }} !important;}
+  .corpus-analysis-color.lighten {background-color: {{ COLORS.corpus_analysis_lighten }} !important;}
+  .corpus-analysis-color-text.text-lighten {color: {{ COLORS.corpus_analysis_lighten }} !important;}
 
-  .file-setup-color {background-color: {{ colors.file_setup }} !important;}
-  .file-setup-color-text {color: {{ colors.file_setup }} !important;}
-  .file-setup-color.darken {background-color: {{ colors.file_setup_darken }} !important;}
-  .file-setup-color-text.text-darken {color: {{ colors.file_setup_darken }} !important;}
-  .file-setup-color.lighten {background-color: {{ colors.file_setup_lighten }} !important;}
-  .file-setup-color-text.text-lighten {color: {{ colors.file_setup_lighten }} !important;}
+  .file-setup-color {background-color: {{ COLORS.file_setup }} !important;}
+  .file-setup-color-text {color: {{ COLORS.file_setup }} !important;}
+  .file-setup-color.darken {background-color: {{ COLORS.file_setup_darken }} !important;}
+  .file-setup-color-text.text-darken {color: {{ COLORS.file_setup_darken }} !important;}
+  .file-setup-color.lighten {background-color: {{ COLORS.file_setup_lighten }} !important;}
+  .file-setup-color-text.text-lighten {color: {{ COLORS.file_setup_lighten }} !important;}
 
-  .ocr-color {background-color: {{ colors.ocr }} !important;}
-  .ocr-color-text {color: {{ colors.ocr }} !important;}
-  .ocr-color.darken {background-color: {{ colors.ocr_darken }} !important;}
-  .ocr-color-text.text-darken {color: {{ colors.ocr_darken }} !important;}
-  .ocr-color.lighten {background-color: {{ colors.ocr_lighten }} !important;}
-  .ocr-color-text.text-lighten {color: {{ colors.ocr_lighten }} !important;}
+  .ocr-color {background-color: {{ COLORS.ocr }} !important;}
+  .ocr-color-text {color: {{ COLORS.ocr }} !important;}
+  .ocr-color.darken {background-color: {{ COLORS.ocr_darken }} !important;}
+  .ocr-color-text.text-darken {color: {{ COLORS.ocr_darken }} !important;}
+  .ocr-color.lighten {background-color: {{ COLORS.ocr_lighten }} !important;}
+  .ocr-color-text.text-lighten {color: {{ COLORS.ocr_lighten }} !important;}
 
-  .nlp-color {background-color: {{ colors.nlp }} !important;}
-  .nlp-color-text {color: {{ colors.nlp }} !important;}
-  .nlp-color.darken {background-color: {{ colors.nlp_darken }} !important;}
-  .nlp-color-text.text-darken {color: {{ colors.nlp_darken }} !important;}
-  .nlp-color.lighten {background-color: {{ colors.nlp_lighten }} !important;}
-  .nlp-color-text.text-lighten {color: {{ colors.nlp_lighten }} !important;}
+  .nlp-color {background-color: {{ COLORS.nlp }} !important;}
+  .nlp-color-text {color: {{ COLORS.nlp }} !important;}
+  .nlp-color.darken {background-color: {{ COLORS.nlp_darken }} !important;}
+  .nlp-color-text.text-darken {color: {{ COLORS.nlp_darken }} !important;}
+  .nlp-color.lighten {background-color: {{ COLORS.nlp_lighten }} !important;}
+  .nlp-color-text.text-lighten {color: {{ COLORS.nlp_lighten }} !important;}
 
-  .pagination li.active {background-color: {{ colors.primary }};}
-  .table-of-contents a.active {border-color: {{ colors.primary }};}
-  .tabs .tab a {color: inherit; /* Custom Text Color */}
-  .tabs .tab a:hover {color: {{ colors.primary }}; /* Custom Color On Hover */}
-  .tabs .tab a.active, .tabs .tab a:focus.active {
-    color: {{ colors.primary }}; /* Custom Text Color While Active */
-    background-color: {{ colors.primary }}28; /* Custom Background Color While Active */
+  {% if scheme_color is not defined %}
+    {% set scheme_color = COLORS.primary %}
+  {% endif %}
+  main button, main .btn, main .btn-floating {background-color: {{ scheme_color }};}
+  main .pagination li.active {background-color: {{ scheme_color }};}
+  main .table-of-contents a.active {border-color: {{ scheme_color }};}
+  main .tabs .tab a {color: inherit;}
+  main .tabs .tab a:hover {color: {{ scheme_color }};}
+  main .tabs .tab a.active, .tabs .tab a:focus.active {
+    color: {{ scheme_color }};
+    background-color: {{ scheme_color }}28;
   }
-  .tabs .indicator {background-color: {{ colors.primary }}; /* Custom Color Of Indicator */}
+  main .tabs .indicator {background-color: {{ scheme_color }};}
 </style>
 {% endblock styles %}
 
 {% block navbar %}
-<header>
-  <div class="navbar-fixed">
-    <nav class="nav-extended">
-      <div class="nav-wrapper primary-color">
+<div class="navbar-fixed">
+  <nav class="nav-extended">
+    <div class="nav-wrapper primary-color">
+      {% if current_user.is_authenticated %}
+      <a href="#" data-target="sidenav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+      {% endif %}
+      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px;"></a>
+      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-large-only" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px;"></a>
+      <ul class="right">
+        <li class="hide-on-med-and-down{% if request.path == url_for('main.news') %} active{% endif %}"><a href="{{ url_for('main.news') }}"><i class="material-icons left">notifications</i>News</a></li>
         {% if current_user.is_authenticated %}
-        <a href="#" data-target="sidenav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+        <li class="hide-on-med-and-down{% if request.path == url_for('main.dashboard') %} active{% endif %}"><a href="{{ url_for('main.dashboard') }}"><i class="material-icons left">dashboard</i>Dashboard</a></li>
+        <li class="hide-on-med-and-down"><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
+        {% else %}
+        <li{% if request.path == url_for('auth.register') %} class="active"{% endif %}><a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a></li>
+        <li{% if request.path == url_for('auth.login') %} class="active"{% endif %}><a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a></li>
         {% endif %}
-        <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px;"></a>
-        <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-large-only" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px;"></a>
-        <ul class="right">
-          <li class="hide-on-med-and-down{% if request.path == url_for('main.news') %} active{% endif %}"><a href="{{ url_for('main.news') }}"><i class="material-icons left">notifications</i>News</a></li>
-          {% if current_user.is_anonymous %}
-          <li{% if request.path == url_for('auth.register') %} class="active"{% endif %}><a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a></li>
-          <li{% if request.path == url_for('auth.login') %} class="active"{% endif %}><a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a></li>
-          {% else %}
-          <li class="hide-on-med-and-down{% if request.path == url_for('main.dashboard') %} active{% endif %}"><a href="{{ url_for('main.dashboard') }}"><i class="material-icons left">dashboard</i>Dashboard</a></li>
-          <li class="hide-on-med-and-down"><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
-          {% endif %}
-        </ul>
-      </div>
-      <div class="nav-content secondary-color">
-        {% block nav_content %}{% endblock nav_content %}
-      </div>
-    </nav>
-  </div>
+      </ul>
+    </div>
+    <div class="nav-content secondary-color">
+      {% block nav_content %}{% endblock nav_content %}
+    </div>
+  </nav>
+</div>
 
-  {% if current_user.is_authenticated %}
-  <ul class="dropdown-content" id="nav-more-dropdown">
-    <li><a href="{{ url_for('settings.index') }}"><i class="material-icons left">settings</i>Settings</a></li>
-    <li class="divider" tabindex="-1"></li>
-    <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
-  </ul>
-  {% endif %}
-</header>
+{% if current_user.is_authenticated %}
+<ul class="dropdown-content" id="nav-more-dropdown">
+  <li><a href="{{ url_for('settings.index') }}"><i class="material-icons left">settings</i>Settings</a></li>
+  <li class="divider" tabindex="-1"></li>
+  <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
+</ul>
+{% endif %}
 {% endblock navbar %}
 
 {% block sidenav %}
-<ul class="sidenav sidenav-fixed{% if not current_user.is_authenticated %} hide{% endif %}" id="sidenav">
+<ul class="sidenav sidenav-fixed{% if not current_user.is_authenticated %} hide{% endif %}">
   {% if current_user.is_authenticated %}
   <li>
     <div class="user-view">
@@ -121,10 +123,10 @@
   <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Processes & Services</a></li>
-  <li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
-  <li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
-  <li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
-  <li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
+  <li style="background-color: {{ COLORS.file_setup }}; border-left: 10px solid {{ COLORS.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
+  <li style="background-color: {{ COLORS.ocr }}; border-left: 10px solid {{ COLORS.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
+  <li style="background-color: {{ COLORS.nlp }}; border-left: 10px solid {{ COLORS.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
+  <li style="background-color: {{ COLORS.corpus_analysis }}; border-left: 10px solid {{ COLORS.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Account</a></li>
   <li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li>
@@ -141,54 +143,54 @@
 </ul>
 {% endblock sidenav %}
 
-{% block content %}
-<main>
+{% block main %}
   {% block page_content %}{% endblock page_content %}
-</main>
+{% endblock main %}
 
-<footer class="page-footer secondary-color">
+{% block footer_attribs %} class="page-footer secondary-color"{% endblock footer_attribs %}
+
+{% block footer %}
+<div class="container">
+  <div class="row">
+    <div class="col s6 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 s6 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">
+      <h5 class="white-text">Legal Notice</h5>
+      <ul>
+        <li><a class="grey-text text-lighten-3" href="https://www.uni-bielefeld.de/(en)/impressum/">Legal Notice</a></li>
+        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.privacy_policy') }}">Privacy statement (GDPR)</a></li>
+        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.terms_of_use') }}">Terms of use</a></li>
+        <li></li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div class="footer-copyright primary-color">
   <div class="container">
-    <div class="row">
-      <div class="col s6 m3">
-        <a href="https://www.dfg.de/">
-          <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
-        </a>
+    <div class="row" style="margin-bottom: 0;">
+      <div class="col s12 m3">
+        <span>© 2020 Bielefeld University</span>
       </div>
-      <div class="col s6 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">
-        <h5 class="white-text">Legal Notice</h5>
-        <ul>
-          <li><a class="grey-text text-lighten-3" href="https://www.uni-bielefeld.de/(en)/impressum/">Legal Notice</a></li>
-          <li><a class="grey-text text-lighten-3" href="{{ url_for('main.privacy_policy') }}">Privacy statement (GDPR)</a></li>
-          <li><a class="grey-text text-lighten-3" href="{{ url_for('main.terms_of_use') }}">Terms of use</a></li>
-          <li></li>
-        </ul>
+      <div class="col s12 m9 right-align">
+        <a class="btn-small blue waves-effect waves-light" href="{{ url_for('main.about_and_faq') }}"><i class="left material-icons">info_outline</i>About and faq</a>
+        {% if config.CONTACT_EMAIL_ADRESS %}
+        <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Contact"><i class="left material-icons">rate_review</i>Contact</a>
+        <a class="btn-small green waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Feedback"><i class="left material-icons">feedback</i>Feedback</a>
+        {% endif %}
+        <a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque"><i class="left material-icons">code</i>GitLab</a>
       </div>
     </div>
   </div>
-  <div class="footer-copyright primary-color">
-    <div class="container">
-      <div class="row" style="margin-bottom: 0;">
-        <div class="col s12 m3">
-          <span>© 2020 Bielefeld University</span>
-        </div>
-        <div class="col s12 m9 right-align">
-          <a class="btn-small blue waves-effect waves-light" href="{{ url_for('main.about_and_faq') }}"><i class="left material-icons">info_outline</i>About and faq</a>
-          {% if config.CONTACT_EMAIL_ADRESS %}
-          <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Contact"><i class="left material-icons">rate_review</i>Contact</a>
-          <a class="btn-small green waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Feedback"><i class="left material-icons">feedback</i>Feedback</a>
-          {% endif %}
-          <a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque"><i class="left material-icons">code</i>GitLab</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>
-{% endblock content %}
+</div>
+{% endblock footer %}
 
 {% block scripts %}
 {{ super() }}