Design update

app/__init__.py

@@ -105,13 +105,13 @@ def create_app(config: Config = Config) -> Flask:
     app.register_blueprint(contributions_blueprint, url_prefix='/contributions')
 
     from .blueprints.spacy_nlp_pipeline_models import bp as spacy_nlp_pipeline_models_blueprint
-    app.register_blueprint(spacy_nlp_pipeline_models_blueprint, url_prefix='/spacy-nlp-pipeline-models')
+    app.register_blueprint(spacy_nlp_pipeline_models_blueprint, url_prefix='/contributions/spacy-nlp-pipeline-models')
 
     from .blueprints.tesseract_ocr_pipeline_models import bp as tesseract_ocr_pipeline_models_blueprint
-    app.register_blueprint(tesseract_ocr_pipeline_models_blueprint, url_prefix='/tesseract-ocr-pipeline-models')
+    app.register_blueprint(tesseract_ocr_pipeline_models_blueprint, url_prefix='/contributions/tesseract-ocr-pipeline-models')
 
     from.blueprints.transkribus_htr_pipeline_models import bp as transkribus_htr_pipeline_models_blueprint
-    app.register_blueprint(transkribus_htr_pipeline_models_blueprint, url_prefix='/transkribus-htr-pipeline-models')
+    app.register_blueprint(transkribus_htr_pipeline_models_blueprint, url_prefix='/contributions/transkribus-htr-pipeline-models')
 
     from .blueprints.corpora import bp as corpora_blueprint
     app.register_blueprint(corpora_blueprint, cli_group='corpus', url_prefix='/corpora')

app/static/css/materialize.override.css

@@ -7,26 +7,15 @@
  *
  * Read more: https://materializecss.com/sidenav.html#variations
  */
-body[data-sidenav-fixed="true" i] main,
+@media only screen and (min-width: 993px) {
-body[data-sidenav-fixed="true" i] footer {
+  body[data-sidenav-fixed="true" i] header,
-  padding-left: 300px;
-}
-
-@media only screen and (max-width: 992px) {
   body[data-sidenav-fixed="true" i] main,
   body[data-sidenav-fixed="true" i] footer {
-    padding-left: 0;
+    padding-left: 300px;
   }
 
   body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
-    width: 100%;
+    width: calc(100% - 300px);
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  body[data-sidenav-fixed="true" i] .sidenav-fixed {
-    margin-top: 64px;
-    z-index: 996;
   }
 }
 /* #endregion sidenav-fixed */

app/static/js/app.js

@@ -163,6 +163,15 @@ nopaque.App = class App {
     // AutoInit method (maybe they forgot it?). Anyway... We do it here. :)
     M.CharacterCounter.init(document.querySelectorAll('input[data-length]:not(.no-autoinit), textarea[data-length]:not(.no-autoinit)'));
 
+    // Header navigation processes and services Dropdown.
+    M.Dropdown.init(
+      document.querySelector('#nav-processes-and-services-dropdown-trigger'),
+      {
+        constrainWidth: false,
+        coverTrigger: false
+      }
+    );
+
     // Header navigation account Dropdown.
     M.Dropdown.init(
       document.querySelector('#nav-account-dropdown-trigger'),

app/templates/_base/_modals/data-processing-and-analysis.html.j2

@@ -0,0 +1,52 @@
+<div id="data-processing-and-analysis-modal" class="modal">
+  <div class="modal-content">
+    <div class="card-panel primary-color white-text">
+      <h4 class="m-3"><i class="material-icons left" style="font-size: inherit; line-height: inherit;">miscellaneous_services</i>Data Processing & Analysis</h4>
+    </div>
+
+    <br>
+
+    <div class="row">
+      <div class="col s12 m6 l3 center-align hoverable" style="position: relative;">
+        <a href="{{ url_for('services.file_setup_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
+        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
+        <br>
+        <b class="service-color-text text-darken" data-service="file-setup-pipeline">File Setup</b>
+        <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
+      </div>
+      <div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
+        <a href="{{ url_for('services.tesseract_ocr_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
+        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
+        <br>
+        <b class="service-color-text text-darken" data-service="tesseract-ocr-pipeline">Optical Character Recognition</b>
+        <p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
+      </div>
+      {% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
+      <div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
+        <a href="{{ url_for('services.transkribus_htr_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
+        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
+        <br>
+        <b class="service-color-text text-darken" data-service="transkribus-htr-pipeline">Transkribus HTR Pipeline</b>
+        <p class="light">nopaque converts your image data – like photos or scans – into text data through HTR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
+      </div>
+      {% endif %}
+      <div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
+        <a href="{{ url_for('services.spacy_nlp_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
+        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
+        <br>
+        <b class="service-color-text text-darken" data-service="spacy-nlp-pipeline">Natural Language Processing</b>
+        <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
+      </div>
+      <div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
+        <a href="{{ url_for('services.corpus_analysis') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
+        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
+        <br>
+        <b class="service-color-text text-darken" data-service="corpus-analysis">Corpus analysis</b>
+        <p class="light">nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</p>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a class="btn-flat modal-close">Close</a>
+  </div>
+</div>

app/templates/_base/dropdowns.html.j2

@@ -1,5 +1,8 @@
 {% if current_user.is_authenticated %}
 <ul class="dropdown-content" id="nav-account-dropdown-content">
+  <li><a href="#!">Logged in as {{ current_user.username }}<br>&lt;{{ current_user.email }}&gt;</a></li>
+  <li class="divider" tabindex="-1"></li>
+  <li><a href="{{ url_for('users.user', user_id=current_user.id) }}"><i class="material-icons">person</i>Your profile</a></li>
   <li><a href="{{ url_for('settings.settings') }}"><i class="material-icons left">settings</i>Settings</a></li>
   <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons left">logout</i>Log out</a></li>
 </ul>

app/templates/_base/modals.html.j2

@@ -1,3 +1,5 @@
 {% if current_user.is_authenticated and not current_user.terms_of_use_accepted %}
 {% include "_base/_modals/terms_of_use.html.j2" %}
 {% endif %}
+
+{% include "_base/_modals/data-processing-and-analysis.html.j2" %}

app/templates/_base/navbar_primary_content.html.j2

@@ -1,38 +1,95 @@
 {% if current_user.is_authenticated %}
-<!-- menu icon -->
+{# menu icon #}
-<!-- small/medium devices -->
+{# shown for small/medium devices #}
 <a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>
+
+{# nopaque logo #}
+{# shown for large devices #}
+<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
+  <img src="{{ url_for('static', filename='images/nopaque_-_logo.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
+</a>
+
+{# left aligned navigation items #}
+{# shown for large devices #}
+<ul class="hide-on-med-and-down" style="margin-left: calc(57px + 1.5rem);">
+  {# dashboard #}
+  <li>
+    <a href="{{ url_for('main.dashboard') }}">
+      <i class="material-icons left">dashboard</i>
+      Dashboard
+    </a>
+  </li>
+
+  {# processes & services #}
+  <li>
+    <a href="#data-processing-and-analysis-modal" class="modal-trigger">
+      <i class="material-icons left">miscellaneous_services</i>
+      Data Processing & Analysis
+    </a>
+  </li>
+
+  {# contributions #}
+  <li>
+    <a href="{{ url_for('contributions.index') }}">
+      <i class="material-icons left">new_label</i>
+      Contributions
+    </a>
+  </li>
+
+  {# social #}
+  <li>
+    <a href="{{ url_for('main.social_area') }}">
+      <i class="material-icons left">groups</i>
+      Social
+    </a>
+  </li>
+</ul>
+{% else %}
+{# nopaque logo+wordmark+slogan #}
+{# shown for large devices #}
+<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
+  <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark+slogan.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
+</a>
 {% endif %}
 
-<!-- nopaque logo+wordmark -->
+{# nopaque logo+wordmark #}
-<!-- small/medium devices -->
+{# small/medium devices #}
 <a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only" style="height: 100%;">
   <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
 </a>
-<!-- large devices -->
-<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="width: 300px; height: 100%;">
-  <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3 ml-4" style="height: 100%;">
-</a>
 
-<!-- right aligned navigation links -->
+{# right aligned navigation items #}
-<!-- large devices -->
+{# large devices #}
 <ul class="right hide-on-med-and-down" style="height: 64px;">
+  {# manual #}
+  <li class="tooltipped" data-position="bottom" data-tooltip="Manual">
+    <a href="{{ url_for('main.manual') }}">
+      <i class="material-icons">help_outline</i>
+    </a>
+  </li>
+
+  {# news #}
+  <li class="tooltipped" data-position="bottom" data-tooltip="News">
+    <a href="{{ url_for('main.news') }}">
+      <i class="material-icons">email</i>
+    </a>
+  </li>
+
   {% if current_user.is_authenticated %}
-  <!-- avatar, username and email -->
+  {# avatar #}
   <li style="height: 100%;">
     <a href="#!" class="dropdown-trigger no-autoinit" data-target="nav-account-dropdown-content" id="nav-account-dropdown-trigger" style="height: 100%;">
-      <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="left circle py-3" style="height: 100%;">
+      <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="circle py-3" style="height: 100%;">
-      <span class="ml-2">{{ current_user.username }} ({{ current_user.email }})</span>
     </a>
   </li>
   {% else %}
-  <!-- log in -->
+  {# log in #}
   <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>
+    <a href="{{ url_for('auth.login') }}">Log in</a>
   </li>
-  <!-- register -->
+  {# register #}
   <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>
+    <a href="{{ url_for('auth.register') }}" class="waves-effect waves-light btn primary-color lighten">Register</a>
   </li>
   {% endif %}
 </ul>

app/templates/_base/sidenav.html.j2

@@ -1,7 +1,6 @@
-<ul class="sidenav sidenav-fixed" id="sidenav">
+<ul class="sidenav {{ 'sidenav-fixed' if sidenav_fixed else '' }}" id="sidenav">
   {# user view #}
-  {# shown for small/medium devices #}
+  <li>
-  <li class="hide-on-large-only">
     <div class="user-view">
       <div class="background primary-color"></div>
       <a><img class="circle" src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt=""></a>
@@ -11,34 +10,22 @@
   </li>
 
   {# general items #}
-  {% if current_user.can('USE_API') %}
+  <li {% if request.path == url_for('main.news') %}class="active"{% endif %}>
-  <li>
-    <a class="waves-effect" href="{{ url_for('apifairy.docs') }}"><i class="material-icons">api</i>API</a>
-  </li>
-  {% endif %}
-  <li>
-    <a class="waves-effect" href="{{ url_for('main.manual') }}"><i class="material-icons">school</i>Manual</a>
-  </li>
-  <li>
     <a class="waves-effect" href="{{ url_for('main.news') }}"><i class="material-icons">email</i>News</a>
   </li>
-
+  <li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
-  {# dashboard items #}
+    <a class="waves-effect" href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a>
-  <li><div class="divider"></div></li>
-  <li><a class="subheader">Dashboard</a></li>
-  <li {% if request.path == url_for('corpora.corpora') %}class="active"{% endif %}>
-    <a class="waves-effect" href="{{ url_for('corpora.corpora') }}"><i class="nopaque-icons">I</i>My Corpora</a>
   </li>
-  <li {% if request.path == url_for('jobs.jobs') %}class="active"{% endif %}>
+  <li {% if request.path == url_for('main.social_area') %}class="active"{% endif %}>
-    <a class="waves-effect" href="{{ url_for('jobs.jobs') }}"><i class="nopaque-icons">J</i>My Jobs</a>
+    <a class="waves-effect" href="{{ url_for('main.social_area') }}"><i class="material-icons">groups</i>Social</a>
   </li>
-  <li>
+  <li {% if request.path == url_for('main.manual') %}class="active"{% endif %}>
-    <a class="waves-effect" href="{{ url_for('contributions.index') }}"><i class="material-icons">new_label</i>My Contributions</a>
+    <a class="waves-effect" href="{{ url_for('main.manual') }}"><i class="material-icons">help_outline</i>Manual</a>
   </li>
 
   {# processes & services items #}
   <li><div class="divider"></div></li>
-  <li><a class="subheader">Processes & Services</a></li>
+  <li><a class="subheader">Data Processing & Analysis</a></li>
   <li class="service-color service-color-border border-darken" data-service="file-setup-pipeline" style="border-left: 10px solid;">
     <a class="waves-effect" href="{{ url_for('services.file_setup_pipeline') }}"><i class="nopaque-icons service-icons" data-service="file-setup-pipeline"></i>File setup</a>
   </li>
@@ -57,17 +44,17 @@
     <a class="waves-effect" href="{{ url_for('services.corpus_analysis') }}"><i class="nopaque-icons service-icons" data-service="corpus-analysis"></i>Corpus Analysis</a>
   </li>
 
-  {# social items #}
+  {# account items #}
-  <li><div class="divider"></div></li>
+  <li class="hide-on-large-only"><div class="divider"></div></li>
-  <li><a class="subheader">Social</a></li>
+  <li class="hide-on-large-only"><a class="subheader">Account</a></li>
   <li>
     <a href="{{ url_for('users.user', user_id=current_user.id) }}"><i class="material-icons">person</i>My Profile</a>
   </li>
-  <li>
+  <li class="hide-on-large-only">
-    <a class="waves-effect" href="{{ url_for('main.social_area', _anchor='public-users') }}"><i class="material-icons">group</i>Public Users</a>
+    <a class="waves-effect" href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>Settings</a>
   </li>
-  <li>
+  <li class="hide-on-large-only">
-    <a class="waves-effect" href="{{ url_for('main.social_area', _anchor='public-corpora') }}"><i class="nopaque-icons">I</i>Public Corpora</a>
+    <a class="waves-effect" href="{{ url_for('auth.logout') }}"><i class="material-icons">logout</i>Log out</a>
   </li>
 
   {# administration items #}
@@ -81,14 +68,4 @@
     <a class="waves-effect" href="{{ url_for('admin.users') }}"><i class="material-icons">manage_accounts</i>Users</a>
   </li>
   {% endif %}
-
-  {# account items #}
-  <li class="hide-on-large-only"><div class="divider"></div></li>
-  <li class="hide-on-large-only"><a class="subheader">Account</a></li>
-  <li class="hide-on-large-only">
-    <a class="waves-effect" href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>Settings</a>
-  </li>
-  <li class="hide-on-large-only">
-    <a class="waves-effect" href="{{ url_for('auth.logout') }}"><i class="material-icons">logout</i>Log out</a>
-  </li>
 </ul>

app/templates/base.html.j2

@@ -3,7 +3,7 @@
 {% endif %}
 
 {% if sidenav_fixed is not defined %}
-{% set sidenav_fixed = current_user.is_authenticated %}
+{% set sidenav_fixed = false %}
 {% endif %}
 
 {% if sticky_footer is not defined %}