From 7efb16246fec626b463cb0106a9a227bf9bf34ee Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Thu, 23 Apr 2020 11:18:50 +0200
Subject: [PATCH] Clean up and better text break in amtch context

---
 app/templates/corpora/analyse_corpus.html.j2 | 50 +++++++++++++-------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 2fb083b6..5fa4031c 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -26,7 +26,8 @@
                 {{ query_form.query.label }}
                 <span class="helper-text">
                   <a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
-                    <i class="material-icons" style="font-size: inherit;">help</i>
+                    <i class="material-icons" style="font-size: inherit;">help
+                    </i>
                     CQP query language tutorial
                   </a>
                 </span>
@@ -49,10 +50,12 @@
         <form id="display-options-form">
           <div class="row">
             <div class="col s12 m6">
-              {{ M.render_field(display_options_form.results_per_page, material_icon='format_list_numbered') }}
+              {{ M.render_field(display_options_form.results_per_page,
+                                material_icon='format_list_numbered') }}
             </div>
             <div class="col s12 m6">
-              {{ M.render_field(display_options_form.result_context, material_icon='short_text') }}
+              {{ M.render_field(display_options_form.result_context,
+                                material_icon='short_text') }}
             </div>
             <div class="col s12">
               {{ M.render_field(display_options_form.expert_mode) }}
@@ -79,11 +82,15 @@
               <span id="match-count"></span>
               matches loaded.
               <br>
-              Matches occured in <span id="text-lookup-count"></span> corpus files.
+              Matches occured in
+              <span id="text-lookup-count"></span>
+              corpus files.
             </p>
             <p id="query-results-user-feedback">
               <i class="material-icons">help</i>
-              The Server is still sending your results. Functions like "Export Results" and "Match Inspect" will be available after all matches have been loaded.
+              The Server is still sending your results.
+              Functions like "Export Results" and "Match Inspect" will be
+              available after all matches have been loaded.
             </p>
           </div>
           <div class="row">
@@ -94,7 +101,14 @@
         </div>
         <div class="col s12 m6 l6">
           <div class="row">
-            <button id="query-results-export" class="waves-effect waves-light btn-small right disabled" type="submit">Export Results<i class="material-icons right">file_download</i></button>
+            <button id="query-results-export"
+                    class="waves-effect
+                           waves-light
+                           btn-small
+                           right disabled"
+                    type="submit">Export Results
+                    <i class="material-icons right">file_download</i>
+            </button>
           </div>
         </div>
         <!-- Table showing the query results -->
@@ -139,12 +153,15 @@
      class="modal modal-fixed-footer no-autoinit">
   <div class="modal-content">
     <h4>Download current query Results</h4>
-    <p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
+    <p>The results of the current query can be downloaded as several files like
+       csv or json. Those files can be used in other software like Excel.
+       Also it is easy to publish your results as raw data like this!</p>
     <table>
       <tr>
         <td>JSON</td>
         <td>
-          <a class="btn waves-effect waves-light" id="download-results-json">Download
+          <a class="btn waves-effect waves-light" id="download-results-json">
+             Download
             <i class="material-icons right">file_download</i>
           </a>
         </td>
@@ -152,7 +169,9 @@
       <tr>
         <td>CSV</td>
         <td>
-          <a class="btn waves-effect waves-light disabled" id="download-results-csv">Download
+          <a class="btn waves-effect waves-light disabled"
+             id="download-results-csv">
+             Download
             <i class="material-icons right">file_download</i>
           </a>
         </td>
@@ -186,9 +205,10 @@
     <h4>Match Inspect</h4>
     <div id="inspect-display-options">
       <form>
-        <div class="row">
         <ul class="collection with-header">
-          <li class="collection-header"><h5>Display options</h5></li>
+          <li class="collection-header">
+            <h5>Display options</h5>
+          </li>
           <li class="collection-item">
               {{ inspect_display_options_form.expert_mode_inspect.label.text }}
             <div class="secondary-content">
@@ -231,14 +251,12 @@
             </div>
           </li>
         </ul>
-        </div>
       </form>
     </div>
-    <div>
+    <div class="col s12" >
       <h5>Context</h5>
-      <div class="row">
-        <div class="clo s12" id="context-results" style="overflow-wrap: break-word;">
-        </div>
+      <div id="context-results" style="hyphens: auto;
+                                     overflow: auto;">
       </div>
     </div>
   </div>