More template code for query builder

web/app/templates/corpora/analyse_corpus.html.j2

@@ -33,11 +33,9 @@
                   </a>
                 </span>
               </div>
-              <div class="col s12 m1" style="margin-top: 1.75em;">
-                <a class="waves-effect waves-light btn modal-trigger" href="#query-builder-modal">Query builder</a>
-              </div>
-              <div class="col s12 m1" style="margin-top: 1.75em;">
-                {{ wtf.render_field(query_form.submit, material_icon='send', style='width:100%;') }}
+              <div class="col s12 m2 right-align" style="margin-top: 1.75em;">
+                <a class="waves-effect waves-light btn modal-trigger" href="#query-builder-modal"><i class="material-icons left">build</i> Query builder</a>
+                {{ wtf.render_field(query_form.submit, material_icon='send') }}
               </div>
             </div>
           </form>

web/app/templates/modals/query_builder.html.j2

 <!-- Modal showing the corpus files for the current query results including title ant match count per corpus file. -->
 <div id="query-builder-modal" class="modal">
-  <div class="col s12 modal-content">
-    <p>Test</p>
+  <div class="modal-content">
+    <h4>Query builder</h4>
+    <p>Comming soon...</p>
   </div>
-  <div class="col s12 modal-footer">
-    <a href="#!" class="btn modal-close waves-effect waves-green btn">Done</a>
+  <div class="modal-footer">
+    <a href="#!" class="btn modal-close waves-effect waves-green btn" id="query-builder-submit">Done</a>
   </div>
 </div>
+
+<script>
+let queryBuilderSubmitElement = document.querySelector('#query-builder-submit');
+queryBuilderSubmitElement.addEventListener('click', () => {
+  let queryElement = document.querySelector('#query-form-query');
+  // queryElement.value = 'Inhalt';
+});
+</script>