diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2 index 5a89198dd5d7629a1b6294a9b50ce6abec2ef30c..d1764a3266f74ac4e03fade69e9ad531d4224be7 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">