From ddc7859002a8066bab46edc16227c321323ee75c Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Tue, 21 Apr 2020 10:31:34 +0200
Subject: [PATCH] Some visual stuff

---
 app/templates/corpora/analyse_corpus.html.j2 | 87 +++++++++++---------
 1 file changed, 48 insertions(+), 39 deletions(-)

diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 5a89198d..d1764a32 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -183,54 +183,63 @@
 <!-- Context modal used for detailed information about one match -->
 <div id="context-modal" class="modal modal-fixed-footer">
   <div class="modal-content">
-    <h4>Match context</h4>
-    <div class="divider"></div>
-    <div class="section" id="inspect-display-options">
+    <h4>Match Inspect</h4>
+    <div id="inspect-display-options">
       <form>
-        <h5>Display options</h5>
         <div class="row">
-          <div class="col s9">
-            <p>{{ inspect_display_options_form.expert_mode_inspect.label.text }}</p>
-          </div>
-          <div class="col s3 right-align">
-            <div class="switch">
-              <label>
-                {{ inspect_display_options_form.expert_mode_inspect() }}
-                <span class="lever"></span>
-              </label>
+        <ul class="collection with-header">
+          <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">
+              <div class="switch">
+                <label>
+                  {{ inspect_display_options_form.expert_mode_inspect() }}
+                  <span class="lever"></span>
+                </label>
+              </div>
             </div>
-          </div>
-          <div class="col s9">
-            <p>{{ inspect_display_options_form.highlight_sentences.label.text }}</p>
-          </div>
-          <div class="col s3 right-align">
-            <div class="switch">
-              <label>
-                {{ inspect_display_options_form.highlight_sentences() }}
-                <span class="lever"></span>
-              </label>
+          </li>
+          <li class="collection-item">
+              {{ inspect_display_options_form.highlight_sentences.label.text }}
+            <div class="secondary-content">
+              <div class="switch">
+                <label>
+                  {{ inspect_display_options_form.highlight_sentences() }}
+                  <span class="lever"></span>
+                </label>
+              </div>
             </div>
-          </div>
-          <div class="col s6">
-            <p>Nr. of sentences around the match</p>
-          </div>
-          <div class="col s6 right-align">
-            <div class="input-field">
-              <p class="range-field">
-                <input type="range" id="context-sentences"
-                       min="1"
-                       max="10"
-                       value="3" />
-              </p>
+          </li>
+          <li class="collection-item">
+              Sentences around match
+            <div class="secondary-content"
+                 style="margin-top: -35px;
+                        border-top-width: 0px;
+                        margin-bottom: -20px;">
+              <div class="input-field">
+                <p class="range-field">
+                  <input type="range"
+                         id="context-sentences"
+                         style="margin-top: 20px;
+                                margin-bottom: 10px;"
+                         min="1"
+                         max="10"
+                         value="3" />
+                </p>
+              </div>
             </div>
-          </div>
+          </li>
+        </ul>
         </div>
       </form>
     </div>
-    <div class="divider"></div>
-    <div class="section">
+    <div>
       <h5>Context</h5>
-      <div class="row" id="context-results" style="overflow-wrap: break-word;"></div>
+      <div class="row">
+        <div class="clo s12" id="context-results" style="overflow-wrap: break-word;">
+        </div>
+      </div>
     </div>
   </div>
   <div class="modal-footer">