Rework corpora/query results

web/app/corpora/views.py

@@ -51,8 +51,7 @@ def corpus(corpus_id):
                          title=corpus_file.title,
                          publishing_year=corpus_file.publishing_year,
                          corpus_id=corpus.id,
-                         id=corpus_file.id
-                         )
+                         id=corpus_file.id)
                     for corpus_file in corpus.files]
     return render_template('corpora/corpus.html.j2',
                            corpus=corpus,

web/app/templates/corpora/interactions/display.html.j2

@@ -1,14 +1,15 @@
-<!-- HTML to allow the user to change how the results are being displayed.-->
+{% import 'materialize/wtf.html.j2' as wtf %}
 
+<!-- HTML to allow the user to change how the results are being displayed.-->
 <div class="col s12 m3 l2" id="display">
   <h6 style="margin-top: 0px;">Display</h6>
   <div class="divider" style="margin-bottom: 10px;"></div>
   <div class="row">
     <div class="col s12">
       <form id="display-options-form">
-        {{ M.render_field(display_options_form.results_per_page,
+        {{ wtf.render_field(display_options_form.results_per_page,
                           material_icon='format_list_numbered') }}
-        {{ M.render_field(display_options_form.result_context,
+        {{ wtf.render_field(display_options_form.result_context,
                           material_icon='short_text') }}
         <div class="col s12" style="line-height: 38px;">
           <div class="col s8">
@@ -27,4 +28,3 @@
     </div>
   </div>
 </div>
-

web/app/templates/corpora/query_results/add_query_result.html.j2

@@ -1,6 +1,13 @@
 {% extends "nopaque.html.j2" %}
+{% import 'materialize/wtf.html.j2' as wtf %}
 
 {% block page_content %}
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <h1 id="title">{{ title }}</h1>
+    </div>
+
     <div class="col s12 m4">
       <p>Fill out the following form to upload and view your exported query data from the corpus analsis.</p>
       <a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a>
@@ -13,22 +20,24 @@
             {{ add_query_result_form.hidden_tag() }}
             <div class="row">
               <div class="col s12 m4">
-            {{ M.render_field(add_query_result_form.title, data_length='32', material_icon='title') }}
+                {{ wtf.render_field(add_query_result_form.title, data_length='32', material_icon='title') }}
               </div>
               <div class="col s12 m8">
-            {{ M.render_field(add_query_result_form.description, data_length='255', material_icon='description') }}
+                {{ wtf.render_field(add_query_result_form.description, data_length='255', material_icon='description') }}
               </div>
               <div class="col s12">
-            {{ M.render_field(add_query_result_form.file, accept='.json', placeholder='Choose your .json file') }}
+                {{ wtf.render_field(add_query_result_form.file, accept='.json', placeholder='Choose your .json file') }}
               </div>
             </div>
           </div>
           <div class="card-action right-align">
-        {{ M.render_field(add_query_result_form.submit, material_icon='send') }}
+            {{ wtf.render_field(add_query_result_form.submit, material_icon='send') }}
           </div>
         </div>
       </form>
     </div>
+  </div>
+</div>
 
 <div id="progress-modal" class="modal">
   <div class="modal-content">

web/app/templates/corpora/query_results/inspect.html.j2

@@ -1,11 +1,13 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
 
-{% set headline = ' ' %}
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}
 
-{% set full_width = True %}
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
 
 {% block page_content %}
-{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }}
+<div class="row">
   <div class="col s12">
     <div class="card">
       <div class="card-content" style="padding-top: 5px;
@@ -49,16 +51,20 @@
       </div>
     </div>
   </div>
+</div>
 
-<!-- Scroll to top element -->
-{% include 'corpora/interactions/scroll_to_top.html.j2' %}
-
-<!-- Modals -->
+{# Import modals #}
 {% include 'modals/show_metadata.html.j2' %}
 {% include 'modals/show_corpus_files.html.j2' %}
 {% include 'modals/context_modal.html.j2' %}
 
+<!-- Scroll to top element -->
+{% include 'corpora/interactions/scroll_to_top.html.j2' %}
+{% endblock page_content %}
 
+
+{% block scripts %}
+{{ super() }}
 <script type="module">
 /**
  * First Phase:
@@ -117,7 +123,6 @@ import {
  * Second Phase:
  * Asynchronus and event driven code.
  */
-document.addEventListener("DOMContentLoaded", () => {
 /**
  * Initializing the results object as a model holding all the data of a
  * query. Also holds the metadata of one query and results data.
@@ -236,6 +241,5 @@ document.addEventListener("DOMContentLoaded", () => {
 client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson]);
 // Enable scroll to Top functionality.
 scrollToTop('#headline', '#menu-scroll-to-top-div');
-});
 </script>
 {% endblock %}

web/app/templates/corpora/query_results/query_result.html.j2

@@ -1,13 +1,23 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
+
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}
+
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
 
 {% block page_content %}
-{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }}
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <h1 id="title">{{ title }}</h1>
+    </div>
+
     <div class="col s12">
       <p>Below the metadata for the results from the Corpus
         <i>{{ query_result.query_metadata.corpus_name }}</i> generated with the query
         <i>{{ query_result.query_metadata.query }}</i> are shown.
       </p>
-
     </div>
 
     <div class="col s12">
@@ -70,8 +80,9 @@
         </div>
       </div>
     </div>
+  </div>
+</div>
 
-<!-- Modal Structure -->
 <div id="modal-text-details" class="modal modal-fixed-footer">
   <div class="modal-content">
     <h4>Bibliographic data</h4>
@@ -81,7 +92,10 @@
     <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
   </div>
 </div>
+{% endblock page_content %}
 
+{% block scripts %}
+{{ super() }}
 <script>
 var moreTextDetailsButtons;
 moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
@@ -117,5 +131,4 @@ for (var btn of moreTextDetailsButtons) {
   }
 }
 </script>
-
 {% endblock %}