From 823e42faf08d07bb5d99d618eb569f80352dd324 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Thu, 16 Mar 2023 10:31:58 +0100
Subject: [PATCH] Replace roadmap with manual

---
 app/main/routes.py                            |  8 ++--
 app/static/css/style.css                      |  4 ++
 app/templates/_navbar.html.j2                 |  7 ++--
 app/templates/_sidenav.html.j2                |  2 +-
 app/templates/base.html.j2                    |  5 ++-
 .../main/_manual_modal_contents.html.j2       | 42 +++++++++++++++++++
 .../main/manual/_01_introduction.html.j2      |  2 +-
 .../_02_registration_and_log_in.html.j2       |  2 +-
 .../main/manual/_03_dashboard.html.j2         |  2 +-
 .../main/manual/_06_services.html.j2          | 12 +++---
 ...closer_look_at_the_corpus_analysis.html.j2 |  6 +--
 .../manual/_08_cqp_query_language.html.j2     | 10 ++---
 12 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 app/templates/main/_manual_modal_contents.html.j2

diff --git a/app/main/routes.py b/app/main/routes.py
index 65a237e9..5a23858b 100644
--- a/app/main/routes.py
+++ b/app/main/routes.py
@@ -34,10 +34,10 @@ def dashboard():
     return render_template('main/dashboard.html.j2', title='Dashboard')
 
 
-@bp.route('/user_manual')
-@register_breadcrumb(bp, '.user_manual', '<i class="material-icons left">help</i>User manual')
-def user_manual():
-    return render_template('main/user_manual.html.j2', title='User manual')
+# @bp.route('/user_manual')
+# @register_breadcrumb(bp, '.user_manual', '<i class="material-icons left">help</i>User manual')
+# def user_manual():
+#     return render_template('main/user_manual.html.j2', title='User manual')
 
 
 @bp.route('/news')
diff --git a/app/static/css/style.css b/app/static/css/style.css
index 7c56d3d8..e85d697e 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -19,6 +19,10 @@
   height: 30px !important;
 }
 
+#manual-modal .manual-chapter-title {
+  display: none;
+}
+
 .show-if-only-child:not(:only-child) {
   display: none !important;
 }
diff --git a/app/templates/_navbar.html.j2 b/app/templates/_navbar.html.j2
index 9365b1e7..467db7dd 100644
--- a/app/templates/_navbar.html.j2
+++ b/app/templates/_navbar.html.j2
@@ -21,15 +21,16 @@
         {% endif %}
         {%- endfor -%}
       </ul>
-      {% if current_user.is_authenticated %}
+      {# {% if current_user.is_authenticated %}
       <a class="btn-floating btn-large halfway-fab modal-trigger pink tooltipped waves-effect waves-light" data-tooltip="Roadmap" href="#roadmap-modal"><i class="material-icons">explore</i></a>
-      {% endif %}
+      {% endif %} #}
+      <a class="btn-floating btn-large halfway-fab modal-trigger pink tooltipped waves-effect waves-light" data-tooltip="Manual" href="#manual-modal"><i class="material-icons">help</i></a>
     </div>
   </nav>
 </div>
 
 <ul class="dropdown-content" id="nav-more-dropdown">
-  <li><a href="{{ url_for('main.user_manual') }}"><i class="material-icons left">help</i>Manual</a></li>
+  {# <li><a href="{{ url_for('main.user_manual') }}"><i class="material-icons left">help</i>Manual</a></li> #}
   {% if current_user.is_authenticated %}
   <li><a href="{{ url_for('users.edit_profile', user_id=current_user.id) }}"><i class="material-icons left">settings</i>User settings</a></li>
   <li class="divider" tabindex="-1"></li>
diff --git a/app/templates/_sidenav.html.j2 b/app/templates/_sidenav.html.j2
index 3ac227ee..2d66dc23 100644
--- a/app/templates/_sidenav.html.j2
+++ b/app/templates/_sidenav.html.j2
@@ -26,7 +26,7 @@
   </li> #}
   {# <li><a href="{{ url_for('main.index') }}">nopaque</a></li> #}
   <li><a href="{{ url_for('main.news') }}"><i class="material-icons left">email</i>News</a></li>
-  <li><a href="{{ url_for('main.user_manual') }}"><i class="material-icons">help</i>Manual</a></li>
+  {# <li><a href="{{ url_for('main.user_manual') }}"><i class="material-icons">help</i>Manual</a></li> #}
   <li><a href="{{ url_for('main.dashboard') }}" class="subheader">Dashboard</a></li>
   <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}"><i class="nopaque-icons">I</i>My Corpora</a></li>
   <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}"><i class="nopaque-icons">J</i>My Jobs</a></li>
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index c9189e13..1b442bf9 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -34,9 +34,10 @@
 {% block page_content %}{% endblock page_content %}
 <div id="modals">
   {% block modals %}
-  {% if current_user.is_authenticated %}
+  {% include "main/_manual_modal_contents.html.j2" %}
+  {# {% if current_user.is_authenticated %}
   {% include "_roadmap.html.j2" %}
-  {% endif %}
+  {% endif %} #}
   {% endblock modals %}
 </div>
 {% endblock main %}
diff --git a/app/templates/main/_manual_modal_contents.html.j2 b/app/templates/main/_manual_modal_contents.html.j2
new file mode 100644
index 00000000..bb2c5708
--- /dev/null
+++ b/app/templates/main/_manual_modal_contents.html.j2
@@ -0,0 +1,42 @@
+<div id="manual-modal" class="modal">
+  <div class="modal-content">
+    <h2>Manual</h2>
+    <div id="manual-table-of-contents">
+      <ul class="tabs">
+        <li class="tab"><a href="#manual-modal-introduction">Introduction</a></li>
+        <li class="tab"><a href="#manual-modal-registration-and-log-in">Registration and Log in</a></li>
+        <li class="tab"><a href="#manual-modal-dashboard">Dashboard</a></li>
+        <li class="tab"><a href="#manual-modal-services">Services</a></li>
+        <li class="tab"><a href="#manual-modal-a-closer-look-at-the-corpus-analysis">A closer look at the Corpus Analysis</a></li>
+        <li class="tab"><a href="#manual-modal-cqp-query-language">CQP Query Language</a></li>
+      </ul>
+    </div>
+    <div id="manual-modal-introduction">
+      <br>
+      {% include "main/manual/_01_introduction.html.j2" %}
+    </div>
+    <div id="manual-modal-registration-and-log-in">
+      <br>
+      {% include "main/manual/_02_registration_and_log_in.html.j2" %}
+    </div>
+    <div id="manual-modal-dashboard">
+      <br>
+      {% include "main/manual/_03_dashboard.html.j2" %}
+    </div>
+    <div id="manual-modal-services">
+      <br>
+      {% include "main/manual/_06_services.html.j2" %}
+    </div>
+    <div id="manual-modal-a-closer-look-at-the-corpus-analysis">
+      <br>
+      {% include "main/manual/_07_a_closer_look_at_the_corpus_analysis.html.j2" %}
+    </div>
+    <div id="manual-modal-cqp-query-language">
+      <br>
+      {% include "main/manual/_08_cqp_query_language.html.j2" %}
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
+  </div>
+</div>
diff --git a/app/templates/main/manual/_01_introduction.html.j2 b/app/templates/main/manual/_01_introduction.html.j2
index 46064924..0b1d9ad7 100644
--- a/app/templates/main/manual/_01_introduction.html.j2
+++ b/app/templates/main/manual/_01_introduction.html.j2
@@ -1,4 +1,4 @@
-<h2>Introduction</h2>
+<h3 class="manual-chapter-title">Introduction</h3>
 <p>
   nopaque is a web-based digital working environment. It implements a
   workflow based on the research process in the humanities and supports its
diff --git a/app/templates/main/manual/_02_registration_and_log_in.html.j2 b/app/templates/main/manual/_02_registration_and_log_in.html.j2
index 93d061f3..5f05c543 100644
--- a/app/templates/main/manual/_02_registration_and_log_in.html.j2
+++ b/app/templates/main/manual/_02_registration_and_log_in.html.j2
@@ -1,4 +1,4 @@
-<h2>Registration and Log in</h2>
+<h3 class="manual-chapter-title">Registration and Log in</h3>
 <div class="row">
   <div class="col s12 m4">
     <img alt="Registration and Log in" class="materialboxed responsive-img" src="{{ url_for('static', filename='images/manual/registration-and-log-in.png') }}">
diff --git a/app/templates/main/manual/_03_dashboard.html.j2 b/app/templates/main/manual/_03_dashboard.html.j2
index abfd0ba4..e62fd434 100644
--- a/app/templates/main/manual/_03_dashboard.html.j2
+++ b/app/templates/main/manual/_03_dashboard.html.j2
@@ -1,4 +1,4 @@
-<h2>Dashboard</h2>
+<h3 class="manual-chapter-title">Dashboard</h3>
 <div class="row">
   <div class="col s12 m4">
     <img alt="Dashboard" class="materialboxed responsive-img" src="{{ url_for('static', filename='images/manual/dashboard.png') }}">
diff --git a/app/templates/main/manual/_06_services.html.j2 b/app/templates/main/manual/_06_services.html.j2
index 701e6c80..fcb986e3 100644
--- a/app/templates/main/manual/_06_services.html.j2
+++ b/app/templates/main/manual/_06_services.html.j2
@@ -1,4 +1,4 @@
-<h2>Services</h2>
+<h3 class="manual-chapter-title">Services</h5>
 <div class="row">
   <div class="col s12 m4">
     <img alt="Services" class="materialboxed responsive-img" src="{{ url_for('static', filename='images/manual/services.png') }}">
@@ -19,7 +19,7 @@
   </div>
 </div>
 
-<h3>File Setup</h3>
+<h4 class="manual-chapter-title">File Setup</h4>
 <p>
   The <a href="{{ url_for('services.file_setup_pipeline') }}">File Setup Service</a> bundles image data, such as scans and photos,
   together in a handy PDF file. To use this service, use the job form to
@@ -34,16 +34,16 @@
   sorted in ascending order by file name.
 </p>
 
-<h3>Optical Character Recognition (OCR)</h3>
+<h4>Optical Character Recognition (OCR)</h4>
 <p>Comming soon...</p>
 
-<h3>Handwritten Text Recognition (HTR)</h3>
+<h4>Handwritten Text Recognition (HTR)</h4>
 <p>Comming soon...</p>
 
-<h3>Natural Language Processing (NLP)</h3>
+<h4>Natural Language Processing (NLP)</h4>
 <p>Comming soon...</p>
 
-<h3>Corpus Analysis</h3>
+<h4>Corpus Analysis</h4>
 <p>
   With the corpus analysis service, it is possible to create a text corpus
   and then explore it in an analysis session. The analysis session is realized
diff --git a/app/templates/main/manual/_07_a_closer_look_at_the_corpus_analysis.html.j2 b/app/templates/main/manual/_07_a_closer_look_at_the_corpus_analysis.html.j2
index a2c2732c..b2a500c8 100644
--- a/app/templates/main/manual/_07_a_closer_look_at_the_corpus_analysis.html.j2
+++ b/app/templates/main/manual/_07_a_closer_look_at_the_corpus_analysis.html.j2
@@ -1,5 +1,5 @@
-<h2>A closer look at the Corpus Analysis</h2>
-<h3>Create a corpus</h3>
+<h3 class="manual-chapter-title">A closer look at the Corpus Analysis</h3>
+<h4>Create a corpus</h4>
 <div class="row">
   <div class="col s12 m4">
     <img alt="Create a Corpus" class="materialboxed responsive-img" src="{{ url_for('static', filename='images/manual/create-a-corpus.png') }}">
@@ -32,7 +32,7 @@
   </div>
 </div>
 
-<h3>Analyze a corpus</h3>
+<h4>Analyze a corpus</h4>
 <p>
   After you have created and built a corpus, it can be analyzed. To do this,
   use the button labeled Analyze. The corpus analysis currently offers two
diff --git a/app/templates/main/manual/_08_cqp_query_language.html.j2 b/app/templates/main/manual/_08_cqp_query_language.html.j2
index 0af61dd6..9069d495 100644
--- a/app/templates/main/manual/_08_cqp_query_language.html.j2
+++ b/app/templates/main/manual/_08_cqp_query_language.html.j2
@@ -1,4 +1,4 @@
-<h2>CQP Query Language</h2>
+<h3 class="manual-chapter-title">CQP Query Language</h3>
 <p>Within the Corpus Query Language, a distinction is made between two types of annotations: positional attributes and structural attributes. Positional attributes refer to a token, e.g. the word "book" is assigned the part-of-speech tag "NN", the lemma "book" and the simplified part-of-speech tag "NOUN" within the token structure. Structural attributes refer to text structure-giving elements such as sentence and entity markup. For example, the markup of a sentence is represented in the background as follows:</p>
 <pre>
   <code>
@@ -13,7 +13,7 @@
   </code>
 </pre>
 
-<h3>Positional attributes</h3>
+<h4>Positional attributes</h4>
 <p>Before you can start searching for positional attributes (also called tokens), it is necessary to know what properties they contain.</p>
 <ol>
   <li><span class="blue-text"><b>word</b></span>: The string as it is also found in the original text</li>
@@ -33,7 +33,7 @@
   </li>
 </ol>
 
-<h4>Searching for positional attributes</h4>
+<h5>Searching for positional attributes</h5>
 <div>
   <p>
     <b>Token with no condition on any property (also called <span class="blue-text">wildcard token</span>)</b><br>
@@ -118,7 +118,7 @@
   <pre style="margin-top: 0;"   ><code>         ^             ^ the braces indicate the start and end of an option group</code></pre>
 </div>
 
-<h3>Structural attributes</h3>
+<h4>Structural attributes</h4>
 <p>nopaque provides several structural attributes for query. A distinction is made between attributes with and without value.</p>
 <ol>
   <li><span class="green-text"><b>s</b></span>: Annotates a sentence</li>
@@ -153,7 +153,7 @@
   </li>
 </ol>
 
-<h4>Searching for structural attributes</h4>
+<h5>Searching for structural attributes</h5>
 <pre><code>&lt;ent&gt; [] &lt;/ent&gt;;                       A one token long entity of any type</code></pre>
 <pre><code>&lt;ent_type="PERSON"&gt; [] &lt;/ent_type&gt;;     A one token long entity of type PERSON</code></pre>
 <pre><code>&lt;ent_type="PERSON"&gt; []* &lt;/ent_type&gt;;    Entity of any length of type PERSON</code></pre>