From 5764e918f53dc2d1da9b6ff5d85386c19e30b08a Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Fri, 26 Jun 2020 13:13:18 +0200
Subject: [PATCH] Cosmetics III

---
 web/app/static/js/nopaque.lists.js            |  2 +-
 .../templates/corpora/analyse_corpus.html.j2  | 81 +++++++++----------
 2 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js
index d7825790..a9d106f8 100644
--- a/web/app/static/js/nopaque.lists.js
+++ b/web/app/static/js/nopaque.lists.js
@@ -740,8 +740,8 @@ class ResultsList extends List {
                                 );
     addToSubResultsBtn.innerHTML = '<i class="material-icons">add</i>';
     addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)}
-    aCellElement.appendChild(addToSubResultsBtn);
     aCellElement.appendChild(inspectBtn);
+    aCellElement.appendChild(addToSubResultsBtn);
     // add text titles at front as first td of one row
     textTitlesCellElement.innerText = [...textTitles].join(", ");
     matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);
diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2
index 4faa86fe..825aaf19 100644
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@@ -273,47 +273,33 @@
 <!-- Context modal used for detailed information about one match -->
 <div id="context-modal" class="modal modal-fixed-footer">
   <div class="modal-content">
-    <h4>Match Inspect</h4>
-    <div id="inspect-display-options">
-      <form>
-        <table class="collection with-header">
-          <tr>
-            <th style="width: 75%">Options</th>
-            <th style="width: 25%"> </th>
-          </tr>
-
-          <tr>
-            <td>
-                {{ inspect_display_options_form.expert_mode_inspect.label.text }}
-            </td>
-            <td>
-              <div class="switch right-align">
+    <form>
+      <div class="row" style="margin-bottom: 0px; margin-top: -20px;">
+        <div class="col s12 m6 l6">
+          <div class="section">
+            <h6 style="margin-top: 0px;">Display</h6>
+            <div class="divider" style="margin-bottom: 10px;"></div>
+            <div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
+              {{ inspect_display_options_form.expert_mode_inspect.label.text }}
+              <div class="switch right">
                 <label>
                   {{ inspect_display_options_form.expert_mode_inspect() }}
                   <span class="lever"></span>
                 </label>
               </div>
-            </td>
-          </tr>
-          <tr>
-            <td>
+            </div>
+            <div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
               {{ inspect_display_options_form.highlight_sentences.label.text }}
-            </td>
-            <td>
-              <div class="switch right align">
+              <div class="switch right">
                 <label>
                   {{ inspect_display_options_form.highlight_sentences() }}
                   <span class="lever"></span>
                 </label>
               </div>
-            </td>
-          </tr>
-          <tr>
-            <td>
+            </div>
+            <div class="col s12" style="margin-bottom: 10px;">
               Sentences around match
-            </td>
-            <td>
-              <div class="input-field">
+              <div class="input-field right" style="margin-top: -2rem;margin-bottom: -2rem;">
                 <p class="range-field">
                   <input type="range"
                          id="context-sentences"
@@ -322,23 +308,28 @@
                          value="3" />
                 </p>
               </div>
-            </td>
-          </tr>
-          <tr>
-            <td>
-                Add to Sub Results
-            </td>
-            <td>
-              <div class="secondary-content" id="add-to-sub-results-from-inspect">
+            </div>
+          </div>
+        </div>
+        <div class="col s12 m6 l6">
+          <div class="section">
+            <h6 style="margin-top: 0px;">Create</h6>
+            <div class="divider" style="margin-bottom: 10px;"></div>
+            <div class="col s12">
+              Add to Sub Results
+              <div class="secondary-content right" id="add-to-sub-results-from-inspect">
               </div>
-            </td>
-          </tr>
-        </table>
-      </form>
-    </div>
-    <div class="col s12" >
-      <h5>Context</h5>
-      <div id="context-results">
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div class="row section">
+      <h5 style="margin-top: 0px;">Context</h5>
+      <div class="divider" style="margin-bottom: 10px;"></div>
+      <div class="col s12" >
+        <div id="context-results">
+        </div>
       </div>
     </div>
   </div>